CODEWITHSUNDEEP
phphtmljqueryresponseoutput
Tomkay
Tomkay

Reputation: 5160

How to output the response HTML data by a jQuery AJAX request?

I have an online shop with a shopping cart. The cart, which is a <table>, refreshes its content after adding an article to the cart.

I use jQuery's AJAX method which receives HTML <td><tr> as a response from the called PHP script. Firebug's console shows the correct response from the call.

As you can see in my code, I want to add HTML to the table. I can't get it to work. Do I not understand the AJAX method? I want to add these <td><tr> to the shopping cart table.

JavaScript (Using jQuery 1.9.1)

$.ajax({
    url: 'php/addToShoppingCart.php',
    type: 'POST',
    dataType: 'html',
    data: content,

    complete: function(data) {  
        $('#shop section table tbody').append(data);
    },
});

Firebug console

enter image description here

Upvotes: 8

Views: 89524

Answers (4)

Mahendra
Mahendra

Reputation: 928

Well inside your cart create table and one tr so that you can display titles at the top

<table cellpadding="5" cellpadding="2" border="0" id="cartprod">
    <tr>
      <td width="60%"><b>Product Name</b></td>
      <td width="20%"><b>Quantity</b></td>
      <td width="20"><b>Price</b></td>
    </tr>
</table>

Then you can append your content like this

function AddToCart(pid)
{
    $.post('php/addToShoppingCart.php',{pid:pid},function(data){    
       $('#cartprod tr:first').after(data); 
    },'html')
}

Upvotes: 0

Devesh
Devesh

Reputation: 4560

You can use the success also 

  $.ajax({
       url: 'php/addToShoppingCart.php',
       type: 'POST',
       dataType: 'html',
       data: content, 
       success : function(data) 
      {$('#shop section table tbody').append(data);}
      });

Upvotes: 3

Yogesh Suthar
Yogesh Suthar

Reputation: 30488

The syntax for complete is

$.ajax({
url: 'php/addToShoppingCart.php',
type: 'POST',
dataType: 'html',
data: content,

}).complete(function (data) {
    $('#shop section table tbody').append(data);

});

Upvotes: 0

Stefan Candan
Stefan Candan

Reputation: 891

have tried it using .done()?

$.ajax({
  url: 'php/addToShoppingCart.php',
  type: 'POST',
  dataType: 'html',
  data: content,
}).done(function ( data ) {
  $('#shop section table tbody').append(data);
});

Upvotes: 9

Related Questions