jpganz18 jpganz18 -4 years ago 49
Javascript Question

Why does my jquery modal stop working after full page ajax load?

Ive discovered that I have an issue with the jQuery dialog (using jquery 1.3 , pretty old but I cannot update it).

When I do

var request = $.ajax({
url: "${Request.context}/info/" + userId,
success: function(response) {
$("#userInfo").html(response);
}
});

$("#divUserInfo").dialog('open');
}


where

$('#divUserInfo').dialog({
width: 700,
height: 250,
autoOpen: false,
modal: true,
title: "User Info",
resizable: false
});


The dialog itself works fine, opens everytime when it has no content or when I do
$("#userInfo").html("any string possible");


But when I load the entire page of the ajax response, I see no error on my console but I cannot re-open the dialog. Is there any way I can avoid that happening? should I reload the DOM or something similar? or extract the body of the response?

Answer Source

You need to re-initialize dialog plugin after replacing DOM with ajax response, so that it works for updated DOM elements as well

Try this:

var request = $.ajax({
  url: "${Request.context}/info/" + userId,
  success: function(response) {
    $("#userInfo").html(response);
    $('#divUserInfo').dialog({
      width: 700,
      height: 250,
      autoOpen: false,
      modal: true,
      title: "User Info",
      resizable: false
    });
  }
});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download