Javascript jQuery函数更新div但不更新图像_Javascript_Jquery_Html

Javascript jQuery函数更新div但不更新图像

javascript jquery html

Javascript jQuery函数更新div但不更新图像,javascript,jquery,html,Javascript,Jquery,Html,我的for Mediawiki中有以下jQuery代码，它以给定的时间间隔刷新页面中的内容。这适用于div，但不会更新图像（图形）。例如，这里是嵌入在页面中的一个图形的html <img id="pnp4img1" class="graph" src="http://rouser:ropass@192.168.1.2/pnp4nagios/image?host=aws-us&srv=Check_MK&view=0&graph_width=50

我的for Mediawiki中有以下jQuery代码，它以给定的时间间隔刷新页面中的内容。这适用于div，但不会更新图像（图形）。例如，这里是嵌入在页面中的一个图形的html

<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">

您不能在图像上使用

.html（）

，因为它没有html内容。这就是为什么它只在

div

s上工作

如果元素是image，则应使用

.replaceWith（）

将其替换为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);

另一种选择是为每个图像都提供包装。让我们假设

.imageWrapper

并刷新它们，而不是

img.graph

您的选择器将是

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

您不能在图像上使用

.html（）

，因为它没有html内容。这就是为什么它只在

div

s上工作

如果元素是image，则应使用

.replaceWith（）

将其替换为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);

另一种选择是为每个图像都提供包装。让我们假设

.imageWrapper

并刷新它们，而不是

img.graph

您的选择器将是

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

您不能在图像上使用

.html（）

，因为它没有html内容。这就是为什么它只在

div

s上工作

如果元素是image，则应使用

.replaceWith（）

将其替换为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);

另一种选择是为每个图像都提供包装。让我们假设

.imageWrapper

并刷新它们，而不是

img.graph

您的选择器将是

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

您不能在图像上使用

.html（）

，因为它没有html内容。这就是为什么它只在

div

s上工作

如果元素是image，则应使用

.replaceWith（）

将其替换为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);

另一种选择是为每个图像都提供包装。让我们假设

.imageWrapper

并刷新它们，而不是

img.graph

您的选择器将是

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

我们可以用同样的小提琴吗？

如果（obj.id！=”）{}

其他的发生了什么？如果

obj.id

是空字符串怎么办？请提供一个JSFIDLE。要重新加载图像，您可以通过添加额外的参数time来更改图像的src，以强制重新加载tue graph图像。@SpartakusMd是的，我意识到这一点，但正如我前面所说，我想从ajax响应中提取图像数据。这是为了避免对同一资源多次调用服务器。@RayonDabre，我只是想让代码在没有id的情况下跳过元素。在JSFIDLE中显示这一点有点棘手，因为它是一个wiki页面，但我在JSFIDLE.net/5fzp3wrtCan中添加了解析后的输出。如果（obj.id！=）{还有什么事发生了？如果

obj.id

obj.id

obj.id

是空字符串怎么办？请提供一个JSFIDLE。要重新加载图像，您可以通过添加额外的参数time来更改图像的src，以强制重新加载tue graph图像。@SpartakusMd是的，我意识到这一点，但正如我前面所说，我想从ajax响应中提取图像数据。这是为了避免对同一资源多次调用服务器。@RayonDabre，我只是想让代码在没有id的情况下跳过元素。在JSFIDLE中显示这一点有点棘手，因为它是一个wiki页面，但我在这里添加了解析输出jsFIDLE.net/5fzp3wrtor更好：

if（This.tagName='img'）

Yes，@vsync，那更好。编辑了我的答案。谢谢@ReneKorss/@vsync非常感谢您！我被困在这一个多星期，所以这真的帮助了我。它似乎可以在没有.clone（）调用的情况下工作，所以不确定这是否增加了任何好处？一个问题是当图像更新时页面会闪烁。你知道如何防止吗？是的，它在没有

.clone（）

的情况下也能工作。如果您未使用

.clone（）

，则元素将从原始源中删除。对你来说，没问题。页面闪烁可能导致戈麦斯无法再次加载图像。在很短的时间内，图像并没有内容，所有元素都会移入页面以填充它。在替换图像之前，应预加载图像。见问题。@ReneKorss再次感谢。我尝试过这样做，但无法让它工作，所以现在我求助于使用

///If is image，如果（this.tagName==''IMG'）{//$（this.replacetwith（$data.find（id））；var imgsrc=$data.find（id）.attr（'src'）；$（this）.attr（'src'，imgsrc）}

正在执行此任务，但不幸的是，它使2个