jquery метод updateTips не работает, когда div находится на отдельной странице метода? ASP.net mvc2

Question

Я пытаюсь добавить проверку на стороне клиента в диалог jquery, который динамически загружает независимую страницу aspx.

Я использую учебник, данный для модальной формы в jquery-ui http://jqueryui.com/demos/dialog/#modal-form

Помещение всего учебника в Site.Master (сценарий и HTML-диалоговая форма), учебник работает и отображает ошибки, если правила проверки не выполнены.

Однако, когда я «вырезал» / переместил форму на отдельную страницу aspx и изменил диалоговое окно, чтобы он динамически загружал содержимое с определенной страницы, метод updateTips не работает

var tips = $(".validateTips");

      function updateTips(t) {

                tips
                    .text(t)
                    .addClass("ui-state-highlight");
                setTimeout(function() {
                   tips.removeClass("ui-state-highlight", 1500);
                }, 500);
            }

Все, что я сделал, это переместил форму на отдельную страницу

<div id="dialog-form" title="Create new user">
    <p class="validateTips">All form fields are required.</p>

    <form>
    <fieldset>
        <label for="name">Name</label>
        <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
        <label for="email">Email</label>
        <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
        <label for="password">Password</label>
        <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
    </fieldset>
    </form>


</div>

Итак, чтобы подвести итог, когда все находится в Site.Master, следующий код отлично работает

function checkLength(o, n, min, max) {
            if (o.val().length > max || o.val().length < min) {
                o.addClass("ui-state-error");
                updateTips("<p>Length of " + n + " must be between " +
                    min + " and " + max + "."+"</p>");
                return false;
            } else {
                return true;
            }
        }
bValid = bValid && checkLength(name, "username", 3, 16);

т.е. «Все обязательные поля формы» изменяются на

Длина имени пользователя должна быть от 3 до 16. »

Принимая во внимание, что когда они разделены, он отображается как «Все необходимые поля формы» и просто показывает css благодаря классу ui-state-error в соответствующем поле

Может ли кто-нибудь помочь

Спасибо

Answer 1

Это линия

var tips = $(".validateTips");

в функции загрузки страницы на главной странице? если это так, то проблема в том, что элемент p с классом .validateTips не существует в то время, когда вы настраиваете переменную «tips», если вы перемещаете его на отдельную страницу. следующий способ будет исправить это.

function updateTips(t) {
    $(".validateTips").text(t);
    $(".validateTips").addClass("ui-state-highlight");
    setTimeout(function () {
        $(".validateTips").removeClass("ui-state-highlight", 1500);
    }, 500);    
}

Вы также можете установить переменную «tips» после загрузки вторичной формы.

Надеюсь, это поможет.