jQuery Forum

This is JS inside a <script> tag?  There's more to it than you reveal here.  The normal complaint on this forum is about no JS execution at all (mostly Chrome).  Your JS should execute onLoad - that's it.  If you are seeing some JS code executing twice, then I hazard to guess that this is not in the global scope?  Perhaps some event handling code?  

Yes. The javascript in the component is inside a <script> tag.

The code on the component has been put into $(document).ready(function() {...}), so yes, your "event handling code" guess is correct. Is the document ready both at creation and show?

Thanks very much for your response. Would it help if I put a code example together? I haven't yet because I was hoping my question would be straight-forward, but your response indicates that I've left something important out.

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/2

If 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).

1. <script type="text/javascript">
     $(document).ready(function()
     {
       $("#DialogPanel").dialog({
         autoOpen: false,
         resizable: false,
         width: 200,
         modal: true
     });
       
     $("#OpenDialogButton").click(function()
       {
         $("#DialogPanel").dialog("open");
       });
     });
   </script>
2. <input type="button" id="OpenDialogButton" value="Open Dialog" />
   
3. <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 >.<

I am not entirely clear as to the purpose of all this but there is perhaps one mechanical element that you may not appreciate about ui-dialog:  What you call DialogPanel will become .ui-dialog-content and becomes wrapped into .ui-dialog, the thing that we will eventually perceive as "the window".  To complete the wrap, the DialogPanel is first removed from the DOM, and then re-inserted (as a child of .ui-dialog).  Now, we do expect that as soon as the DOM is ready, your alert will pop up.  This will be as a consequence of that <script> tag being part of the DOM at inception. But the <script> tag must run again when the dialog construction (in 1) re-inserts the DialogPanel into the DOM (because the <script> is a child of the DialogPanel).  After that, you will notice that the script does not fire again (for every OPENing of the dialog). 

My example as-written doesn't make any sense, but if you imagine that DialogPanel is contained within an ASP.NET user control, which can be re-used, and which I would prefer to not have to have knowledge that it is inside of a dialog, I hope it makes more sense.

You've outlined in your last response both of the situations where the inner <script> tag is being run. Is there a good way to prevent one of those executions?

Thanks for your time!

Your last response unfortunately wasn't the way we were trying to do things. However, it gave me an idea - I can remove all of the <script> tags before creating the dialog so that they don't get run.

1.     function removeScripts()
       {
           var dialogScripts = $("#" + dialogContainerId).find("script");
           dialogScripts.remove();
           return dialogScripts;
       }
2.     function addScripts(dialogScripts)
       {
           var dialogContainer = document.getElementById(dialogContainerId);
           dialogScripts.each(function()
           {
               dialogContainer.appendChild(this);
           });
       }

removeScripts removes all of the scripts from the dialog panel DOM, and addScripts puts them all back in. (have to "appendChild", because the jQuery "appendTo" calls the Javascript again!)

If I call these two functions before creation, the dialog javascript isn't called during creation anymore. It's instead called during the very first open. So I remove/add the scripts during open as well, and everything works out the way I want it - Javascript called once, when the "completed page" is actually ready, and then never again.

Thanks a lot for your help!

I had the same problem, so I thought I'd offer my solution.
I was building jquery comboboxes on the fly using PHP.
Some of the comboboxes would be placed on a form that would be a pop up dialog.
When the dialog popped up, the script which created the combobox (which was placed right in line with the form) would execute a second time. There would be a 2nd combobox placed in the same location as the first and would prevent proper operation of the form control.

I modified the  jquery combobox code to add the name of each comboox it creates to a global array. That way it can check the array before creating a combobox to prevent creating the same one twice.

Here's the code snippet:

1. var combo_created = new Array();
2. var combo_box_count = 0;
3. jQuery.fn.combobox = function(select){
4.     if ($.inArray(this.attr('name'), combo_created) != -1) return;
5.    
6.     combo_created[combo_box_count++] = this.attr('name');

This logic can easily be extended to any script you don't want to run twice on a page.
Simply set a variable

1. var fooHasRun=false;

Then in your function do this:

1. function foo(){
2.       if (fooHasRun) return;
3.       fooHasRun = true;
4.       // put foo code here
   
5. }