ненавязчивая проверка jQuery на элементах, созданных javascript MVC3 - PullRequest
Новая
       18

ненавязчивая проверка jQuery на элементах, созданных javascript MVC3

3 голосов
/ 14 июля 2011

У меня есть форма регистра, созданная с помощью mvc3 scaffolding.

например, 

<div class="editor-label">
    @Html.LabelFor(model => model.Email)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Email)
    @Html.ValidationMessageFor(model => model.Email)
</div>

и т. Д.

У меня есть выпадающий список, где пользователь может выбрать, если ончеловек или компания.Если выбран человек, страница загружается со свойствами этого человека, такими как дата рождения, но если он / она выбирает параметр «компания», я отключаю часть формы (с помощью jquery .detach () .attach ()) на скрытый.div вне формы (поэтому значения не публикуются при отправке)

Это прекрасно работает с моей пользовательской проверкой и моделями представления, единственная проблема заключается в том, что нет проверки jquery для вновь включенных элементов.

Я хотел бы использовать ненавязчивую проверку jquery, но как мне вручную прикрепить обработчики к новым элементам формы (или повторно обработать весь dom для проверки)?

edit: после проверки этой записи блога: http://xhalent.wordpress.com/2011/01/24/applying-unobtrusive-validation-to-dynamic-content/

Я попытался обновить свой код.Я включил JavaScript, описанный там, и попытался обработать недавно вставленную часть формы.когда это не имело никакого значения, я переключился на .remove () и .html () мой код и вставил голый HTML, но это никак не помогло.вот мой сценарий: 

    <script>
        $(document).ready(function () {
            var secretholder = $('#secret_from_holder');
            var visibleholder = $('#type_data_holder');
            var select = $('select#TypeValueID');
            select.change(function () {
                var value = $('select#TypeValueID option:selected').val();
                switch (value) {
                    case '1':
                        var tohide = visibleholder.html();
                        visibleholder.children().remove();
                        var toshow = secretholder.html();
                        secretholder.children().remove();

                        secretholder.append(tohide);
                        visibleholder.append(toshow);

                        $.validator.unobtrusive.parseDynamicContent('div.firm');
                        break;
                    case '2':
                        var tohide = visibleholder.html();
                        visibleholder.children().remove();
                        var toshow = secretholder.html();
                        secretholder.children().remove();

                        secretholder.append(tohide);
                        visibleholder.append(toshow);

                        $.validator.unobtrusive.parseDynamicContent('div.person');
                        break;
                }
            });
        });
    </script>

вот моя скрытая часть вне формы, в которую я переключаюсь: 

    <div id="secret_from_holder" style="display: none">
    @if (Model.TypeValueID == Constants.Crm.Customer.Types.FIRM_VALUE_ID)
    {
        <div class="person">
            <div class="editor-label">
                @Html.LabelFor(model => model.Person.Name)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Person.Name)
                @Html.ValidationMessageFor(model => model.Person.Name)
            </div>
            <div class="clear"></div>
            <div class="editor-label">
                @Html.LabelFor(model => model.Person.BirthDate)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Person.BirthDate)
                @Html.ValidationMessageFor(model => model.Person.BirthDate)
            </div>
            <div class="clear"></div>
        </div>
    }
    else
    { 
        <div class="firm">
            <div class="editor-label">
                @Html.LabelFor(model => model.Firm.Name)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Firm.Name)
                @Html.ValidationMessageFor(model => model.Firm.Name)
            </div>
            <div class="clear"></div>
            <div class="editor-label">
                @Html.LabelFor(model => model.Firm.BankAccountNumber)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Firm.BankAccountNumber)
                @Html.ValidationMessageFor(model => model.Firm.BankAccountNumber)
            </div>
            <div class="clear"></div>
            <div class="editor-label">
                @Html.LabelFor(model => model.Firm.Tax)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Firm.Tax)
                @Html.ValidationMessageFor(model => model.Firm.Tax)
            </div>
            <div class="clear"></div>
            <div class="editor-label">
                @Html.LabelFor(model => model.Firm.EuTax)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Firm.EuTax)
                @Html.ValidationMessageFor(model => model.Firm.EuTax)
            </div>
            <div class="clear"></div>
            <div class="editor-label">
                @Html.LabelFor(model => model.Firm.TradeNumber)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Firm.TradeNumber)
                @Html.ValidationMessageFor(model => model.Firm.TradeNumber)
            </div>
            <div class="clear"></div>
        </div>                   
    }
    </div>

Я действительно застрял здесь, пожалуйста, помогите.

автоматически анализируемая часть (при загрузке страницы) всегда проверяется (даже если она выключена и возвращается снова), но часть, которую я пытаюсь проанализировать вручную, никогда не проверяет

Ответы [ 2 ]

3 голосов
/ 14 июля 2011

Вам необходимо проанализировать вновь добавленное содержимое , чтобы зарегистрировать его при проверке клиента. А вот еще одно сообщение в блоге , в котором обсуждаются эти проблемы. И все же еще один .

1 голос
/ 02 июля 2014

У меня также был похожий сценарий, когда я загружал контент динамически с помощью Ajax, используя частичное представление. Я смог заставить мой код работать в два этапа.

  1. Когда содержимое загружено в DOM, я сделал следующее: 

    $.ajax({
   type: "Get",
   url: SomeURL,
   data: { TransactionId: recordId },
   success: function (data) {
      $('#SomeDiv').html(data);
      $.validator.unobtrusive.parse('#SomeDiv');              
      ShowModal();
   }
});

  2. При отправке формы я сделал следующее: 

    var form = $('#SomeDiv').find('form');
if ($(form).valid()) {
   // call ajax post
}

И это, казалось, вызвало ненавязчивую проверку. Надеюсь, кто-то что-то из этого получит.

...