ajax - JQuery Dialog: How to do partial page refresh and get new dialogs each time -
i'm having workflow issue jquery dialogs when trying create dialogs , doing partial page render. i'll try go through sample scenario, , apologies in advance long problem description:
the page loads, html turned jquery dialogs. dialogs created on document.ready (using .dialog()
), autoopen property set false. when jquery creates dialogs (if i'm using firebug inspect page), dialog html stripped normal location , stuck @ end of document, wrapper classes around it. user opens dialogs clicking link $dialogdiv.dialog('open')
.
so works fine. problem there times when doing partial page reload using ajax (using asp.net mvc renderpartial). part of page i'm refreshing happens have of dialog html in it, gets re-written out. remember dialog (with of jquery wrapper classes, etc) there bottom of document. html wasn't part of page refresh, i'm stuck 2 sets of dialog html. giving me sorts of problems because have duplicate id's on page, , jquery behavior on these html elements becomes unpredictable. it's worse when start doing 3, 4, 5 partial page refreshes, because have 3, 4, 5 sets of dialog html (with 1 real dialog having been made on document.ready).
i'm thinking might need destroy dialogs or @ point, haven't had luck approach. have ideas?
thanks much.
according the docs destroying dialog removes dialog functionality , restores it's pre-init state not remove dom.
since replacing content , dialog remove old ones.
$.ajax({ url: '/some/url/', success:function(data){ $('.ui-dialog').empty().remove(); //add new html , make dialogs } });
in response comment
i haven't seen code, i'm not sure how you're settings dialogs, in general sense populate variable dialogs replaced.
//inside document.ready var mydialog=$('#mydialog').dialog(), myotherdialog=$('#myotherdialog').dialog(), permanentdialog=$('#permanentdialog').dialog(), destroyabledialogs=[mydialog, myotherdialog]; //ajax callback success: function(data){ $.each(destroyabledialogs, function(i,n){ n.empty().remove(); }); }
Comments
Post a Comment