CODEWITHSUNDEEP
javascriptjqueryajaxgetjson
Artfloriani
Artfloriani

Reputation: 3

getJson after getJson not working

I'm trying to make a request when the button is clicked.

If it is the first time clicking it, I make a getJson to get an array with the IDs for the second request.

The problem is, when it makes the first request, it stops right before the second request, so I have to click again to make the second request.

Here is my script code:

<script  type="text/javascript">
$(document).ready(function() {
    var IDs = new Array();
    var iterator = 0;
    // When id with Action is clicked
    $("#Action").click(function() {
        if(IDs.length <= 0){
            // Load generator.php as JSON and assign to the data variable
            $.getJSON('generator.php', {tags : "lol"},  function(data) {
                IDs = data.value;               
            });
        }

        //PAGE STOPS HERE

        $.getJSON('imagem.php', {ids : IDs[iterator]}, function(data) {
            iterator++;
            document.title = "IMG2";

            $("#Imagem").html(data.value);  
            if(iterator > IDs.length-1)
                iterator = 0;
        });

    });
});
</script>

Upvotes: 0

Views: 3043

Answers (3)

abc123
abc123

Reputation: 18773

This is because $getJSON is an async event, so both your $getJSON function calls are happening at once, and your second requires results from the first. Please use the success event from jquery: http://api.jquery.com/jQuery.getJSON/

example from the above website:

$.getJSON("example.json", function() {
  alert("success");
})
.success(function() { alert("second success"); });

New Code:

<script  type="text/javascript">
    $(document).ready(function() {
        var IDs = new Array();
        var iterator = 0;
        // When id with Action is clicked
        $("#Action").click(function() {
            if(IDs.length <= 0){
                // Load generator.php as JSON and assign to the data variable
                $.getJSON('generator.php', {tags : "lol"},  function(data) {
                    IDs = data.value;
                }).success(function() {
                    $.getJSON('imagem.php', {ids : IDs[iterator]}, function(data) {
                        iterator++;
                        document.title = "IMG2";

                        $("#Imagem").html(data.value);  
                        if(iterator > IDs.length-1)
                                iterator = 0;
                    });
                });
            }
        });
    });
</script>

Upvotes: 0

Piyas De
Piyas De

Reputation: 1764

From your code visiting, we think -

It is a typical case of ajax call ...

to make the 2nd call after 1st call, you should call the 2nd getjson within 1st getjson callback to make this working - i.e. -

<script  type="text/javascript">
                $(document).ready(function() {
                    var IDs = new Array();
                    var iterator = 0;
                    // When id with Action is clicked
                    $("#Action").click(function() {
                        if(IDs.length <= 0){
                        // Load generator.php as JSON and assign to the data variable
                        $.getJSON('generator.php', {tags : "lol"},  function(data) {
                            IDs = data.value;               
                            $.getJSON('imagem.php', {ids : IDs[iterator]}, function(data) {
                            iterator++;
                            document.title = "IMG2";

                            $("#Imagem").html(data.value);  
                            if(iterator > IDs.length-1)
                                    iterator = 0;
                        });


                        });
                        }
                    });
                });
            </script>

I have faced same situation before, for ajax calling in different applications. Hope this help you.

Upvotes: 0

Jeremy Harris
Jeremy Harris

Reputation: 24549

The $.getJson() function is asynchronous. This means that when it executes that bit of code, it continues on with execution. The second call depends on the first one so should be nested in the success callback like this:

$.getJSON('generator.php', {tags : "lol"},  function(data) {
   IDs = data.value;               

   $.getJSON('imagem.php', {ids : IDs[iterator]}, function(data) {
      iterator++;
      document.title = "IMG2";

      $("#Imagem").html(data.value);  
      if(iterator > IDs.length-1)
         iterator = 0;
   });
});

Upvotes: 1

Related Questions