CODEWITHSUNDEEP
jquery
Frias
Frias

Reputation: 11281

Using table loaded as trigger

I want to change somethings in a table that I have in my page. The problem is that I have to call the function before the table is completed loaded (the table is loaded by an ajax event). How can I do that? I've tried so far this:

function hideActivePapers(){
    $('#paperTable').load(function(){                                         
        $('.active').each(function(){
            $(this).remove();
        });
    });     
}

And this:

function hideActivePapers(){
    $('#paperTable').live('load',function(){                                         
        $('.active').each(function(){
            $(this).remove();
        });
    });     
}

Thanks

Upvotes: 0

Views: 12391

Answers (2)

Groovetrain
Groovetrain

Reputation: 3325

Why not use css to hide them so that they never display, and then when the table is completely loaded, do what the other answer said here, and use the callback to remove the active papers?

CSS:

#paperTable .active { display: none; }

JS:

$('#paperTable').load('url/to/wherever', function() {
  $('#paperTable .active').remove();
});

Upvotes: 0

Matt Ball
Matt Ball

Reputation: 359846

You need to execute the post-load logic in the ajax callback function. Something like this:

function hideActivePapers()
{                                       
    $('.active').each(function()
    {
        $(this).remove();
    });
}  

$('#paperTable'.load('url/to/wherever', function ()
{
    // this code will be executed after the table loads
    hideActivePapers();
});

Alternately, it should be sufficient if you just execute your original hideActivePapers() function. Defining the function is not enough.

function hideActivePapers(){
    $('#paperTable').load(function(){                                         
        $('.active').each(function(){
            $(this).remove();
        });
    });     
}

// somewhere after document.ready,
hideActivePapers();

Upvotes: 1

Related Questions