Ajax doesn't trigger a change-event on a webkit based browser

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 span 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 {
                          开发者_StackOverflow                          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';
        }
    }

}

I guess you can try using jQuery's built-in methods for checkServerIcon:

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

There might be some quirks between the browsers that can be fixed by using jQuery's methods instead.

Use the JQuery change method instaid of javascript's onchange the target.change() will only trigger jquery's bounded functions

Here's the solution:

I removed the onchange event from my span, and instead, gave it a class name:

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

Next, I made jQuery add the change event itself:

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

My javascript function had to be rewritten:

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');
        }
    }   
}

And now the code works in both Firefox and Webkit based browsers like Google Chrome :)