简体   繁体   中英

After ajax post, appended div not displaying in IE 8

I'm posting data to my webserver and returning a success or fail status. I'd like to display a confirmation or error message to the user after the ajax post. It works as expected in Chrome and IE 9, but IE 8 will not display the newly appended div that is my confirmation message.

Using IE 8's DOM inspector, I found that the div element is in fact being appended to the DOM, but is just not being displayed. Perhaps IE isn't getting some sort of screen refresh event after I append the element? I am appending DOM elements in ajax callback functions in other places in my code, using $.getJSON() -- it seems that IE is seeing the POST method and deciding to not let me update the DOM.

My ajax code looks like this:

$.post("adminpage.ashx?action=newAccount", newData, function (response) {
      getAccount(newData.accountNum);   // display the new account
      if (response == "success") {
          createAlert("Account was successfully updated.", "success").appendTo(".container");
      } else if (response == "error") {
          createAlert("There was an error updating the account.", "error").appendTo(".container");
      }
});

createAlert() returns the div with my confirmation or error message.

Thanks in advance.

EDIT: Here is the code for my createAlert function:

function createAlert(message, type) {
    var alert = $("<div>");
    alert.addClass("alert alert-block");
    if (typeof type != "undefined") {
        alert.addClass("alert-" + type);
    }

    var dismissButton = $("<button>");
    dismissButton.addClass("close").attr("data-dismiss", "alert").text("x");
    dismissButton.appendTo(alert);

    var alertText = $("<p>");
    alertText.text(message);

    alert.append(message);

    return alert;
}

And the HTML that IE 8's debugger shows:

<DIV class="alert alert-block alert-success">
    <BUTTON class=close type=submit data-dismiss="alert">x</BUTTON>Account was successfully updated.
</DIV>

I experienced a similar issue but I finally got it to work by using a variant function so instead of writing

  someObj.appendTo('.blabla');

I wrote

 $('.blabla').append(someObj);

If you're tempted to try

$.post("adminpage.ashx?action=newAccount", newData, function (response) {
  getAccount(newData.accountNum);   // display the new account
  if (response == "success") {
      $(".container").append(createAlert("Account was successfully updated.", "success"));
  } else if (response == "error") {
      $(".container").append(createAlert("There was an error updating the account.", "error"));
  }
});

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM