passing javascript object array to ajax

Question

This is my imple code on submit of form. Where I want to insert table data values in database through ajax. But it's not going to controller.

$('#submit').click(function(){

 var TableData = new Array();
 $('#cart_details tr').each(function(row, tr){

 TableData[row]={
    "productname" : $(tr).find('td:eq(0)').text()
    , "quantity" :$(tr).find('td:eq(1)').text()
    , "unit" : $(tr).find('td:eq(2)').text()
    , "unit_rate" : $(tr).find('td:eq(3)').text()
  }

   });


TableData.shift();

//TableData = $.toJSON(TableData);
var TableData = JSON.stringify(TableData);

alert(TableData);
var followurl='<?php echo base_url()."index.php/purchase/save_product";?>';

$.ajax({
   type: "POST",                     
   url:followurl,                                                 
   data: TableData,
   datatype : "json",

   cache: false,
   success: function (data) {
     alert("dsad"+data);
   }
   });

  });

When I stringify tabledata array output is like this..

  [{"productname":"Copper Sulphate","quantity":"1","unit":"1","unit_rate":"100"},
  {"productname":"Hypta Hydrate","quantity":"1","unit":"1","unit_rate":"100"}]

My question is why it's not going to controller? it's because of array object or something else??

Tabledata is javascript object array . Am I right??

the best way is to use http://xdebug.org/ I use netbeans with xDebug. — IgorAlves, Jan 03 '15 at 05:24
or you can go to network properties in Chrome inspect element and check the values ajax is sending to php — IgorAlves, Jan 03 '15 at 05:25
I just called a function in purchase controller on ajax request. — Kedar B, Jan 03 '15 at 05:29

Kanishka Panamaldeniya · Answer 1 · 2015-01-03T05:30:02.740

Use

$.ajax({

instead of

$.post({

use this code

$.ajax({
   type: "POST",                     
   url:followurl,                                                 
   data: {TableData : TableData},
   cache: false,
   success: function (data) {
     alert("dsad"+data);
   }
   });

check the Documentation jquery.post

The syntax for $.post is

$(selector).post(URL,data,function(data,status,xhr),dataType)

You don't have to define the type ,

but here you are using the $.ajax mixing with $.post

this is the $.ajax function syntax

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

SO change the $.post to $.ajax and try

From what I remember, both will do the same thing, I am waiting for your explanation — Ruan Mendes, Jan 03 '15 at 05:26

score 0 · Answer 2 · answered Jan 03 '15 at 09:23

As you can read in the documentation, you can pass an object to data. I think you'd make things easier and simpler for you if you followed that approach.

...
//TableData = $.toJSON(TableData); NO!!!
//var TableData = JSON.stringify(TableData); NO!!!

//alert(TableData);
var followurl='<?php echo base_url()."index.php/purchase/save_product";?>';

$.ajax({
   type: "POST",                     
   url:followurl,                                                 
   data: { 
    dataTable: TableData
   },
   datatype : "json",
   cache: false,
   success: function (data) {
     alert(data);
   }
   });

});

Very simple example (without validation or anything of the kind) of index.php/purchase/save_product

$data = $_POST["dataTable"];
echo $data[0]["productname"];// Sending back the productName of the first element received.
die();

As you can see, you could access data in your index.php/purchase/save_product file very easily if you followed this approach.

Hope it helps.

ASHWANI KUMAR SINGH BISEN · Answer 3 · 2015-01-03T09:50:19.973

Hi It look like you are using some CMS or Framework. Can you please let us know which framework or CMS you are using. I would then be able to sort out this issue. It looks like you are using Code Ignitor. If its so then i hope this would help you

$.post( "<?php echo base_url();?>index.php/purchase/save_product", function(data) {
  alert( "success" );
}, 'html') // here specify the datatype
.fail(function() {
  alert( "error" );
})

in Your case your ajax call must look like

var followurl="<?php echo base_url();?>index.php/purchase/save_product";

$.ajax({
   type: "POST",                     
   url:followurl,                                                 
   data: TableData,
   datatype : "json",

   cache: false,
   success: function (data) {
     alert("dsad"+data);
   }
   });

  });

Error Seems to be in your followUrl please try using as its in mine code

passing javascript object array to ajax

3 Answers3