Javascript function does always not run after .load

Question

Ok so I have three <select> fields lined up horizontally like this:

----------|teacher1|----|student1|----|student6|

----------|teacher2|

----------|teacher3|

Okey, so for this example we use teachers and students, a teacher can contain several students. And when you select a teacher from the left list, all students connected to that teacher appears in middle list. And on the right we have students who does not have a teacher. If you click on a student in the middle field, it will be deleted from that teacher and appear in the right field.(CONNECTIONS ARE MADE IN MYSQL DB).

All select fields are inside <div>, which I with jquery use the .load() function to change content of, like this for the delete function:

     $('#hold2').load("page.php?q=" + data);

Everything works fine to load and the database changes correctly, the problem is I want to refresh mid and right field after the .load() function, so one does not have to refresh the page to see the result. So I put these functions under:

     $('#hold2').load("page.php?q=" + data);
     refreshTable1(teacher);
     refreshStudent();

Here is refreshTable1:

     function refreshTable1(value) {
     teacher = value;
     $('#holder').load("example.php?q=" + value);

     }

Here is refreshStudent:

    function refreshStudent() {
    $('#table').load("examplepalge.php?p=blabla", function(){
            setTimeout(refreshTable1(etc), 2000);
    });

    }

Sometimes it refreshes both middle and right field directly, sometimes none and sometimes just one of them. How can I make this run smooth so that the fields will definitely refresh correctly AFTER: $('#hold2').load("page.php?q=" + data);

PLEASE NOTE: Not all connections and function links are correct, I just changed some stuff for this example. But we already know that the functions work, its just that sometimes they load correctly and sometimes not.

the calls are asynchronous and you are trying to update the tables during the duration of the call. Try using callbacks instead.. and please for god sake avoid using settimeouts when not necessary — Akshay Khandelwal
– Akshay Khandelwal, Commented Oct 8, 2015 at 12:59
refreshTable1 expects an argument. When you call it from setTimeout, you're not passing an argument. — Barmar
– Barmar, Commented Oct 8, 2015 at 13:00
@barmar Sorry missed that in my example, its already working in the "real" document. — jdoe
– jdoe, Commented Oct 8, 2015 at 13:02
@Akshay thanks, I tried that before but I must have missed something since I dident get it to work :S, but now it does work! :) cheers. — jdoe
– jdoe, Commented Oct 8, 2015 at 13:10

Deryk W. King · Accepted Answer · 2015-10-08 13:06:35Z

1

You need to set it up with callbacks so you only execute the 2nd function once the first has completed.

answered Oct 8, 2015 at 13:06

Deryk W. King

572 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript function does always not run after .load

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related