After calling update.js i need to refresh the page again

Technical Q&A

Topic summary

Issue: An AJAX POST to /cart/update.js sets selected variants to 0, then redirects to /cart, but the variants still appear until a manual reload. A jQuery snippet was shared and is central to understanding the behavior.

Suggested fix: Delay the redirect in the success callback using setTimeout (e.g., 500 ms) so the cart update completes before navigation.

Outcome: The delay alone didn’t initially solve it. The root cause was the remove control being an HTML anchor () that triggered navigation before the AJAX completed. Adjusting the control (e.g., prevent default on the link or use a button) resolved the issue.

Decision/Resolution: The delay-on-redirect approach was accepted as the answer for the provided code, and the problem is considered resolved.

Key takeaway: When updating cart via AJAX, prevent default link behavior and optionally delay page redirects to ensure server-side updates apply before navigation.
Summarized with AI on February 28. AI used: gpt-5.
1

Hello,

I have a problem with the Update.js call. I would like to use a button to set some variants to 0, which also works. The problem is that the page is reloaded after the post, but the variants are still there. After I have manually reloaded the page, they are gone.

What am I doing wrong, why do I still have to do a manual reload?

Here my Jquery snippet:

$.ajax({
    type: 'POST',
    url: '/cart/update.js',
    data : { updates: 
        {
            {{item.id}} : 0,
            {% for p in item.properties %}
                {% unless p.last == blank %}
                    {% if p.first contains '_item' %}
                        {{p.last}} : 0,
                    {% endif %}
                    {% if p.first contains '_free_item' %}
                        {{p.last}} : 0,
                    {% endif %}
                {% endunless %}
            {% endfor %}
        },
        dataType: 'json',
        success: function() { 
            window.location.href = '/cart';
        },
        error: function(data){
            console.log(data)	
        }
    }
});

Thanks in advance

Tobeje

2

@Tobeje

Delay reload of page in success function.

Like this:-

setTimeout(function(){

window.location.href = ‘/cart’;

},500);

3

I had tried this before and it didn’t work. But I think I have now solved the problem elsewhere. The remove button was an html “a” tag, I think it had executed the page reload before. But anyway I accept this as the answer, because it is the solution to the code above :wink:

Thanks