Jquery-UI Dialog - on the fly without DIV

Question

I have what I suspect to be a simple question and after search I suspect the answer to my question to be no, but to double check...

Is it possible to use the Jquery ui dialog with out setting up a DIV?

ie rather than..

$(function() { $( "#dialog" ).dialog();});...

<div id="dialog" title="Do I really need this?">This is a lot of typing just to pass on a simple message</div>

Is it possible just to have something like...

$(function(quickly) { $( "#dialog" ).dialog('this would be much easier');});...

and call it with a quickly() type thing when needed.

You may note that I muddle may way through Javascript and do my best through trial and error to hit on a solution that works for me.

I suppose, I'm asking if I can somehow use dialog in a similar fashion to...

alert("this is simple")

...so I can call an alert to the user whenever I need to, rather than on url click or button press.

Hopefully the above make sense and I'll suspect I'll have to stick with the ugly standard alert but do let me know if there is a simple solution.

Thanks

Answer 1

I hope this helps somebody, you can pass html to dialog directly, like this:

$("<p>Hello World!</p>").dialog(); 

so this way you don't have to have a pre-builded div, you could use:

$("<div>My div content</div>").dialog();

EDIT: changed end tag to </div> instead of </p>

Answer 2

I'm using rails and didnt like to have 2 places where to write code highly dependent. So I've modified jquery-ui dialog example like code below. See executaDialogModal()

<meta charset="utf-8">

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="jquery-ui.css" />


<style>
    body { font-size: 62.5%; }
    label, input { display:block; }
    input.text { margin-bottom:12px; width:95%; padding: .4em; }
    fieldset { padding:0; border:0; margin-top:25px; }
    h1 { font-size: 1.2em; margin: .6em 0; }
    div#users-contain { width: 350px; margin: 20px 0; }
    div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
    div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
    .ui-dialog .ui-state-error { padding: .3em; }
    .validateTips { border: 1px solid transparent; padding: 0.3em; }
</style>


<script>
$(function() {

    //------------------------------------------------------------------------
    // variaveis globais
    var     name = email = password = allFields = tips = null;
    var bValid = true;

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

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

    //------------------------------------------------------------------------
    function checkRegexp( o, regexp, n ) {
        if ( !( regexp.test( o.val() ) ) ) {
            o.addClass( "ui-state-error" );
            updateTips( n );
            return false;
        } else {
            return true;
        }
    }

    //------------------------------------------------------------------------
    function executaDialogModal( ) {
        //----TODO: verificar antes a existência de #dialog-form e destrui-lo
        //----cria Form
        $('body').append("\
            <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>\
        ");
        //----seta vars globais
        name = $( "#name" ),
        email = $( "#email" ),
        password = $( "#password" ),
        allFields = $( [] ).add( name ).add( email ).add( password ),
        tips = $( ".validateTips" );

        //----cria dialog
        $( "#dialog-form" ).dialog({
            autoOpen: true,
            height: 300,
            width: 350,
            modal: true,
            buttons: {
                "Create an account": function() {


                    allFields.removeClass( "ui-state-error" );
                    bValid = true;

                    bValid = bValid && checkLength( name, "username", 3, 16 );
                    bValid = bValid && checkLength( email, "email", 6, 80 );
                    bValid = bValid && checkLength( password, "password", 5, 16 );

                    bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
                    // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
                    bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. [email protected]" );
                    bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );

                    if ( bValid ) {
                        $( "#users tbody" ).append( "<tr>" +
                            "<td>" + name.val() + "</td>" + 
                            "<td>" + email.val() + "</td>" + 
                            "<td>" + password.val() + "</td>" +
                        "</tr>" ); 
                        $( this ).dialog( "close" );
                    }
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
            close: function() {
                removeFormModal();
                allFields.val( "" ).removeClass( "ui-state-error" );
            }
        });         
    }

    //------------------------------------------------------------------------
    function removeFormModal( ) {
        $( "#dialog-form" ).remove();
    }

    //------------------------------------------------------------------------
    $( "#create-user" )
        .button()
        .click(function() {
            executaDialogModal();
        });
});



</script>

Existing Users:

Name Email Password John Doe [email protected] johndoe1

Create new user

Answer 3

What about prompt

But you think that adding a div is writing a lot

you will not like these

http://trentrichardson.com/Impromptu/index.php

http://abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/