Dynamic table creation using jQuery ajax

Question

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.

You need to post real code to get a meaningful answer, both populate_* functions and the initial html would be a good start. — jeroen
– jeroen, Commented Aug 17, 2012 at 1:00

Femi Oni · Accepted Answer · 2012-08-17 19:00:14Z

3

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

edited Aug 17, 2012 at 19:00

answered Aug 17, 2012 at 1:11

Femi Oni

8242 gold badges11 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pranav Over a year ago

I need to pass different parameters for getting the data for "proposed" and "received" ...unless I make 2 calls I wouldn't be able to distinguish between these 2 data sets.

Pranav Over a year ago

I am passing like 4 parameters to identify one single dataset .. I didn't want to clutter "proposed" and "received" table responses .... And yep I am using POST ... I would try to consolidate the calls if time permits.. Thanks for the help

Collectives™ on Stack Overflow

Dynamic table creation using jQuery ajax

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related