I have a web app I am developing an running with firefox. I am using jQuery for several things, with several modal windows being part of that. With one of those modal dialogs, when a function is run, it changes the title, adds a button, then opens. When this function is run in firefox the window/tab will go blank for a brief moment, then the page will reappear and the dialog will display as expected. This doesn't affect functionality at all, just the presentation (i.e. It looks bad..). I suspect that what is happening is the DOM is being updated, causing firefox to quickly reload the page. What is causing this I don't know (outside of it being the jQuery dialog) and it doesn't do it with other dialogs I have on the same page.
The code that receives data, populates it into the dialog div, and opens the dialog:
else if(response.getElementsByTagName('reply')[0].firstChild.data == 'section') {
var secContent = ''
for(var i=0; i<response.getElementsByTagName('content').length;i++) {
secContent += response.getElementsByTagName('content')[i].firstChild.data;
}
document.getElementById('section').innerHTML = secContent;
var section = response.getElementsByTagName('section')[0].firstChild.data;
var pid = response.getElementsByTagName('pid')[0].firstChild.data;
document.getElementById('loader_'+section).style.display = 'none';
$("#section").dialog("option", "title", section.toUpperCase());
$("#section").dialog("option", "buttons", { "Save Changes": function() { saveSec(section, pid); } } );
$("#section").dialog("open");
}
And the dialog box js:
$( "#section" ).dialog({
minHeight: 300,
minWidth: 500,
modal: true,
autoOpen: false,
resizable: false,
show:'drop',
});