How to reload a specific form after submit success using Ajax?

Ali Gajani Published at Dev

Ali Gajani

I am currently trying to reload a specific form, which is the form inside which the button was submitted, purely for the purpose of instant feedback. I am creating a Favorites button. This is my current setup. The ajax works but I still have to reload the page for it to show the new styles and even to change the METHOD type, which is required to unfavorite-favorite.

$.ajax({
    type: method,
    url: url,
    data: form.serialize(),
    success: function() {
        form.reload();
    }
});

Yoann

I guess you could clear all fields :

$.ajax({
    type: method,
    url: url,
    data: form.serialize(),
    success: function() {
        form.find('input:text, input:password, input:file, select, textarea').val('');
        form.find('input:radio, input:checkbox')
             .removeAttr('checked').removeAttr('selected');
    }
});

Taken from this answer.

EDIT :

As precised in comments, maybe you should get your server send back infos from the newly created item.

Then you could populate a "template" you have, and replace the form with it :

var newItem = $("<div class='newItem'></div>");

$.ajax({
    type: method,
    url: url,
    data: form.serialize(),
    success: function( data ) {
        //Get response from server like : {'name':'Name', 'attribut':'Attribut'}
        for( var key in data ) {
            newItem.append("<p>" + key + " : " + data[key] + "</p>");
        }
        form.replaceWith(newItem);
    }
});

An example JSFiddle.

Collected from the Internet

Please contact [email protected] to delete if infringement.