MVC JQuery загружается слишком быстро

Question

Я использую MVC3 и Entity Framework.У меня есть список на странице с флажками для пользователя, чтобы выбрать несколько элементов.(Цель состоит в том, чтобы «переназначить» кратные значения за раз).

Когда пользователь нажимает кнопку «Переназначить», он вызывает диалоговое окно JQuery для отображения и загружает частичное представление.В частичном представлении у меня есть скрытое поле для флажков, которые были выбраны.

Примером может быть:

<input type="hidden" value="2,4,5" class="tasks" name="tasks" />

Однако мой код работает слишком быстро, чтобы JQuery мог захватить, какие флажки были отмечены.Когда я просматриваю диалоговое окно HTML в Firebug, значение пустое.

Я проверил свой код, выполнив:

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

Странно, значения помещаются в скрытое поле.Без предупреждения их там нет.

Вот мой Javascript:

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

function GetReassign() {
    $("#ReassignDialog").dialog({
        height: 315,
        width: 525,
        modal: true,
        draggable: false,
        resizable: false,
        open: function (event, ui) {
            $(this).load('/InterviewFollowup/ReassignPartial');
        },
        buttons: {
            Ok: function () {
                $(this).dialog("close");
            }
        }
    });

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

Вот мой Вид:

@using (Html.BeginForm("ReassignPost","InterviewFollowup")) {
<fieldset>
    <legend><strong>Re-Assign Task</strong></legend>

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

    <div class="editor-label">
        Location:
    </div>
    <div class="editor-field">
        @Html.DropDownList("MailCodes", (SelectList)ViewBag.MailCodes,"-- Select --")
        @Html.ValidationMessage("MailCodes") 
    </div>

    <br />

    <div class="editor-label">
        @Html.LabelFor(model => model.AssignedTo)
    </div>
    <div class="editor-field">
        <select name="AssignedTo" id="AssignedTo"></select>
    </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

Функция .load() jQuery является асинхронной (это вызов AJAX), поэтому этот код:

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

запускается до загрузки частичного представления, и поэтому ваш селектор $('input.tasks') не соответствует элементу - добавление оповещения исправляет это, потому что задерживает выполнение следующей строки до после AJAX звонок завершен. Вы захотите переместить этот код в функцию обратного вызова для завершения .load(), например:

* * 1010

Answer 2

Я полагаю, вы обращаетесь к некоторым элементам DOM до того, как он закончит загрузку.Я бы завернул ваш код в готовый документ

$(function(){

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

});

http://api.jquery.com/ready/

http://docs.jquery.com/Tutorials:Introducing_$(document).ready()

со страницы выше ,

Это первое, что нужно узнать о jQuery: если вы хотите, чтобы событие работало на вашей странице, вы должны вызывать его внутри функции $ (document) .ready ().Все внутри него будет загружаться, как только DOM загружен и до загрузки содержимого страницы.