I have a paragraphed named dialog I am trying to add content to via ajax. The element is positioned like so:
<div id="modal" style="height:100%; width:100%; position:fixed; z-index:1; left:0; top:0; display:none;">
<div style="position:fixed; top:50%; left:0; width:100%;">
<div style="height:150px; width:300px; margin:auto;">
<div>Processing</div>
<div>
<开发者_StackOverflow;p id="dialog">Please Wait...</p>
</div>
</div>
</div>
</div>
Note I am calling:
$('#modal').show("fast");
before trying to add content to it.
Then I try to add to the dialog paragraph like so:
$.post(
'processor.php',
queryString,
function(data){
alert('data:'+data);
$('#dialog').html(data);
}
)
It does not innerHTML to the dialog paragraph. I tried adding the content to a different element that is not positioned, and it worked fine.
Anyone know why this is not working? or have a fix?
P.s. I know I should move my styles to a style sheet, I usually do that at the end.
Update
I wanted to let you know I only have 1 dialog id and it actually IS removing the text inside #dialog just not adding anything.
Also I am calling this in document.ready
You can see the page here click the submit button on the very bottom to see it happen.
update2
This is working correctly in FF and IE, its only not working in chrome.
if you view the console log, the text is there. try add css to the dialog something like :
#dialog { display:block; width:auto; height:auto;}
$(document).ready(function() {
// do stuff when DOM is ready
//Is your code called inside here or after this function is executed?
//If not, it should be.
});
Hiding it, then changing the text, then showing it again seems to get it to work. You have to animate both the hide and the show to get it to work tho:
$('#mydialog').hide("slow",function(){
$('#mydialog').html(data);
$('#mydialog').show("slow");
});
It doesn't look very elegant tho. I would prefer a better fix if someone has one.
edit:
A better looking work around I came up with is using 2 dialogs and toggling them as I change the text.
精彩评论