Question

I have a page with a checkbox that the user is supposed to check and a popped up window will display. The popped up window displays correctly; however, I have not been able to get the window to close. As you can see below, the closewindow function is being called whenever the user clicks on submit. The message is displayed, but the window never closes. See sample code below.

//This is the content of the partial page that is being load in the popped up window.
@using (Html.BeginForm("StudentArchive", "Arvhive", FormMethod.Post, new { onsubmit = "CloseWindow()" }))
{

    @Html.HiddenFor(item => item.StudentID)
<table>
    <tr>
        <th>
            Student Archive Reason
        </th>
    </tr>
    <tr>
        <td>
            @Html.TextAreaFor(item => item.ArchiveReason)
        </td>
    </tr>
</table>

 <input type="submit" value="Submit" name="btnSubmit" id="ArchiveReasonSubmit" onclick="CloseWindow();" />
}


      <script type="text/javascript">
          function CloseWindow() {
              alert('I am closing window in reason for archive');
              $("#Window").data("tWindow").close();
//              $('#Window').prop("checked", "checked");
//              window.location.href = window.location.href;
          }
    </script>



//this script is in a studentDetails page which is where the checkbox that would open the window below located.



<script type="text/javascript">
    function chkArchive() {
        var s = document.getElementById('archiveCheckBox').checked;
        if (s == true) {
            OpenWindow(this);
        }

        if (s == false) {
            alert('checkbox is unchecked');
        }
    }
</script>


<script type="text/javascript">
        function OpenWindow(e) {
            var checkbox = document.getElementById('archiveCheckBox').value;
            if (checkbox == "false") {
                alert('It is false.');
            } else if (checkbox == "true") {
                $('#Window').data('tWindow').center().open();
            } 
        }
</script>

    <script type="text/javascript">
        function ClosingWindow() {
            $('#Window').prop("checked", "checked");
            window.location.href = window.location.href;
        }
    </script>


  @{Html.Telerik().Window()
  .Name("Window")
  .Visible(true)
  .Title("Reason for Archives")
  .Modal(true)
  .Height(600)
  .Draggable(true)
  .Visible(false)  //I could have added a variable set the default value to false to hide the window. However, I am not sure how to change it back to 
                   //yes after the user checks the checkbox for the first time. The only event that fire when a user check the checkbox is the javascript event to check the state
                   // of the checkbox and open the window.
  .Width(800)
  .ClientEvents(events => events.OnClose("ClosingWindow"))
  .LoadContentFrom(Url.Action("StudentArchive", "Student", new { StudentID = @ViewData["StudentID"] }, Request.Url.Scheme))
  .HtmlAttributes(new { onsubmit = "CloseWindow()" })
  .Render();
  }

Answer 1

The jquery library was being referenced twice. I removed it from the partial view page, and the query works fine. Here is the link that helps me solve the issue.:

http://www.telerik.com/community/forums/aspnet-mvc/window/close-modal-window-from-within-the-window.aspx