2012-06-20 12:47:09 - Article

jquery ui ajax form thickbox

Content.exe
Jquery dialog can be made to work as a ajax form in a similair way to thickbox.

The link to the form (such as registration form), can be made to load inside a popup, and loaded using ajax by simply adding a class to the href.

For example this link could perform a registration, just like thickbox used to behave adding the class ‘dialog-form’ (the title is used to title the form popup) loading the content on submission.

register

Example: register

In order to do this you will need Jquery, and Jquery-UI and the code below.

Alternatively I have written a library called thickdialog which supports the form, confirmation box and pop ups just by adding a simple class, which is compatible with any framework and can be downloaded from there.

// form pop ups, just give an anchor point the class dialog_form, and the title will be used as the title 
$(function (){
    
    function submitBind(layout,original_url){
    
        $(layout).find('form').submit(function(event){

            /* stop form from submitting normally */
            event.preventDefault(); 

            url = $(this).attr('action')=='' ? original_url : $(this).attr('action');                    

            /* Send the data using post and put the results in a div */
            $.post(
                url,
                $(this).serialize(),
                function(data) {

                    $('#dialog').empty();
                    $('#dialog').append(data);
                    $('#dialog').dialog('option', 'position', 'center');
                    submitBind(layout, original_url);
                });

        }); 

    }
    
    
    $('a.dialog-form').click(function() {
        
        var original_url = this.href;
        var title = this.title;
        // show a spinner or something via css
        var dialog = $('').appendTo('body');
        // open the dialog
        dialog.dialog({
            
            width: dialogBox_width,
            
            // add a close listener to prevent adding multiple divs to the document
            close: function(event, ui) {
                // remove div with all data and events
                dialog.remove();
            },
            modal: true
        });

        // load remote content

        dialog.load(
            original_url,
            function (responseText, textStatus, XMLHttpRequest) {
                // remove the loading class
                dialog.removeClass('loading');
                dialog.dialog('option', 'position', 'center');
                dialog.dialog('option', 'title', title);
                              
                submitBind(this,original_url);
             
            }
        );
        //prevent the browser to follow the link
        return false;
    });
});
Comments.log - 0 entries

Leave a Response

System Notice: Your email address will not be published. Required fields are marked with *

LOADING...
Initializing CyberDev systems...