Question

关于jquery Dialog我有一个奇怪的问题。我正在使用Jquery对话框来显示jcaptcha图像。我在对话框上有一个刷新按钮。点击链接后，应打开此验证码对话框。我的问题是，对话框上的图像刷新按钮。此刷新按钮在Google Chrome中完美运行。刷新按钮和新图像在chrome中工作n次，但在IE 11中，我的刷新按钮只能工作一次。它第二次没有任何反应。我检查了新渲染图像的DOM值。新图像从服务器给出了新值，但仍然显示对话框显示旧图像。这是我正在使用的一些位代码

我正在使用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

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

例如：

while ((line = br.readLine()) != null) {
    football = line.split(csvSplit);
    if(football[1].equals("Chelsea") {
        System.out.println("I found Chelsea on row with first column equal to " + football[0]);
        System.out.println("The entire row consists of: ");
        for(int i = 0; i < football.length; i++) {
            System.out.print(football[i] + ", ");
        }
        System.out.println();
    }
}

如果没有好的包装，这可能会带走超过需要的东西。如果是这种情况，也可以尝试complete: function(e) { var newCaptcha = $('<img />', { id: "captchaText", src: "../captcha", value: "../captcha"+d.getTime() }); $('#searchByPartyNameForm\\:captchaText').parent().html(newCaptcha); }，如下：

replaceWith()

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

<强>更新

如果你的Ajax调用返回一个图像（JPEG / PNG / GIF），你需要以一种非常不同的方式处理它。在这里看到：Display PNG image as response to jQuery AJAX request

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

$.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需要符合您的Captcha脚本返回的图像MIME类型。

在jquery Dialog中刷新图像，在谷歌浏览器中工作正常

1 个答案: