Load two divs with a single AJAX call

Question

I'm trying to use load() to load two divs #follow-x and #follow-y ajaxly with a click of a button.This is what I have tried in success function,but doesn't work,but works if I remove one of the function,so it loads only one div but I want it to load both.Thanks in advance

$('#follow').click(function(){

          $.ajax({

                   type: "POST",
                   url: "{% url 'follow_class' %}",
                   data: {'pk': '{{class.pk}}' , 'csrfmiddlewaretoken': '{{ csrf_token }}'},
                   dataType: "json",
                   success: function(){
                       $('#follow-x').load("{% url 'class_details' %} #follow-x");}
                       function(){
                       $('#follow-y').load("{% url 'class_details' %} #follow-y");}

              }); 
        });
</script>

Dont mind the tags{} I'm using Django

Why have two separate functions? Why not just do `$('#follow-x').load(...); $('#follow-y').load(...);`? — Mike Cluck, Oct 06 '16 at 15:45
the syntax of your code doesn't look correct. mainly, the closing `}` on your first load and the random unnamed and uncalled `function () {` wrapping your second .load. however, surely it would be better to just use $.ajax then extract the two divs from the response rather than sending two and doing the same for each. — Kevin B, Oct 06 '16 at 15:50

score 1 · Accepted Answer · answered Oct 06 '16 at 15:46

only the first function is being called on success

put both statements in one function

$('#follow').click(function(){

          $.ajax({

                   type: "POST",
                   url: "{% url 'follow_class' %}",
                   data: {'pk': '{{class.pk}}' , 'csrfmiddlewaretoken': '{{ csrf_token }}'},
                   dataType: "json",
                   success: function(){
                       $('#follow-x').load("{% url 'class_details' %} #follow-x");                        
                       $('#follow-y').load("{% url 'class_details' %} #follow-y");
                    }

              }); 
        });

score -1 · Answer 2 · answered Oct 06 '16 at 15:46

Your second load call is in another function that never gets called

$('#follow').click(function(){

          $.ajax({

                   type: "POST",
                   url: "{% url 'follow_class' %}",
                   data: {'pk': '{{class.pk}}' , 'csrfmiddlewaretoken': '{{ csrf_token }}'},
                   dataType: "json",
                   success: function(){
                       $('#follow-x').load("{% url 'class_details' %} #follow-x");
                       $('#follow-y').load("{% url 'class_details' %} #follow-y");
                   }

              }); 
        });
</script>

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

Success is a property of the object passed to AJAX. In your code you attempt to assign it to a function containing the follow-x code, however a syntax error is produced due to the next function statement that violates the obj structure. Try this.

success: function(){
     $('#follow-x').load("{% url 'class_details' %} #follow-x");
     $('#follow-y').load("{% url 'class_details' %} #follow-y");
}

Also consider using the done callback instead of success. More info on that here what is difference between success and .done() method of $.ajax

Load two divs with a single AJAX call

3 Answers3