Ajax ne déclenche pas d'événement de modification sur un navigateur basé sur Webkit

Question

J'ai adapté un plugin Jquery pour remplir mes besoins afin d'envoyer des requêtes GET aux serveurs afin de les "pinguer".

J'ai également ajouté du code javascript pour ajouter quelques caractéristiques de fantaisie comme: en fonction de la valeur modifiée dans un span que le plugin Jquery change, il change l'icône en conséquence. Pour que tout fonctionne essentiellement, j'ai fait en sorte que lorsque Ajax obtient un événement "complet", il force un événement "onChange" à l'intervalle, déclenchant la fonction de validation javascript pour changer les icônes d'état.

Voici le code de mon plugin jQuery légèrement modifié:

/** 
* ping for jQuery 
* 
* Adapted by Carroarmato0 (to actually work instead of randomly "pinging" nowhere instead of faking 
* 
* @auth Jessica 
* @link http://www.skiyo.cn/demo/jquery.ping/ 
* 
*/ 
(function($) { 
    $.fn.ping = function(options) { 
     var opts = $.extend({}, $.fn.ping.defaults, options); 
     return this.each(function() { 
      var ping, requestTime, responseTime ; 
      var target = $(this); 
         var server = target.html(); 
         target.html('<img src="img/loading.gif" alt="loading" />'); 
      function ping() { 
       $.ajax({url: 'http://' + server, 
        type: 'GET', 
        dataType: 'html', 
        timeout: 30000, 
        beforeSend : function() { 
         requestTime = new Date().getTime(); 
        }, 
        complete : function() { 
         responseTime = new Date().getTime(); 
         ping = Math.abs(requestTime - responseTime); 

               if (ping > 2000) { 
                target.text('niet bereikbaar'); 
               } else { 
                target.text(ping + opts.unit); 
               } 

               target.change(); 
        } 
       }); 
      } 
      ping(); 
      opts.interval != 0 && setInterval(ping,opts.interval * 1000); 
     }); 
    }; 
    $.fn.ping.defaults = { 
     interval: 3, 
     unit: 'ms' 
    }; 
})(jQuery); 

target.change(); est le code qui déclenche l'événement « onchange » dans la durée:

echo " <td class=\"center\"><span id=\"ping$pingNb\" onChange=\"checkServerIcon(this)\" >" .$server['IP'] . "</span></td>"; 

Dans Firefox cela fonctionne, checkServerIcon (cela) est exécuté et passe l'objet span à la fonction.

function checkServerIcon(object) { 
    var delayText = object.innerHTML; 
    var delay = delayText.substring(0, delayText.length - 2); 

    if (isInteger(delay)) { 
     object.parentNode.previousSibling.parentNode.getElementsByTagName('img')[0].src = 'img/servers/enable_server.png'; 

    } else { 

     if (delay == "bezig.") { 
      object.parentNode.previousSibling.parentNode.getElementsByTagName('img')[0].src = 'img/servers/search_server.png'; 
     } else { 
      object.parentNode.previousSibling.parentNode.getElementsByTagName('img')[0].src = 'img/servers/desable_server.png'; 
     } 
    } 

} 

Answer 1

Je suppose que vous pouvez essayer d'utiliser des méthodes intégrées de jQuery pour checkServerIcon:

$(object).parent().prev().parent().find('img:first').attr({src: 'image-source-here'}); 

Il pourrait y avoir quelques bizarreries entre les navigateurs qui peuvent être résolus en utilisant les méthodes de jQuery à la place.

Answer 2

Utilisez la méthode changement JQuery instaid de javascript de onchange le target.change() ne fonctionne bornées de seul déclencheur jquery

Answer 3

Voici la solution:

J'ai enlevé l'événement onchange de ma portée, et au lieu, il a donné un nom de classe:

echo " <td class=\"center\"><span class=\"ping\" id=\"ping$pingNb\">" .$server['IP'] . "</span></td>"; 

Ensuite, j'ai fait jQuery ajouter l'événement change lui-même:

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("span.ping").change(checkServerIcon); 
    }); 
</script> 

Ma fonction javascript devait être réécrite:

function checkServerIcon() { 
    var tr = $(this).parent().parent(); 
    var img = tr.find('td>img').first().attr('src'); 
    var delayText = tr.find('td>span').text(); 
    var delay = delayText.substring(0, delayText.length - 2); 

    if (isInteger(delay)) { 
     tr.find('td>img').first().attr('src','img/servers/enable_server.png'); 

    } else { 

     if (delay == "bezig.") { 
      tr.find('td>img').first().attr('src','img/servers/search_server.png'); 
     } else { 
      tr.find('td>img').first().attr('src','img/servers/desable_server.png'); 
     } 
    } 
} 

Et maintenant, le code fonctionne dans Firefox et les navigateurs basés sur Webkit comme Google Chrome :)