Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>When you use @Ajax.BeginForm you are just adding data-ajax attributes to the form html element, so the javascript code in jquery.unobtrusive-ajax can actually call the jquery <a href="http://api.jquery.com/jQuery.ajax/" rel="nofollow">ajax function</a>. </p> <p>This is done by setting a live (now deprecated and replaced by <code>on</code>, but the jquery.unobtrusive code in MVC 3 uses an old version of jquery) event handler on forms with data-ajax=true submit event: </p> <pre><code>$("form[data-ajax=true]").live("submit", function (evt) { var clickInfo = $(this).data(data_click) || []; evt.preventDefault(); if (!validate(this)) { return; } asyncRequest(this, { url: this.action, type: this.method || "GET", data: clickInfo.concat($(this).serializeArray()) }); }); //Where asyncRequest will build the options object for the ajax function //and will call the ajax function </code></pre> <p>The parameters for the jquery ajax method are retrieved from the data-ajax attributes in the html form element, which were generated in the server side from the arguments to the @Ajax.BeginForm helper.</p> <p>The OnSuccess parameter is just setting the data-ajax-success attribute which will in turn be used for the <code>success</code> option passed to the jquery <a href="http://api.jquery.com/jQuery.ajax/" rel="nofollow">ajax function</a>.</p> <p>If you check the jquery documentation, there is a <code>context</code> option in the ajax function that can be used to set the context (i.e. the <code>this</code> object) in the callback functions (the success/error/complete callbacks). <strong>When no context is passed, the context will be set as an object will all the options for the jquery ajax call</strong>:</p> <blockquote> <p>context Type: PlainObject </p> <p>This object will be made the context of all Ajax-related callbacks. By default, the context is an object that represents the ajax settings used in the call ($.ajaxSettings merged with the settings passed to $.ajax). For example, specifying a DOM element as the context will make that the context for the complete callback of a request, like so</p> </blockquote> <p>Because the jquery.unobtrusive-ajax code is not passing a context option to the ajax call, what you see in the debugger is the object with all the options passed to the jquery ajax function.</p> <p>Of course one option is to pass a parameter to your function like <code>OnSuccess="doWork(this, 'yourFormId')"</code> but I understand you might want a more generic approach.In that case, you could modify the source of the jquery-unobtrusive-ajax code to either:</p> <ul> <li><p>Set the context to the form element that is being posted. This way <code>this</code> in your success function will be the form html element</p> <pre><code>$("form[data-ajax=true]").live("submit", function (evt) { var clickInfo = $(this).data(data_click) || []; evt.preventDefault(); if (!validate(this)) { return; } asyncRequest(this, { url: this.action, type: this.method || "GET", context: this //SET CONTEXT TO THE FORM HTML ELEMENT data: clickInfo.concat($(this).serializeArray()) }); }); </code></pre></li> <li><p>Add another option with the form to the options object. This way you can do <code>this.form</code> in your success function to get the form html element.</p> <pre><code>$("form[data-ajax=true]").live("submit", function (evt) { var clickInfo = $(this).data(data_click) || []; evt.preventDefault(); if (!validate(this)) { return; } asyncRequest(this, { url: this.action, type: this.method || "GET", form: this //ADD A FORM PARAMETER TO THE CONTEXT OBJECT data: clickInfo.concat($(this).serializeArray()) }); }); </code></pre></li> </ul> <p>I have created <a href="http://jsfiddle.net/asYdU/3/" rel="nofollow">this fiddle</a> (setting your <code>doWork</code> function as the success/error callbacks) so you can try both options.</p> <p>Hopefully I have explained myself and all of this makes sense!</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

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