Jquery: How do I trigger a modal window just from the existence of an element

Question

I have a form that generates the following markup if there is one or more errors on submit:

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

I want to set this element as a modal window that appears after submit, to be closed with a click. I have jquery, but I can't find the right event to trigger the modal window. Here's the script I'm using, adapted from an example I found here:

<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>

I've set styles for #mask and .memError pretty much identical to the example, but I can't get anything to appear when I load the ul.memError. I've tried other events trying to muddle through, but I don't yet have the grasp of javascript needed for this.

Can anyone point me in the right direction?

Answer 1

I played around with live events and such but I just can't seem to find a way to trigger it. You could use a bit of inline code when you insert the new items to trigger a custom event.

Not sure if that would fit with your implementation or not.

Answer 2

are those errors in "memError" are loaded using some ajax or a HTTP page load?

have a look a look at this example, not answereing all what you need but may give you some ideas, and it is for a onclick event though. But if yours errors are shown using some ajax then you can change it to when the ajax errors are loaded into page. I'll try to update it later.

$(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 3

if this is a plain old form submit, then just check $('.memerror').length > 0 on document.ready .. if it's true, then do the rest. you dont' need to add a load event handler as the ul is already loaded. if its an ajax submit, then you should be using the success event of the jquery forms plugin

Answer 4

It looks like you're trying to subscribe to the object wrong in the example you gave. Try using the submit() event of your form instead. You should use the submit() event instead of a click event on a form button (or any other element) because the user could easily submit the form without clicking its button by pressing enter when filling out the form. This makes your modal window display more reliably.

<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>

The example above will subscribe to the submit event on all forms on the page. In most cases, there is only one on the page. It shouldn't make much difference either way, however.

Answer 5

This was the trigger that solved my problem:

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

Thanks Scott! This was a plain old form submit, with the error message coming after HTTP page load, and if($('.myElement').length > 0) enabled me to test for the existence of the error element.