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();
}
});
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();
}
});
-
1
Normally what i do is have the server side generate the html for the new form then have the success function rewrite. Otherwise you have to manipulate the DOM after success with more
javascript. – Victory Commented Aug 31, 2014 at 3:08 - I am looking for a technique to reload the specific form in which the submit button was clicked. If I can achieve that, then all my problems will be solved. It shall be by far the cleanest technique. Less code is always better for me :) – Ali Gajani Commented Aug 31, 2014 at 3:15
- What is the server side language you are using? – Victory Commented Aug 31, 2014 at 3:19
- I am using PHP. So as to speak, if I get it working, it will reload the parent or the closest.form within which the submit was clicked. – Ali Gajani Commented Aug 31, 2014 at 3:19
2 Answers
Reset to default 2I 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 ments, 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.
So i would do it like this
//mainpage.php
<html>
// ... snip html ...
<?php include("form.php") ?>
<script>
$("form").one('submit', function (evt) {
evt.preventDefault();
var $this = $(this);
$.ajax({
url: $this.attr('action'),
method: $this.attr('method'),
}).done(function (data, status, xhr) {
var $newForm = $(data);
$this.html($newForm.html());
$this.attr("method", $newForm.attr("method"));
});
});
</script>
// ... snip more html ...
then the form page just returns the <form> html
//form.php
<form method="<?php $method ?>" action="form.php">
<input name="foo">
<input type="submit" value="submit">
</form>
Note: you may have to rebind the form after you submit, you will have to double check that.