Jquery: Как я могу вызвать модальное окно только из-за существования элемента

Question

У меня есть форма, которая генерирует следующую разметку при наличии одной или нескольких ошибок при отправке:

<ul class="memError">
    <li>Error 1.</li>
    <li>Error 2.</li>
</ul>

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

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    $('.memError').load(function() {
        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set heigth and width to mask to fill up the whole screen
        $('#mask').css({
            'width': maskWidth,
            'height': maskHeight
        });

        //transition effect
        $('#mask').fadeIn(1000);
        $('#mask').fadeTo("slow", 0.8);

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        //Set the popup window to center
        $(id).css('top', winH / 2 - $(id).height() / 2);
        $(id).css('left', winW / 2 - $(id).width() / 2);

        //transition effect
        $(id).fadeIn(2000);
    });
    //if close button is clicked
    $('.memError').click(function(e) {
        $('#mask').hide();
        $('.memError').hide();
    });
});
//]]>
</script>

Я установил стили для #mask и .memError, в значительной степени идентичные примеру , но я не могу ничего отобразить при загрузке ul.memError. Я пробовал другие события , пытаясь запутаться, но у меня пока нет понимания javascript, необходимого для этого.

Кто-нибудь может указать мне правильное направление?

Answer 1

если это обычная старая форма отправки, тогда просто отметьте $ ('. Memerror'). Length> 0 на document.ready .. если это правда, то сделайте все остальное. Вам не нужно добавлять обработчик события загрузки, поскольку ul уже загружен. если это ajax submit, то вы должны использовать событие успеха плагина jquery forms

Answer 2

Это был триггер, который решил мою проблему:

if ($('.memError').length > 0) {
    $(function() {
        // ...
    });
}

Спасибо, Скотт! Это была обычная старая форма отправки, с сообщением об ошибке, появляющимся после загрузки страницы HTTP, и if($('.myElement').length > 0) позволил мне проверить наличие элемента ошибки .

Answer 3

Похоже, вы пытаетесь подписаться на объект неправильно в приведенном вами примере. Попробуйте вместо этого использовать в вашей форме событие submit(). Вы должны использовать событие submit() вместо события щелчка на кнопке формы (или любом другом элементе), поскольку пользователь может легко отправить форму, не нажимая ее кнопку, нажав клавишу ввода при заполнении формы. Это делает ваше модальное окно более надежным.

<script type="text/javascript">
$(document).ready(function() {
    $('form').submit(function() {//<- Submit event

        // ...
        // Modal Window Code ommitted 
        // to make example code more clear
        // ...

        // From what I understand, the following line
        // is the "magic" that makes the modal window display
        // (I haven't tested this code)
        $(id).fadeIn(2000);
    });
});
</script>

Приведенный выше пример подпишется на событие submit в всех формах на странице. В большинстве случаев есть только один на странице. Однако это не должно иметь большого значения.

Answer 4

эти ошибки в "memError" загружаются с использованием некоторого ajax или загрузки страницы HTTP?

взгляните на этот пример, не отвечая на все, что вам нужно, но может дать вам некоторые идеи, и это для события onclick. Но если ваши ошибки отображаются с использованием некоторого ajax, то вы можете изменить его, когда ошибки ajax загружаются на страницу. Я постараюсь обновить его позже.

$(function() {

$('#clickMe').click(function(event) {
    var mytext = $('#myText').val();


    $('<div id="dialog">'+mytext+'</div>').appendTo('body');            
        event.preventDefault();

                $("#dialog").dialog({                                   
                        width: 600,
                        modal: true,
                        close: function(event, ui) {
                                $("#dialog").remove();
                                }
                        });
    }); //close click
});


<h3 id="clickMe">Open dialog</h3>
<textarea cols="0" rows="0" id="myText" style="display:none">Some hidden text display none</textarea>

Answer 5

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

Не уверен, будет ли это соответствовать вашей реализации или нет.