JQuery user interface dialog for form?

Question

I have a "items" controller and a "new" method for creating different types of items. I would like to have this form in the jQuery UI dialog box. I started playing tonight and was able to open a dialogue with the form:

$("#load_form") .load('/items/new', {item_type: '#item_type_select'}) .dialog({modal:true, width:'auto', height:'auto'}); 

The form currently has strict HTTP (form_for). When a form in the user interface dialog box is submitted (or indeed, if any link is clicked or any page request), the user interface dialog box closes and a new page loads in the browser.

If it is possible that the jQuery UI Dialog dialog box “changes pages” and displays the display page again (format the application) or the “new” page using the Errors (save fail) field, what should I do? I was not lucky to find something like a tutorial on how to set up a Rails form and answers (save failure / success) for it in the JQuery UI dialog box.

Thanks!

Answer 1

You will need to submit the form using jQuery and process the result with success, as well as using jQuery.

To submit a form using jQuery, you can do something like this:

 $('form').submit(function(){ $.ajax({ type: this.method, url: this.action, data: $(this).serialize(), dataType: "html", success: successHandler, error: errorHandler }); return false; }); 

successHandler and errorHandler are functions that will be called after the completion of the AJAX request, which depends on the status code returned by the server.

Then jQuery will pass three parameters - data, textStatus, jqXHR for success and jqXHR, textStatus, errorThrown for error . Since jQuery 1.5.1 you can also bind callbacks or you can bind AJAX events to your container - for all parameters and more details check the docs .

In any case, and depending on how you handle errors on the server, callbacks will take place to insert the result back into your DOM, show / repopulate modal, etc.

You can, for example, simply replace the contents of your modal file or the form contained in the result that the server sends with .html(data) , parsing errors, etc. Or you close the current modal file and open a new one containing the returned data.