CODEWITHSUNDEEP
phpjqueryhtml-table
Pranav
Pranav

Reputation: 167

Dynamic table creation using jQuery ajax

I facing a strange issue... I am creating tables dynamically using the data from ajax call.. The code works in Firefox / but fails for Chrome...

HTML Structure I Intend to create :

<title>Offers MADE<title>    
 <Table>
   proposed offer table
 </table>

<title>Offers Received<title>    
  <Table>
   Received offer table
 </table>

But instead this is the outcome I get on Chrome / it works on Firefox though ..

<title>Offers MADE<title>       

<title>Offers Received<title>  

  <Table>
   proposed offer table
 </table>

  <Table>
   Received offer table
 </table>

I believe it has to do something with the ajax call response timing; Cause if I place a break-points it always works out..

To make sure the ajax call sequencing is correct I am making the second AJAX call in success() function of first AJAX call.

 $.ajax{
    ::
    url : get_Proposed_Offers.php
    ::

    success : function(data)
      {
          //I make sure that the Proposed Offer Table gets populated
          //I populate the "div" tag with required HTML
          populate_Proposed_OfferTable();


          //Here's where I make another ajax call to populate 
          get_Received_OfferData();
      }

 }

 function get_Received_OfferData()
 {
    $.ajax{
    ::
    url : get_Received_Offers.php
    ::

    success : function(data)
      {
          populate_Received_OfferTable();              
      }

    }

 }

Can anyone please point out what is it I am doing wrong here?

I know that instead of using same tag if I start populating the "proposed" and "received" offers in different tags this should resolve my issue. But I want to know why this approach wouldn't work.

Upvotes: 0

Views: 1433

Answers (1)

Femi Oni
Femi Oni

Reputation: 814

why do you need two ajax calls? i will make one ajax call and have my php send data of the two array in JSON

 $.ajax({

   url:'populate_tables.php',
   dataType :'JSON',
   success: function(data){

   $.map(data.proposed.records,function(proposed_row,i){
      populate_proposed_table here
   }
   $.map(data.recieved.records,function(received_row,i){
      populate_received_table here
   }
  }
})

with this you can even add other functionalities and effects to your work

UPDATE:You can pass as many parameters as you want into one call. 

$.ajax({
 ........
 data:{param1:value1,param2:value2....},
})

and php will see data as array so 

<?php
   $param1 = $_REQUEST['param1'];//not sure if you are using post or get
   $param2 = $_REQUEST['param2']...

run your queries from here

Upvotes: 3

Related Questions