Ok, so I've put some code into JSBin to try to reproduce this. I haven't been entirely successful, and the code that I've written is probably pretty close to telling me what the problem is...but not yet.
http://jsbin.com/ekace3/2If you go there, there is an "Object expected" error, which upon debugging looks like the second <script> tag can't get at the JQuery $. It works fine when I put it on my local machine...also I'm using IE7, if that makes any difference.
But even with the error, I hope its visible that the document.ready with the alert in it gets called twice. (first, causing an error. Second, the alert is called).
- <script type="text/javascript">
$(document).ready(function()
{
$("#DialogPanel").dialog({
autoOpen: false,
resizable: false,
width: 200,
modal: true
});
$("#OpenDialogButton").click(function()
{
$("#DialogPanel").dialog("open");
});
});
</script> - <input type="button"
id="OpenDialogButton" value="Open Dialog" />
- <div id="DialogPanel">
<script type="text/javascript">
$(document).ready(function()
{
alert("qwer");
});
</script>
Text!
</div>
Section 1 is the "creating and opening the dialog" code. Section 2 is the button to open. Section 3 is the "dialog" div.
I can already see part of my problem - I have a conceptual failure. Section 3 is a "component", but when the ASP.NET engine renders it, it's just script on the page in a document.ready and gets run immediately. When you click the button, the dialog opens properly with no more Javascript called.
I can deal with most of that. But because the document.ready is called both by the JQuery UI code that creates the dialog,
and by the regular JQuery code, it's called twice. I would like to be able to prevent the UI code from calling it (and at this point have no expectation of being able to prevent the regular call).
Please let me know if this doesn't make sense. I feel like I'm not doing a terrific job of explaining my issue >.<