CODEWITHSUNDEEP
phpjqueryhtmlmysqlajax
Dinesh Kumar
Dinesh Kumar

Reputation: 37

Unable to show data in DIVs from MySQL

I am unable to display data in the set of DIVs from MySQL database. The data is showing only in last DIV, below is my code:

$(document).ready(function (){
var n = 9;

for(var i=0;i<n;i++){
    var div = document.createElement('div');

    div.className = "d5";
    div.id=i+1;


    document.getElementById('container').appendChild(div);

    $.ajax({                                      
      url: 'myapi.php',                  //the script to call to get data          
      data: "",                        //you can insert url argumnets here to pass to api.php for example "id=5&parent=6"
      dataType: 'json',                //data format      
      success: function(data)          //on recieve of reply
      {
        var Name = data[2];              //get id
        //var vname = data[1];           //get name

        $('#'+div.id).html(""+Name);     

      } 
    });


}
    });

Upvotes: 1

Views: 119

Answers (4)

Seder
Seder

Reputation: 2763

If myapi.php always returns the same data and you want to display it in multiple divs 

$(document).ready(function() {


    $.ajax({
        url: 'myapi.php', //the script to call to get data          
        data: "", //you can insert url argumnets here to pass to api.php for example "id=5&parent=6"
        dataType: 'json', //data format      
        success: function(data) //on recieve of reply
            {
                var n = 9;

                for (var i = 0; i < n; i++) {
                    var div = document.createElement('div');

                    div.className = "d5";
                    div.id = i + 1;


                    document.getElementById('container').appendChild(div);

                    var Name = data[2]; //get id
                    //var vname = data[1];           //get name

                    $('#' + div.id).html("" + Name);
                }

            }
    });



});

If myapi.php returns different data for each request we might have multiple solutions

One of them is just setting the async attribute to false

The other one is passing the ID of the div to the server and return it with the response 

$(document).ready(function() {
    var n = 9;

    for (var i = 0; i < n; i++) {
        var div = document.createElement('div');

        div.className = "d5";
        div.id = i + 1;


        document.getElementById('container').appendChild(div);

        $.ajax({
            url: 'myapi.php?id=' + div.id, //the script to call to get data          
            data: "", //you can insert url argumnets here to pass to api.php for example "id=5&parent=6"
            dataType: 'json', //data format      
            success: function(data) //on recieve of reply
                {
                    var Name = data[2]; //get id
                    //var vname = data[1];           //get name
                    var divId = data[3];
                    $('#' + divId).html("" + Name);

                }
        });


    }
});

The problem with you is that the div.id value is updated before you receive the response and the latest div get filled because the loop will be faster than the request

One more solution can be defining a function and pass the container id to it 

function loadContentInto(divId) {
    $.ajax({
        url: 'myapi.php', //the script to call to get data          
        data: "",
        async: false, //you can insert url argumnets here to pass to api.php for example "id=5&parent=6"
        dataType: 'json', //data format      
        success: function(data) //on recieve of reply
            {
                var Name = data[2]; //get id
                //var vname = data[1];           //get name

                $('#' + divId).html("" + Name);

            }
    });
}

and call this method from your loop 

for (var i = 0; i < n; i++) {
    var div = document.createElement('div');

    div.className = "d5";
    div.id = i + 1;


    document.getElementById('container').appendChild(div);
    loadContentInto(div.id);

}

I hope that can help :)

Upvotes: 0

JRulle
JRulle

Reputation: 7568

You can close your Ajax call in an anonymous function:

(function(div.id){
    $.ajax({                                      
      url: 'myapi.php',                           
      data: "",                        
      dataType: 'json',                   
      success: function(data)          
      {
        var Name = data[2];              
        //var vname = data[1];           

        $('#'+div.id).html(""+Name);     

      } 
    });
})(div.id);

Because the Ajax call is async, the value of div.id has changed before the Ajax call returns
Reference

Upvotes: 0

Abdulla
Abdulla

Reputation: 36

set ajax async:false

$(document).ready(function (){
var n = 9;

for(var i=0;i<n;i++){
    var div = document.createElement('div');

    div.className = "d5";
    div.id=i+1;


    document.getElementById('container').appendChild(div);

    $.ajax({
      async: false,                                
      url: 'myapi.php',                  //the script to call to get data          
      data: "",                        //you can insert url argumnets here to pass to api.php for example "id=5&parent=6"
      dataType: 'json',                //data format      
      success: function(data)          //on recieve of reply
      {
        var Name = data[2];              //get id
        //var vname = data[1];           //get name

        $('#'+div.id).html(""+Name);     

      } 
    });


}
    });

Upvotes: 0

Babu Pasungily
Babu Pasungily

Reputation: 315

Add one more property when you make ajax request, async:false. Hope you get your result

$.ajax({                                      
  url: 'myapi.php',                  //the script to call to get data          
  data: "",   
  async:false ,                    //you can insert url argumnets here to pass to api.php for example "id=5&parent=6"
  dataType: 'json',                //data format      
  success: function(data)          //on recieve of reply
  {
    var Name = data[2];              //get id
    //var vname = data[1];           //get name

    $('#'+div.id).html(""+Name);     

  } 
});

Upvotes: 1

Related Questions