Tutorial # 2: jQuery-style Dialog Boxes

Table of contents

Tutorial # 2: jQuery-style Dialog Boxes

1: CSS for hiding the Close button

        .no-close .ui-dialog-titlebar-close
        {
                display: none;
        }

Notes:

The Close button is actually the 'x' in the top-right corner of a dialog box.

2: CSS for styling buttons

        .ui-button .ui-widget .ui-state-default .ui-corner-all .ui-button-text-only
        {
                font-weight: bold; // Does not work.
        }

3: Javascript for attaching a dialog box to a button

Step 1: Declare the button (CGI form field in HTML):

        <span id="delete_person_button">Delete</span>

Step 2: Turn that into a jQuery button (Javascript):

        $(document).ready(function()
        {
                $("#delete_person_button").button();

                ...
        }

Or, turn several buttons into jQuery buttons in 1 hit (Javascript):

        $(document).ready(function()
        {
                $("#update_person_button, #delete_person_button").button();

                ...
        }

Step 3: Attach a click handler to the button (Javascript):

        $(document).ready(function()
        {
                $("#delete_person_button").click(function(e)
                {
                        $("#confirm_delete").dialog
                        ({
                                buttons:
                                {
                                        Yes: function()
                                                {
                                                        delete_person();
                                                        $(this).dialog("close");
                                                },
                                        No: function()
                                                {
                                                        $(this).dialog("close");
                                                }
                                },
                                dialogClass: "no-close",
                                modal: true
                        });
                });

                ...
        }

Notes:

I just happened to want a modal dialog box. If you chop that line, *don't forget* to remove the trailing ',' on the previous line. Yep - that's another reason to despise the idiots who designed this language. They inflict gratuitous pain on us for petty things (as does C, C++ and a whole heap of other, lesser, languages).

Let's try to style a button to look like a jQuery button

Step 1: The CSS

        .button-like
        {
                font-size: 24px;
                font-weight: lighter; // Does not work.
        }

Step 2: Declare the button (CGI form field in HTML):

        <span class="button-like"><input id="reset_person_button" type="reset" value="Reset"></span>

The button size changes, as per the CSS, but the font-weight doesn't.

Perhaps this only fails for reset-type buttons. I don't know. I did not try this with another type of button.

Traps

As you know, jQuery is full of astonishing and infuriating traps.

Here are some connected with dialog boxes.

Closing a dialog box

Don't try to use methods such as .close(), .destroy() or .hide() to close the dialog box. They don't work. Use this construct from within each button:

        $(this).dialog("close");

Yes, that's right - within *each* button.

Returning a value from within a dialog box

This looks reasonable, but *will not work*:

        $(document).ready(function()
        {
                $("#delete_person_button").click(function(e)
                {
                        var confirm = "No";

                        $("#confirm_delete").dialog
                        ({
                                buttons:
                                {
                                        Yes: function()
                                                {
                                                        confirm = "Yes";
                                                        $(this).dialog("close");
                                                },
                                        No: function()
                                                {
                                                        $(this).dialog("close");
                                                }
                                },
                                dialogClass: "no-close",
                                modal: true
                        });
                });
        }

AFAICT, there is a bug in either jQuery or Javascript, in that this code declares 2 variables called 'confirm'. And therefore the assignment:

        confirm = "Yes";

does not propagate to the one explicitly declared with:

        var confirm = "No";

This, in turn, means you cannot put the above code in a function, and end that function with:

        return confirm;

because only the first (outer) confirm will be returned, and it's value is always "No".

Links

My home page

All tutorials (Includes references)

POD source for this tutorial