I'm looking for most elegant way to ajaxify my forms (with jQuery).
How do you do this?
views:
1896answers:
4
+1
A:
Checkout JQuery plugins storage I'm sure there you will find that you need
omoto
2009-05-30 16:47:06
I found jQuery Form plugin. It looks nice, but i`m not sure how to use it properly.
Arnis L.
2009-05-30 16:49:30
ok all you need is to include founded plugin to your site.master and create function on dom ready that will do your logic on form submit.http://plugins.jquery.com/project/form here comes good sample and here, how to be within http://malsup.com/jquery/form/
omoto
2009-05-30 16:53:15
I want to simplify that. Perfect solution would be something like adding 1 short JS function call in form onload. You know - in more compact and declarative way. I don't want all my views messed up with <script (..)>$(document).ready(function() {var options = {target: "#myForm" }; $('#myForm').ajaxForm(options); });</script>
Arnis L.
2009-05-30 17:00:41
I meant that you need to add one short row like this $(':submit', form) in site.master in this case all your submits will go via ajax.Another solution is to create your own Template for Edit, Create Viewand add additional script to this template. In this case when you will create new views all you need is to decide will current view submit via Ajax or not.
omoto
2009-05-30 17:07:07
+4
A:
Ajaxify your forms... that is pretty vague.
If you want to submit a form asynchronously, you could use $.post() to post to a separate controller action.
Example:
In the view:
$.post('<%= Url.Action("DoAjaxCall") %>', $('form').serialize(),
function (data) {
alert(data.Message);
}
, "json");
In your controller:
public ActionResult DoAjaxCall(YourModel model)
{
return Json(new { Message = "Your ajax call is working!" });
}
That is what I'm using in some of my forms at least.
P.S.: I wrote this in the stackoverflow text editor so it's not really tested. But as an outline, it should work.
legenden
2009-05-30 16:57:12
+6
A:
Here is my solution (I think it is a Progressive enhancement solution), using only jQuery without any plugins:
var form = $('form#YourFormId');
$(':submit', form).click(function (event) {
event.preventDefault();
$.post(form.attr('action'), form.serialize(),
function(data, status) {
if(status == 'success') {
// your code here
}
}
);
});
UPDATED:
If your POST response is "HTML with form" then try this:
function ajaxifyForm(form) {
$(':submit', form).click(function (event) {
event.preventDefault();
$.post(form.attr('action'), form.serialize(),
function(data, status) {
if(status == 'success') {
var newForm = $(data);
ajaxifyForm(newForm);
form.after(newForm).remove();
}
}
);
});
}
eu-ge-ne
2009-05-30 17:00:33
In "your code here" part i wrote $("form#YourFormId).html(data);. After first hit everything goes smoothly. But, on 2nd hit it posts fields unchanged, binds my formModel wrong and gets wrong response. :/
Arnis L.
2009-05-30 17:18:39
On 2nd hit it calls my "home/index" and renders whole page inside previous one. I`m trying to 'ajaxify' login widget only. Tried "if(status=='success'){form.html(data);ajaxifyForm(form);}", but then there's that strange behaviour again i mentioned already.
Arnis L.
2009-05-30 17:53:08
The problem is in form.html(data) function. You insert your response in your existing. Your should remove old form and then add new form just after that (form.after(newForm).remove();)
eu-ge-ne
2009-05-30 17:57:15
Arnis L.
2009-06-14 21:29:49
A:
old one: when you don't know what to do anymore, read documentation
cheers
Marko
2009-06-01 07:08:30