JQuery Dialog Load Page Containing Javascript Code

Question

I am loading a Partial View in a Dialog box that contains Javascript. When the partial view is displayed in the Dialog box, the partial view shows up, but any Javascript that was in the partial view is not there.

My question: How do I load the Javascript that is on the Partial View?

Here is my Javascript file:

$(document).ready(function () 
{
    BindEvents();
});

function BindEvents()
{
    $('#Reassign').bind('click', function (event, ui) {
    GetReassign();
    return false;
    });

function GetReassign() {
    var checkeditems = $('input:checkbox[name="selectedObjects"]:checked').map(function () { return $(this).val() }).get().join(",");
    if (checkeditems) 
    {
        $("#DialogBox").dialog({
            width: 525,
            modal: true,
            draggable: false,
            resizable: false,
            open: function (event, ui) {
                $(this).load('/ControllerName/PartialView', function () {
                    var checkeditems = $('input:checkbox[name="selectedObjects"]:checked').map(function () { return $(this).val() }).get().join(",");
                    $('input.tasks').val(checkeditems);
                });
            },
            buttons: {
                "Cancel": function () {
                    $(this).dialog("close");
                }
            }
        });
    }
}

}

Here is my Partial View:

@model SFB.SVP2.Objects.InterviewFollowup
@using SVP2UI.Helpers;

<script type="text/javascript">

    var ddlMailCodes;
    var ddlEmployees;

    function pageLoad() {
        ddlEmployees = $get("AssignedTo");
        ddlMailCodes = $get("MailCodes");
        $addHandler(ddlMailCodes, "change", bindOptions);
        bindOptions();
    }

    function bindOptions() {
        ddlEmployees.options.length = 0;
        var MC = ddlMailCodes.value;
        if (MC) {
            Sys.Net.WebServiceProxy.invoke(
                "/Services/BranchService.asmx",
                "Employees",
                false,
                { MC: MC },
                bindOptionResults
            );
        }
    }

    function bindOptionResults(data) {
        var newOption;
        for (var k = 0; k < data.length; k++) {
            newOption = new Option(data[k].LastName + ", " + data[k].FirstName, data[k].ADUser);
            ddlEmployees.options.add(newOption);
        }
    }

</script>

@using (Html.BeginForm("ReassignPost", "InterviewFollowup"))
{
    @Html.ValidationSummary(true)
    @Html.AntiForgeryToken()

<fieldset>
    <legend><strong>Re-Assign Task</strong></legend>

    <input type="hidden" value="" id="tasks" class="tasks" name="tasks" />

    <div style="display: table; float:left; position:relative; width: 50%">
        <div class="editor-label">
            Location:
        </div>
        <div class="editor-field">
            @Html.DropDownList("MailCodes", (IEnumerable<SelectListItem>)ViewData["MailCode"], "-- Select --")
            @Html.ValidationMessage("MailCodes")
        </div>
    </div>

    <div style="display: table; float:right; position:relative; width: 50%">
        <div class="editor-label">
            @Html.LabelFor(model => model.AssignedTo)
        </div>
        <div class="editor-field">
            <select name="AssignedTo" id="AssignedTo"></select>
        </div>
    </div>

    <div class="editor-label">
        Notes:
    </div>
    <div class="editor-field">
        <input type="text" name="Notes" id="Notes" />
        @Html.ValidationMessage("Notes") 
    </div>

    <p>
        <input type="submit" value="Submit" />
        <input type="button" value="Cancel" />
    </p>

</fieldset>
}

Answer 1

I would recommend you to externalize all your javascript into a separate js file. Mixing javascript and markup is bad. Once you have externalized it, you can call whatever function you like once you show the partial:

$("#DialogBox").dialog({
    width: 525,
    modal: true,
    draggable: false,
    resizable: false,
    open: function (event, ui) {
         $(this).load('/ControllerName/PartialView', function () {
             // OK, at this stage the partial is injected into the DOM
             // here you can call whatever function you like
             // for example the pageLoad(); function

             var checkeditems = $('input:checkbox[name="selectedObjects"]:checked').map(function () { return $(this).val() }).get().join(",");
             $('input.tasks').val(checkeditems);
        });
    },
    buttons: {
        "Cancel": function () {
            $(this).dialog("close");
        }
    }
});

Oh, and is there any reason for still using MicrosoftAjax scripts? Those are so much obsolete compared to jQuery that it's been long time I've seen someone using them. You can perfectly fine invoke a script enabled .ASMX service using jQuery.