Jquery - POST, success callback is not getting executed

Question

I am using the below Jquery code to add items to cart. My intention is to change the "Add to cart" button once the Ajax call is success. However its not happening. Code is below -

  jQuery.post('/cart/add.js', {
              quantity: 1,
              id: variant_id
  }, function(data){
    var myelem = document.getElementById('red') ;
    if (myelem != null){
      document.getElementById('red').id = 'normal';
    }
    $("span").removeClass("hidden-count");
    $(".cart-count").text('1');
    $("#AddToCartText").text("Added");
    $("#AddToCart").css("color","Green");

  });

Currently, the code is adding the item to cart but I am not seeing the intended element manipulations. The jquery to manipulate the elements is correct, because when I remove it from the success callback, and put it just after the AJAX call (without any dependency on AJAX call), in that case the element is getting manipulated.

I have referred to http://api.jquery.com/jquery.post/ to verify the syntax.
I have checked "Console" in Developer tools (Chrome), there are no error messages there.

Please let me know, where I am making mistake.

Check network tab in browser console and make sure your request is been posted properly... — Guruprasad J Rao
– Guruprasad J Rao, Commented Dec 29, 2015 at 11:33
@Guruprasad, I checked network tab as well. I am getting a valid response back from server. — Tushar Saurabh
– Tushar Saurabh, Commented Dec 29, 2015 at 11:40
Can you give some additional info, such as the html of the page? Since you want to manipulate the DOM that would be useful. — Bas Wildeboer
– Bas Wildeboer, Commented Dec 29, 2015 at 12:58

bknights · Accepted Answer · 2015-12-29 17:55:40Z

4

This works in my cart. Notice the 4th parameter. The id is the variant id:

jQuery.post('/cart/add.js', {id:6028354753}, function(data){
  console.log(data);
},'json');

answered Dec 29, 2015 at 17:55

bknights

15.7k2 gold badges20 silver badges35 bronze badges

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

2 Comments

Tushar Saurabh Over a year ago

thanks it worked. However I do have question, in Jquery documentation, it says the fourth parameter is not required. Evidently it is. Is there any documentation on shopify that I can refer to which lists out the required parameters.

bknights Over a year ago

The 4th parameter is needed because,in this case, jQuery was interpreting Shopify's response as html not JSON

Marcos Lima · Accepted Answer · 2015-12-29 11:40:57Z

0

Have you tried to put some console.log within the callback function? Maybe the code is being executed, but isn't doing what it is supposed to.

Check for the value of variant_id, too.

answered Dec 29, 2015 at 11:40

Marcos Lima

7711 gold badge10 silver badges26 bronze badges

1 Comment

Tushar Saurabh Over a year ago

I have tried with both console.log & Alert. Neither am I getting log message nor the alert.

Gjergji Sevo · Accepted Answer · 2015-12-29 11:47:48Z

-1

You have to add the .done callback to your function in case of success, which you haven't like the example below. That's why you don't get the desired DOM manipulations.

 $.post( "test.php", { name: "John", time: "2pm" })
  .done(function( data ) {
  alert( "Data Loaded: " + data );
 });

answered Dec 29, 2015 at 11:47

Gjergji Sevo

3323 silver badges9 bronze badges

1 Comment

Tushar Saurabh Over a year ago

even adding .done is not working. Moreover, jquery document doesnt state that .done is required. Below is the example for Jquery site - $.post( "test.php", function( data ) { alert( "Data Loaded: " + data ); });

Collectives™ on Stack Overflow

Jquery - POST, success callback is not getting executed

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related