ASP.MVC Ajax response returns form with some JS not executing

Question

ASP.NET MVC Page has one link (Ajax.ActionLink), which gets the form to create and puts it in one of the div. I see the form in div but none of the JavaScript returned is getting executed. I am using JQuery validation and needs to run the validate() on the form so that returned form from AJAX request is validated.

Is there any setting or trick I am missing?

Thanks

Answer 1

This is the response back from Ajax Request and I want the script to be executed when I replace the content of the div tag with this response.

<script type="text/javascript">
    $("frmCreateWS").validate();
    alert("Test");
 </script>

<style media="screen" type="text/css">
    input {
     width:4em;
    }
</style>

<form action="/Weekly" id="frmCreateWS" method="post" 
    onclick="Sys.Mvc.AsyncForm.handleClick(this, new Sys.UI.DomEvent(event));" 
    onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.insertAfter, httpMethod: 'POST', updateTargetId: 'divWeeklys' });">

    <fieldset id="fsCreateWS" style="width:40em;">
     <legend>Weekly</legend>
      <input id="Year" name="Year" type="hidden" value="0" />

     <div style="float:left; vertical-align:top;">
      <p> 
       <label for="weeksList">Week: </label>
       <select id="weeksList" name="weeksList"><option value="37">09-07 - 09-13-09</option></select>
      </p>
      <p>
       <label for="Sales">Sales:</label>
       <input class="required" id="Sales" name="Sales" type="text" value="" />
      </p>
      <p>
       <button type="submit" value="Create">Save</button>&nbsp;
       -or- <a href="javascript:closeCreateNew()">Cancel</a>
      </p>
     </div>
    </fieldset>
</form>

Answer 2

There is 2 ways I have it working now.

1. User the JQuery $.get and replace the html returned into the div. This is now executing the script for me.
2. Other option is remove the UpdateTargetId and ReplaceMode from the AjaxOptions and use call back to replace the html into div tag.

Now I have another QUESTION: On the returned form when I click save, it shows the validation errors on the client side but it posts the form regard less. So I get the red error but I continues with the POST.

Any idea here?

Thanks

Answer 3

If you're using jQuery, just replace the Sys.Mvc.MvcHelpers.updateDomElement with your own implementation.

(function ($) {
    if (Sys && Sys.Mvc && Sys.Mvc.MvcHelpers) {

        Sys.Mvc.MvcHelpers.updateDomElement = function My$updateDomElement(target, insertionMode, content) {
            /// <param name="target" type="Object" domElement="true">
            /// </param>
            /// <param name="insertionMode" type="Sys.Mvc.InsertionMode">
            /// </param>
            /// <param name="content" type="String">
            /// </param>
            if (target) {
                var $target = $(target);
                switch (insertionMode) {
                    case Sys.Mvc.InsertionMode.replace:
                        $target.html(content);
                        break;
                    case Sys.Mvc.InsertionMode.insertBefore:
                        if (content && content.length > 0) {
                           $target.prepend(content);
                        }
                        break;
                    case Sys.Mvc.InsertionMode.insertAfter:
                        if (content && content.length > 0) {
                            $target.append(content);
                        }
                        break;
                }
            }
        }
    }
})(jQuery);

Since jQuery handles script tags correctly, that should fix your problem.