Ajax doesn't trigger a change-event on a webkit based browser
- by user319464
I have adapted a Jquery plugin to for-fill my needs to send GET requests to servers as a way of "pinging" them.
I've also added some javascript code to add some fancy features like: depending on the changed value in a that the Jquery plugin changes, it changes the Icon accordingly.
To make it all work essentially, I made so that when Ajax gets a "complete" event, it forces a "onChange" event to the span, triggering the javascript validation function to change the status icons.
Here is the code of my slightly modified jQuery Plugin:
/**
* 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(); is the code that triggers the "onchange" event in the span:
echo " <td class=\"center\"><span id=\"ping$pingNb\" onChange=\"checkServerIcon(this)\" >" .$server['IP'] . "</span></td>";
In Firefox this works, checkServerIcon(this) gets executed and passes the span object to the function.
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';
}
}
}
My guess would be that there's something different in WebKit browsers in the way object.parentNode.previousSibling.parentNode. .... works...
