jQuery function updating divs but not images

Question

I have the following jQuery code in my Nagios extension for Mediawiki which refreshes content in a page at given intervals. This works fine for the divs, but is not updating the images (graphs). For example, here is the html for one of the graphs embedded in the page,

<img id="pnp4img1" class="graph" src="http://rouser:ropass@192.168.1.2/pnp4nagios/image?host=aws-us&amp;srv=Check_MK&amp;view=0&amp;graph_width=500&amp;graph_height=100">

I know there are other ways of updating the image by updating the src attribute but I'm really trying to stick with the function below and pull the image data from the ajax response.

Hope someone can help :)

(function(mw, $) {

    var nagiosRefreshInterval = mw.config.get('wgNagiosRefresh') * 1000;
    mw.hook('wikipage.content').add(function($content) {
        setTimeout(worker, nagiosRefreshInterval);
    });

    function worker() {
        $.ajax({
            url: location.href,
            success: function(data) {
                var $data = $(data);
                $(".qtip").remove();
                $('.status, .stateInfoPanel, img.graph').each(function(i, obj) {
                        if (obj.id != "") {
                        var id = '#' + obj.id;
                        console.log("id=" + id);
                        $(this).html($data.find(id));
                    }
                })
            },
            error: function() {
                console.log("An error occured with the refresh");
            }
        });
        // Schedule the next request when the current one's complete
        setTimeout(worker, nagiosRefreshInterval);
    }

})(mediaWiki, jQuery);

Answer 1

You can't use .html() on image, since it dosen't have HTML content. That's why it only works on div s.

If element is image, you should use .replaceWith() to replace it with new.

(function(mw, $) {

    var nagiosRefreshInterval = mw.config.get('wgNagiosRefresh') * 1000;
    mw.hook('wikipage.content').add(function($content) {
        setTimeout(worker, nagiosRefreshInterval);
    });

    function worker() {
        $.ajax({
            url: location.href,
            success: function(data) {
                var $data = $(data);
                $(".qtip").remove();
                $('.status, .stateInfoPanel, img.graph').each(function(i, obj) {
                    if (obj.id != "") {
                        var id = '#' + obj.id;
                        console.log("id=" + id);

                        // If is image, replace it
                        if(this.tagName == 'IMG'){
                            $(this).replaceWith($data.find(id).clone());
                        }
                        // Other elements
                        else{
                            $(this).html($data.find(id));
                        }
                    }
                })
            },
            error: function() {
                console.log("An error occured with the refresh");
            }
        });
        // Schedule the next request when the current one's complete
        setTimeout(worker, nagiosRefreshInterval);
    }

})(mediaWiki, jQuery);

Alternative would be to have wrappers for every image. Let's say .imageWrapper and refresh those instead of img.graph .

Your selector would be

$('.status, .stateInfoPanel, .imgWrapper')