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;
});
});