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

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