Jquery get() method working in random

Question

I have a div call load-ajax-hotels in which I am trying to load php files after the click event has been fired.

Say that I am trying to load alpha.php, beta.php, gamma.php ... delta.php

$("span.dessert-make").click(function(){    

        /* Load Initial Data */
        $(".ajax-load-hotels").load("./php/alpha.php");
                $.get("./php/beta.php", function(data){
                $(".ajax-load-hotels").append(data);
                 });
                $.get("./php/gamma.php", function(data){
                    $('.ajax-load-hotels').append(data);
                });
                $.get("./php/delta.php", function(data){
                    $('.ajax-load-hotels').append(data);
                }); 
        });

But this call is not working properly. I mean that at each instance of the click event I get different results. Some times just alpha.php and beta.php gets displayed some times every php files duplicate comes along. Its random every time. Can some one tell me what the problem is?

And also how do I make php files load as the user scrolls down to bottom of the page. How to implement the scrollTo() method for this. x and y pos becomes different once window resizes.

Sorry. That I might have overlooked. I corrected it.

Your indentation is wrong and you (at least I) don't see what your code is doing, where are you closing the `$.get` for `2.php`? Please format your code. — Benjamin Gruenbaum, Oct 17 '13 at 07:26
You are missing `});` for ` $.get("./php/2.php", function(data){` — Ajith S, Oct 17 '13 at 07:26
You are applying wrong logic..First try to determine what result you need then try to write the code. — Vijay Verma, Oct 17 '13 at 07:29
With `load` and `get`, you are performing asynchonous processings and shouldn't expect the results to come in the order you invoked the ajax methods. Create as many empty containers in your .ajax-load-hotels and fill each of them as the result of its ajax call (call to 4.php should fill the 4th container) I guess duplicate results come from duplicate clicks ;-) — jbl, Oct 17 '13 at 07:37

Snake Eyes · Answer 1 · 2013-10-17T07:34:36.307

1

You missed a }) at

  $.get("./php/2.php", function(data){
        $(".ajax-load-hotels").append(data); // here is missed });

  $.get("./php/3.php", function(data){
         $('.ajax-load-hotels').append(data);
  });

Correct:

$.get("./php/2.php", function(data){
     $(".ajax-load-hotels").append(data);
});

$.get("./php/3.php", function(data){
     $('.ajax-load-hotels').append(data);
});

EDIT 1:

And, $.get is asynchronous.

To make it synchronous (I provided just an example):

$.ajax({
  url: urltophp,
  async: false,
  success: function(data) { $(".ajax-load-hotels").append(data) },
  dataType: 'html'
});

edited Oct 17 '13 at 07:34

answered Oct 17 '13 at 07:26

Snake Eyes

16,287
34
113
221

That still won't do what OP wants though. I think he is confused by the fact the code is asynchronous so there is no guarantee on the order the AJAX requests resolve. – Benjamin Gruenbaum Oct 17 '13 at 07:26
Make it synchronous is a horrible idea. Sync AJAX is almost never what you want. All OP has to do is wait for the previous AJAX to finish before starting the next one and he already has callbacks. – Benjamin Gruenbaum Oct 17 '13 at 07:30
Thanks a lot! I did not know it was like this. How do I make it load sequentially? – Swaroop Nagendra Oct 17 '13 at 07:31
See http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call – Benjamin Gruenbaum Oct 17 '13 at 07:32
By making synchronous, I already provided example above (see last code) – Snake Eyes Oct 17 '13 at 07:32
Thanks for this! It works when I have php file names like alpha.php, beta.php gamma.php – Swaroop Nagendra Oct 17 '13 at 07:44

sberry · Accepted Answer · 2013-10-17T07:45:48.427

1

Assuming you are trying to load these sequentially (syncronously), I would probably go with something like this:

function load_pages(index, pages) {
  $.get("./php/" + pages[index] + ".php", function(data) {
    $(".ajax-load-hotels").append(data);
    if (index + 1 < pages.length) {
        load_pages(index + 1, pages);
    }
  })
}

$("span.dessert-make").click(function(){  
  load_pages(0, ["alpha", "gamma", "delta"]);
});

edited Oct 17 '13 at 07:45

answered Oct 17 '13 at 07:29

sberry

128,281
18
138
165

+1 I'd probably extract the number 8 from inside the function above to a parameter `load_by_number(from,to)` - other than that - this is the simplest approach to do this without external code or promises. A nice simple asynchronous semaphore. – Benjamin Gruenbaum Oct 17 '13 at 07:32
Ok, got it. Cant I just get in a for loop, instead of calling every time? – Swaroop Nagendra Oct 17 '13 at 07:32
@BenjaminGruenbaum What is a good book for Ajax using Jquery. – Swaroop Nagendra Oct 17 '13 at 07:33
I really did love Manning's books but the part on Ajax is really slim and confusing, especially the implenting part – Swaroop Nagendra Oct 17 '13 at 07:33
@BenjaminGruenbaum: Fine suggestion. Modified. – sberry Oct 17 '13 at 07:34
1

@SwaroopNagendra A good book would not teach you jQuery, it would teach you the bare basics. Things like how concurrency works in web JavaScript are crucial to your success as a programmer in the field. I think Felix's answer [on this question](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) is a good place to start since it starts with something you know (jQuery AJAX) but digs into concurrency a bit. (I have an answer there too but it assumes the native API). – Benjamin Gruenbaum Oct 17 '13 at 07:36
1

Meh, not sure what the downvote is all about. Downvoter care to explain so I can either improve or enlighten? – sberry Oct 17 '13 at 07:41
Say alpha.php ggamma.php delta.php – Swaroop Nagendra Oct 17 '13 at 07:43
If each PHP file has a different name then you should show that in your question. I will update to show how you would handle that. – sberry Oct 17 '13 at 07:44
BTW I am so irritated that I could not figure out such a simple thing and asked for help. I agree that I did not know about Async but to ask about alpha.php blah blah is irritating me – Swaroop Nagendra Oct 17 '13 at 07:50

Jquery get() method working in random

2 Answers2