johnnycakes johnnycakes - 14 days ago 6
jQuery Question

MVC jQuery submit form (without page refresh) from JavaScript function

I'm pretty new to all this.
I'm using ASP.NET MVC C# LINQ to SQL.

I have an edit page that loads Authors and all their Books.
The Books are loaded via an Ajax call.

<script type="text/javascript">
$(document).ready(function() {
LoadBooks();
});

function LoadBooks() {
$(".Books").hide();
$(".Books").load("/Books/Edit/<%= Model.AuthorID %>");
$(".Books").show('slow');
}
</script>


This part is working fine. The page loads with the Author info, then the Books load (a partial view in a DIV id="Books", just with the Book Category and Book Title):

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Solution.Controllers.BooksController+BooksViewModel>" %>
<% using (Html.BeginForm(null,null, FormMethod.Post,new { id = "bookform" }))
{%>
<fieldset>
<legend>Books</legend>
<%int i = 0;
foreach (var book in Model.Books)
{%>
<%= book.BookID%>
<%= Html.Hidden("book[" + i + "].BookID", book.BookID) %>

<%= Html.DropDownList("book[" + i + "].CatID", new SelectList(Model.Categories, "CatID", "CatTitle", book.CatID))%>
<%= Html.ValidationMessage("CatID", "*")%>

<%= Html.TextBox("book[" + i + "].BookTitle", book.BookTitle)%>
<%= Html.ValidationMessage("BookTitle", "*")%>
<br />
<%i++;
} %>
</fieldset>
<% } %>


Now, on the main view page I want to have a link.
When the link is clicked I want to do a few things via JavaScript/jQuery/Ajax/whatever.
The first thing that I want to happen is to submit the Books form (id = booksform) from the partial view, then continue on to the next jQuery function. So, I click a link that calls a JavaScript function. This function should call/do/execute the submission of the Books form.

I feel like I've tried everything, but I can't get my Books form to submit and process without a full page submit/refresh taking place. (Note, when the full submit does take place, the actions I'd expect in the controller do successfully process). I want the controller process/action to return nothing other than some kind of success/failure indication. (I can then call "LoadBooks();" again to refresh the DIV on the page.

Any ideas?

Answer

This is how I do that with jquery:

function DoAjaxPostAndMore(btnClicked)
{
       var $form = $(btnClicked).parents('form');

        $.ajax({
            type: "POST",
            url: $form.attr('action'),
            data: $form.serialize(),
            error: function(xhr, status, error) {
                  //do something about the error
             },
            success: function(response) {
                 //do something with response
                LoadBooks();

            }
        });

  return false;// if it's a link to prevent post

}

I assumed that btnClicked is inside of the form:

<input type="button" value="Submit" onclick="DoAjaxPostAndMore(this)"/>

if link:

  <a href="/url/something" onclick="return DoAjaxPostAndMore(this)">linktext</a>

If link is not inside for the form you just have to use jquery selectors to find it. You may set id to the form and then find form like this:

var $form = $("#theformid");
Comments