图片在 jquery 对话框中不刷新，在 Google Chrome 中工作正常

Question

我有一个关于 jquery 对话框的奇怪问题。我正在使用 Jquery 对话框来显示 jcaptcha 图像。我在对话框上有一个刷新按钮。单击 link，此验证码对话框应打开。我的问题是，对话框上的图像刷新按钮。这个刷新按钮在 Google chrome 中工作得很好。刷新按钮和新图像在 chrome 中工作了 n 次，但在 IE 11 中，我的刷新按钮只工作了一次。第二次它没有任何反应。我检查了新呈现的 DOM 值 image.New 图像从服务器提供了新值，但对话框仍然显示旧图像。这是我正在使用的一些位代码

我正在使用 JSF h:commandLink 初始化并打开对话框

<h:commandLink id="linkClicked" onclick="return srchPartyNameCaptchaCheck(this)"></h:commandLink>

下面是我的对话框内容

<h:panelGrid id="captchaGrid" columns="2" styleClass="captchaGridClass" style="display: none;">
        <h:panelGrid columns="1">
            <h:graphicImage id="captchaText" value="/captcha"></h:graphicImage>
        </h:panelGrid>
        <h:panelGrid styleClass="captchaGridClass" columns="1">
        <h:commandButton id="imgCaptchaReload" image="/resources/images/captcha/captchaReload.gif" immediate="true" onclick="return reloadCaptchaPartyName()">
            </h:commandButton>
        </h:panelGrid>
        <h:panelGrid columns="1">
            <h:inputText id="captchaSubmitted" required="true" validatorMessage="Insert text as shown in image" value="#{civilCaseSearchBean.captchaSubmitted}"></h:inputText>
        </h:panelGrid>
    </h:panelGrid>

下面是我在 javascript

中的 jquery 对话代码

function srchPartyNameCaptchaCheck(e){
  $("#searchByPartyNameForm\:captchaGrid").dialog({
    autoOpen : false,
    height : 260,
    width : 480,
    modal : true,
    buttons: {
      Submit: function () {//some ajax code for captcha validation},
      Close: function () {
        $(this).dialog("destroy");
      }
  }

现在是最后一段代码，这让我很困扰。 javascript 在对话框中重新加载图像的函数。这在 Chrome 上工作得很好，但在 IE 上只工作一次！

function reloadCaptchaPartyName() {
    var d = new Date();

    $.ajax({
        type: "POST",
        url: "../captcha",
        //url: "../CaptchaValidationServlet",
        async: false,
        cache: false,
        success: function() {
        },

        error: function() {
            alert("error");
        },

        complete: function(e) {
            $('#searchByPartyNameForm\:captchaText').removeAttr("src");
            $('#searchByPartyNameForm\:captchaText').removeAttr("value");

            $('#searchByPartyNameForm\:captchaText').attr("src","../captcha");
            $('#searchByPartyNameForm\:captchaText').attr("value","../captcha"+d.getTime());

        }
    });
}

我唯一能弄清楚的是，我的对话框引用在 IE 中初始化后丢失了。由于 jquery UI 的兼容支持，Chrome 正在按预期工作。我不确定我错过了什么或做错了什么。非常感谢您的帮助。

谢谢大家

Answer 1

我建议您实际替换图像，而不仅仅是源属性或属性。

例如：

complete: function(e) {
  var newCaptcha = $('<img />', {
    id: "captchaText",
    src: "../captcha",
    value: "../captcha"+d.getTime()
  });
  $('#searchByPartyNameForm\:captchaText').parent().html(newCaptcha);
}

如果没有好的包装器，这可能会带走比需要更多的东西。如果是这种情况，也可以像这样尝试 replaceWith()：

complete: function(e) {
  var newCaptcha = $('<img />', {
    id: "captchaText",
    src: "../captcha",
    value: "../captcha"+d.getTime()
  });
  $('#searchByPartyNameForm\:captchaText').replaceWith(newCaptcha);
}

如果这没有帮助，请使用 IE 中的开发人员工具来确定这些元素发生了什么，或者提供可以更好地阐明问题的结果HTML。

更新

如果您的 Ajax 调用 returns 图像 (JPEG/PNG/GIF)，您会希望以截然不同的方式处理它。就像在这里看到的：Display PNG image as response to jQuery AJAX request

$.ajax({
    type: "POST",
    url: "../captcha",
    contentType: "image/png",    
    error: function() {
        alert("error");
    },
    complete: function(image) {
        $('#searchByPartyNameForm\:captchaText').attr("src", "data:image/png;base64," + image);
    }
});

contentType 和 data 需要符合验证码脚本返回的图像 MIME 类型。

图片在 jquery 对话框中不刷新，在 Google Chrome 中工作正常

image not refreshing in jquery Dialog, works fine in Google Chrome

javascript

ajax

jsf

jquery-ui

jquery-ui-dialog