Refreshing the contents of the parent div after popup close MVC 3.0

Question

I have a page that list Trainings to employee to take Survey for each Training. I have multiple popup links in a div and when clicked a popup window opens. Following script opens the popup. I want to update the section that popup links rely with the new information after survey submitted which means that I want to only list tranings that their survey is not taken as popup links.

$(document).ready(function () {
        $('.addSurvey').click(function () {
            $.ajax({
                url: this.href,
                type: 'GET',
                cache: false,
                context: this,
                success: function (result) {
                    $(this).next('.result').html(result).dialog({
                        autoOpen: true,
                        title: 'Anket',
                        width: 500,
                        height: 'auto',
                        modal: true,
                        beforeClose: function (event, ui) {
                            reloadContent();
                        }

                    }); //end of dialog
                } //enf of success function
            }); //end of ajax call
            return false;
        });
    });

To create the links for each training and listing the popup link I use the following page.

@{if (Model.TrainingList == null || !Model.TrainingList.Any())
  {
    <p>
        Personel için anket bilgisi bulunamadı!</p>
  }
  else
  {

      foreach (var training in Model.TrainingList)
      {
     <table class="surveyTable">
        @{ if (training.Survey != null)
           { 
            <tr>
                <td class="view_detail_label">
                    Eğitim Adı
                </td>
                <td>
                    @(training.Name != null ? @training.Name.Name : "")
                </td>
            </tr>
            <tr>
                <td class="view_detail_label">
                    Eğitim İçeriği ve Programın Değerlendirilmesi Ortalaması
                </td>
                <td>
                    @((training.Survey.Context + training.Survey.Example
                </td>
            </tr>

            <tr>
                <td class="view_detail_label">
                    Eğitimlerin Değerlendirilmesi
                </td>
                <td>
                    @((training.Survey.Knowledge))
                </td>
            </tr>

            <tr>
                <td class="view_detail_label">
                    Eğitim Materyallerinin ve Ortamının Değerlendirilmesi
                </td>
                <td>
                    @((training.Survey.Tool + training.Survey.Source)
                </td>
            </tr>
           }
           else
           {

            <tr>
                <td class="view_detail_label">
                    Eğitim Adı
                </td>
                <td>

                   @Html.ActionLink(
                   training.Name.Name,
                   "AddSurvey",
                   new
                   {
                       employeeId = Model.Id,
                       trainingId = training.Id
                   },
                   new
                   {
                       @class = "addSurvey"
                   }
               )

                  <div class="result" style="display:none;"></div>

                </td>

            </tr>



           }

        }
     </table>
  }

      }
  }

The above page is the subpage of the

<script type="text/javascript">
    $('#tab-container').easytabs();


</script>
<div id="tab-container" class="tab-container">
    <ul class="etabs">
        <li class="tab"><a href="#employee_common">Genel Bilgiler</a></li>
        <li class="tab"><a href="#employee_education">Eğitim Bilgileri</a></li>
        <li class="tab"><a href="#employee_work">İş Tecrübesi</a></li>
        <li class="tab"><a href="#employee_other">Kişisel</a></li>

         <li class="tab"><a href="#employee_files">Dosyalar</a></li>

         <li class="tab"><a href="#employee_turnike">Turnike</a></li>
         <li class="tab"><a href="#employee_survey">Eğitim Anket</a></li>


            <li class="tab"><a href="#employee_turnike_report">Kapı Giriş Raporu</a></li>
            <li class="tab"><a href="#employee_training">Kurumsal Eğitimler</a></li>
    </ul>
    <div id="employee_common">
        @{ Html.RenderPartial("_DetailsCommon"); }
    </div>
    <div id="employee_education">
        @{ Html.RenderPartial("_DetailsEducation"); }
    </div>
    <div id="employee_work">
        @{ Html.RenderPartial("_DetailsWork"); }
    </div>

    <div id="employee_other">
        @{ Html.RenderPartial("_DetailsPersonal"); }
    </div>


        <div id="employee_survey">
            @{ Html.RenderPartial("_DetailsSurvey");}
        </div>

I have the following script in _DetailsSurvey.cshtml file to refresh only the div section but it does not work.

function reloadContent() {
        $(document).load(window.location.href + " #employee_survey");
    }

And another issue is that even though I refresh the page will my model be refreshed as well from the controller?

Answer 1

RE your last question: there's really no concept of "model" once the view has been rendered, so no.

Throw a console.log('Closing'); into the reloadContent() function; this will tell you if the method gets called. If you don't have it already, make sure you have Firebug or Firebug Lite (depending on your favorite browser to debug within).

This:

function reloadContent() {
    $(document).load(window.location.href + " #employee_survey");
}

will not work. load() expects a CSS selector to load content into; document is a DOM element.

Edit: Let's try leveraging an extension function as shown in this answer to another question: https://stackoverflow.com/a/8452751/534109

Add the extension (somewhere just inside your $(document).ready()):

$.fn.loadWith = function (url) {
    this.load(url, function(response, status, jqxhr) {
        $(this).children(':first').unwrap();
    });
};

Call it within reloadContent():

function reloadContent() {
    $('#employee_survey').loadWith (window.location.href + " #employee_survey");
}

See unwrap() if you want to know what's going on.