How to update "<form></form>" without Refresh?

Question

My form is a shopping bag when. Submit() the form #add-Cart-head, it adds the product without refresh, but I wanted to have a reply that updates the bag that sits at the top of the page. The "GET" in the sequence even works, but does not update the form.

What to do, or how to do ?

jQuery(document).ready(function() {
    jQuery('#add-to-cart-head').submit(function() {
        var $this = jQuery(this),
            dados = $this.serialize();
        	jQuery.ajax({
            type: "POST",
            url: $this.attr('action'),
            data: dados,
			complete: function(){
			jQuery.ajax({
				type: "GET",
				url: "https://modernita.ambienteprotegido.com/cart/update_cart",
				data: dados});
			},
			error: function(){
                alert("Deu erro");
            }
    });
	return false;
});
});

Answer 1

You already have almost everything, what is missing is:

• know which element needs to update
• know where the content you want to insert in this element comes from

If for example you want to add new content div can use $('#idDaMinhaDiv').html('O carrinho foi atualizado!');. If the content you are going to display is static then the example above is what you need. If the content comes from AJAX then you have to pass on the data coming from the server that information.

You have two AJAX calls, you can join a function complete as in the first one and then enter the data in the div. Something like:

jQuery.ajax({
    type: "POST",
    url: $this.attr('action'),
    data: dados,
    complete: function () {
        jQuery.ajax({
            type: "GET",
            url: "https://modernita.ambienteprotegido.com/cart/update_cart",
            data: dados,
            complete: function (mensagem) {
                $('#idDaMinhaDiv').html(mensagem);
            }
        });
    },
    error: function () {
        alert("Deu erro");
    }
});