jQuery.load() Callback Function Running Before Complete

Question

I'm using jQuery's .load() to replace a div on my page with a table from a php file. I'm using the callback function to run another function that modifies the data that was just loaded, but it is running the function before it has loaded the table, causing the function to do nothing.
Is there a way I can force the callback to run after it has loaded? I'm having the .load() run every 10 seconds, so I can't just tell it to wait.

Here is what I'm trying to do:

function fixSelected(){
  $.each(selected, function(index, value) {
    document.getElementById(value).innerHTML = '-';
  });
}

function refreshTable() {
    $('#tablefill').load('table.php', function(){
      fixSelected();
    });
}

The variable selected is an array containing the IDs of a few buttons on the table that is being loaded.

I prefer to use .ajax(...); where you can define a success and error function. — frenchie, Aug 04 '13 at 20:43
The code you have looks correct. Maybe you are calling `fixSelected` somewhere else. Please provide a http://jsfiddle.net/ demo that reproduces the problem. — Felix Kling, Aug 04 '13 at 20:45
possible duplicate of [JQuery .load() callback function](http://stackoverflow.com/questions/3973933/jquery-load-callback-function) — PW Kad, Aug 04 '13 at 20:45
what makes you think the callback is called before the request complete? — A. Wolff, Aug 04 '13 at 20:45
@roasted If I put an alert() before or after fixSelected() the alert comes up before it loads. — MOOcow102, Aug 04 '13 at 20:50
where exactly do you set both alert()? load() method is async as using ajax request — A. Wolff, Aug 04 '13 at 20:53
@roasted If I do: `$('#tablefill').load('table.php', function(){ fixSelected(); alert('1');` I get an alert, then it refreshes. — MOOcow102, Aug 04 '13 at 20:55
but alert() is modal and as javascript is single threaded the UI could not have time to refresh. You should not trying to debug using alert(), use console instead — A. Wolff, Aug 04 '13 at 20:58
Do you by any chance have multiple elements with the same id in your document? — bfavaretto, Aug 04 '13 at 21:03
@roasted Ok. Used console.log and I would only get the message the first time `$('#tablefill').load` ran. I am using setInterval to run the .load() every 10 seconds. If I move `fixSelected()` and the console.log to `refreshTable()`, then it runs each time, but before refreshing still. — MOOcow102, Aug 04 '13 at 21:07
@roasted `$(document).ready(function () { setInterval(refreshTable, 10000); });` — MOOcow102, Aug 04 '13 at 21:43

score -1 · Answer 1 · edited May 23 '17 at 12:11

-1

You need to pass the callback function as the third argument of the load() function like this:

function fixSelected(){
    $.each(selected, function(index, value) {
        document.getElementById(value).innerHTML = '-';
    });
}

function refreshTable() {
    $('#tablefill').load('table.php', fixSelected);
}

I found the solution here:
jQuery.load() doesn't work with a defined function as a callback?

See this jsFiddle for an example:
http://jsfiddle.net/bayoffire/kNWpD/1/

edited May 23 '17 at 12:11

Community

1
1

answered Aug 04 '13 at 21:15

lukassteiner

787
1
6
25

Would be more appropriate since you took this answer from another question to tag that in the comments and flag as a duplicate rather than continue answering new questions with the same answer. – PW Kad Aug 04 '13 at 21:28
Unfortunately I do not yet have enough reputation to comment a question. And I provided MOOcow102 with running code ready to copy and run. – lukassteiner Aug 04 '13 at 21:31
This didn't work. For some reason, when I have anything in the callback function spot, it only runs when the page is loaded, not when table.php is refreshed. – MOOcow102 Aug 04 '13 at 21:42
Did you look at the question that I showed you in the comments? You need to put a parameter in the function for it to wait – PW Kad Aug 04 '13 at 21:56
@PWKad Tried the answer from the question you posted, and it didn't work. – MOOcow102 Aug 04 '13 at 23:49

score -1 · Accepted Answer · answered Aug 05 '13 at 00:24

-1

I had a $(document).ready(function () { in table.php that was causing the callback function to just not work. Not sure why that was happening, but removing it fixed it all.

answered Aug 05 '13 at 00:24

MOOcow102

91
5
9

jQuery.load() Callback Function Running Before Complete

2 Answers2