forcing a jQuery ready block to run after all other ready blocks

Question

Is it possible to have one jQuery ready block executed after all others have done so.

I have this in my master page ...

<script type="text/javascript">
    $(document).ready(function()
    {
        $("input[type='text']:enabled:first", document.forms[0]).focus().select();
    });
</script>

and this in one of my other pages ...

<script type="text/javascript">
    $(document).ready(function()
    {
        $('textarea.message-body').wysiwyg();
    });
</script>

The problem I am seeing is that the first block is executed before the second block, which is causing a problem with the tab key. What's happening is that the keyboard focus goes to the address bar in my browser when I press the tab key. I've changed the code slightly to have this in my master page ...

<script type="text/javascript">
    $(document).ready(function()
    {
        var bodies = $('textarea.message-body');
        if (bodies.length > 0)
        {
            bodies.wysiwyg();
        }

        $("input[type='text']:enabled:first", document.forms[0]).focus().select();
    });
</script>

and do away with the other ready block completely. Doing that makes the tab key work properly, and set the focus onto my textarea.

I'd rather not have page specific code in my master page.

So, is there a way to make my textbox focusing code run after the wysiwyg code?

score 9 · Answer 1 · edited Nov 09 '11 at 21:19

9

$(window).load() function fires after the $(document).ready()

edited Nov 09 '11 at 21:19

Brandon

68,708
30
194
223

answered Nov 09 '11 at 20:31

Muhammad Adnan

1,373
1
13
20

Paul Sweatte · Answer 2 · 2015-04-12T15:50:56.337

8

Add a custom event trigger to your master page:

<script type="text/javascript">
$(document).ready(function()
{
    $('textarea.message-body').wysiwyg();
    $(document).trigger('tb');
});
</script>

And bind it to the other page:

<script type="text/javascript">
$(document).bind('tb', function(){
  $("input[type='text']:enabled:first", document.forms[0]).focus().select();          
});
</script>

References

edited Apr 12 '15 at 15:50

answered Jan 11 '12 at 19:06

Paul Sweatte

24,148
7
127
265

This one might look scary at a first glance but actually is pretty simple and usually far better than listening to "load" event. Please read [events/ready from JQuery docs](http://docs.jquery.com/Events/ready) if you don't know when "load" is triggered and how long you need to wait for it. – skalee Oct 01 '12 at 15:00

score 2 · Accepted Answer · answered Nov 02 '09 at 11:41

This is the solution I went with.

In my master page I have this...

<script type="text/javascript">
<!--
    $(document).ready(function()
    {
        if (typeof (OnLoad) != "undefined")
        {
            OnLoad();
        }

        $("input[type='text']:enabled:first", document.forms[0]).focus().select();
    });
//-->
</script>

and in my detail pages I have this...

<script type="text/javascript">
<!--
    function OnLoad()
    {
        $('textarea.message-body').wysiwyg();
    }
//-->
</script>

score 1 · Answer 4 · answered Oct 10 '09 at 22:19

1

How about only you only registring one document.ready() on the master page, and then let that one execute the code based on a variable? This solution is not that elegant, but a search for JavaScript thread synchronization didn't really turn op anything.

You could change the code on the master page to:

<script type="text/javascript">
    var runWysiwyg = false;
    $(document).ready(function()
    {
        if (runWysiwyg) {
            $('textarea.message-body').wysiwyg();
        }
        $("input[type='text']:enabled:first", document.forms[0]).focus().select();
    });
</script>

And put this script in you page:

<script type="text/javascript">
    runWysiwyg = true;
</script>

answered Oct 10 '09 at 22:19

Jan Aagaard

10,940
8
45
80

1

Thanks, I'd sort of got the same solution. I've gone for having an OnLoad() function in my page, with this in the master ... – Antony Scott Oct 10 '09 at 22:22
I looked some more for a general solution on the synchronization problem and found that JavaScript is not multithreaded: http://stackoverflow.com/questions/39879/why-doesnt-javascript-support-multithreading – Jan Aagaard Oct 10 '09 at 22:28
1

You won't see anything on "JavaScript thread synchronization" because JS engines in the browser are all single threaded. – Michael Mior May 08 '12 at 17:39

forcing a jQuery ready block to run after all other ready blocks

4 Answers4

Linked