Note that there are some explanatory texts on larger screens.

plurals
  1. POMVC jQuery submit form (without page refresh) from JavaScript function
    text
    copied!<p>I'm pretty new to all this. I'm using ASP.NET MVC C# <a href="http://en.wikipedia.org/wiki/Language_Integrated_Query#LINQ_to_SQL" rel="noreferrer">LINQ to SQL</a>.</p> <p>I have an edit page that loads Authors and all their Books. The Books are loaded via an <a href="http://en.wikipedia.org/wiki/Ajax_%28programming%29" rel="noreferrer">Ajax</a> call.</p> <pre><code> &lt;script type="text/javascript"&gt; $(document).ready(function() { LoadBooks(); }); function LoadBooks() { $(".Books").hide(); $(".Books").load("/Books/Edit/&lt;%= Model.AuthorID %&gt;"); $(".Books").show('slow'); } &lt;/script&gt; </code></pre> <p>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):</p> <pre><code>&lt;%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl&lt;Solution.Controllers.BooksController+BooksViewModel&gt;" %&gt; &lt;% using (Html.BeginForm(null,null, FormMethod.Post,new { id = "bookform" })) {%&gt; &lt;fieldset&gt; &lt;legend&gt;Books&lt;/legend&gt; &lt;%int i = 0; foreach (var book in Model.Books) {%&gt; &lt;%= book.BookID%&gt; &lt;%= Html.Hidden("book[" + i + "].BookID", book.BookID) %&gt; &lt;%= Html.DropDownList("book[" + i + "].CatID", new SelectList(Model.Categories, "CatID", "CatTitle", book.CatID))%&gt; &lt;%= Html.ValidationMessage("CatID", "*")%&gt; &lt;%= Html.TextBox("book[" + i + "].BookTitle", book.BookTitle)%&gt; &lt;%= Html.ValidationMessage("BookTitle", "*")%&gt; &lt;br /&gt; &lt;%i++; } %&gt; &lt;/fieldset&gt; &lt;% } %&gt; </code></pre> <p>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 <a href="http://en.wikipedia.org/wiki/JQuery" rel="noreferrer">jQuery</a> function. So, I click a link that calls a JavaScript function. This function should call/do/execute the submission of the Books form.</p> <p>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.</p> <p>Any ideas?</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload