The idea with setTimeout is not to wait until the page loads - you don't
have to guess at a specific timeout value - but to simply break up a long
script into pieces that don't have to all run at once. The typical
setTimeout interval for this purpose is 1 millisecond, i.e. the shortest
possible timeout.

IOW, if a script has to do a thousand things, have it do a hundred of them,
then a short timeout, then another hundred, another timeout, etc.

However, for what you're trying to do here, that doesn't sound like the
right way to fix it. I would use event delegation instead. Simply set a
*single* .click and .blur handler on the document body or on some element
that contains your table code, and inside the handlers, check to see if the
element that was clicked or blurred is one you're interested in.

A direct translation of your code would look something like this:

    $(function() {
        $('body')
            .click( function( event ) {
                var $target = $(event.target);
                if( $target.is('.updateBtn') ) {
                    varrowId = $target.parents('tr').attr('id');
                    saveRow(rowId);
                    alert('ItemUpdated');
                }
            })
            .blur( function( event ) {
                var $target = $(event.target);
                if( $target.is('tr.rowData:text, tr.rowData textarea') ) {
                    varid = $target.parents('tr').attr('id');
                    saveRow(id);
                }
            });
    });

(Well, a direct translation with a couple of liberties - I used the shorter
form of $(document).ready, and I compulsively changed the double quotes to
single quotes - which I recommend getting in the habit of doing, so when you
generate HTML code from your JS code, you can use double quotes in the HTML
without messy escaping.)

As you can see, the code sets a single handler each for .click and .blur on
the BODY element. (You could use any other element that contains your
table.) It uses event.target to get the element that was actually clicked or
blurred, and then .is() to test the element against your original selectors.
This will ignore clicks and blurs on other elements and process the ones for
the elements you're interested in.

I tried to understand the use of the varrowId, rowId, varid, and id
variables but couldn't make any sense of them. Are there some typos in
there, and missing "var" declarations? Or are those supposed to be global
variables?

Reading between the lines, I'm guessing that the actual intent of the code
may be more like this:

    $(function() {
        $('body')
            .click( function( event ) {
                var $target = $(event.target);
                if( $target.is('.updateBtn') ) {
                    save( $target );
                }
            })
            .blur( function( event ) {
                var $target = $(event.target);
                if( $target.is('tr.rowData:text, tr.rowData textarea') ) {
                    save( $target );
                }
            });
        
        function save( $target ) {
            saveRow( $target.parents('tr').attr('id') );
        }
    });

Does that look like what you want?

-Mike

> From: [EMAIL PROTECTED]
> 
> Thanks for the link and your response, but I guess I'm slow.  
> I have two event handlers (click and blur) that I want to 
> definite within my document.ready function.  How am I 
> supposed to use setTimeout?  How do I how long to set the 
> timeout for if I don't know how long it will take for the 
> page to load?

> On May 16, 4:09 pm, "Karl Rudd" <[EMAIL PROTECTED]> wrote:
> > "Chunk" the code up using setTimeout().
> >
> > 
> http://groups.google.com/group/jquery-en/browse_thread/thread/
> aabbe7e...
> >

> > On Sat, May 17, 2008 at 5:56 AM, [EMAIL PROTECTED]
> >
> > > I have a page has a lot of data and can run slowly.  As soon as I 
> > > try and load this page, IE tells me
> >
> > >http://screencast.com/t/mXOBRKW1T2
> >
> > > (the script is causing this page to run slowly, 
> continue?).  Anyway, 
> > > I notice when I take out this block of JQuery code, the message
> > > disappears:
> >
> > >        $(document).ready(function() {
> > >                $('.updateBtn').click(function(){
> > >                        var rowId = $(this).parents("tr").attr("id");
> > >                        saveRow(rowId);
> > >                        alert("Item Updated");
> > >                });
> >
> > >                $('tr.rowData :text, tr.rowData
textarea').blur(function() {
> > >                        var id = $(this).parents("tr").attr("id");
> > >                        saveRow(id);
> > >                });
> > >        });
> >
> > > Unfortunately, I need this code because I want to define these 
> > > behaviors on my page.  Is there a way to rewrite the 
> > > above so that IE doesn't complain?

Reply via email to