Second time partialview not loading to div via from .ajax() in MVC4

Question

I have issue loading partialview to div second time. I have checked previous posts in SO but non of them really helped me. So I am posting my issue here.

index.cshtml

 <div id="DivEmailContainer" style="display:block" class="row">            
  </div>

_EditEmail.cshtml

<div class="row">
            <div class="col-xs-12 col-sm-6 col-md-2 ">
                <input type="submit" value="Save" class="btn btn-success width100per" />
            </div>


script type="text/javascript">

            $(function () {
             $("#frmEmail").validate({
                 rules: {
                        ...
         submitHandler: function (form) {

                    $.ajax({
                        url: 'PostEditEmail',
                        type: 'Post',
                        data: $(form).serialize(),
                        success: function (result) {
                            alert("In success");
                            $('#DivEmailContainer').html(result);
                        },
                        error: function (xhr, ajaxOptions, thrownError) {
                            alert(xhr.responseText);
                            alert(thrownError);
                        },
                        complete: function (xhr, textStatus) {
                            alert(xhr.responseText);
                            alert(textStatus);
                        }
                    });
                 }
            });

controller

public PartialViewResult PostEditEmail(string actiontype, FormCollection col)
        {
            var communicationLocation = string.Empty;
            ....
             return PartialView("_EditEmail", memberemail);
          }

First time partialview loading into DivEmailContainer to error. If submit again partialview loading full post back. not even it is calling submitHandler.

Only thing I observed is 1st time submit <form post was /ContactInformation/GetEditEmailbut when I submit second time <form post was /ContactInformation/PostEditEmail.

What could be wrong?

update

second time Forloop scriptblock loading. May be it is issue with Forloop?

@using (Html.BeginScriptContext()) { Html.AddScriptBlock(

update

issue with forloop htmlhelper, not with ajax. secondtime script is not loading. @Russ Cam can help on this.

Answer 1

Try to load partial view like this

$("#DivEmailContainer").load('@Url.Action('ActionName', 'ControllerName')', function () {
                    //Perform some operation if you want after load.
});

Answer 2

from my experience putting script in a partial leads to very inconsistent results. expecially with the script being inserted into the middle of the page. I would highly recommend that you pull your script from the partial and put it on the main page. Since the partial is loaded after the page load you will need to tie the script to the partial one of 2 ways.
1. tie the events to the document

$(document).on('click', '.targetClass', function(){
    //do stuff
});

for example to put an id on your input and change it to a button

<input type="button" value="Save" id="btnSave" class="btn btn-success width100per" />

your click event would then be

$(document).on('click', '#btnSave', function(){
   //your ajax call here
});

being tied to the document this click event would fire even though the input is inserted into the document after load

2. put the script in a function that is called after the partial is loaded change your

   $(function () {

to

function partialScript(){

and call this function after the partial is loaded

$('#DivEmailContainer').html(result);
partialScript();