CODEWITHSUNDEEP
ruby-on-railsjquery
robzolkos
robzolkos

Reputation: 2266

Rails and modal jquery dialog form

I'm new to using jquery modal dialog boxes with rails and was wondering how I can :

  1. show a jquery modal dialog box with 1 field (eg "title")
  2. post this form to a rails controller (via ajax)
  3. have the modal dialog form redisplay if field is not filled in (with normal red css in error field)

Any tutorials or examples welcome.

Using Rails 3 and jQuery. Thanks for your time.

Upvotes: 21

Views: 14426

Answers (2)

ramblex
ramblex

Reputation: 3057

Here's an example of how I'd do it: https://github.com/ramblex/modal-form.

You should be able to:

  1. download the app
  2. run bundle
  3. rake db:migrate
  4. rails s
  5. Go to localhost:3000/articles and the modal form should come up when you click on the 'New article' link.

An error message should be shown when the title field is left empty. Otherwise it should create the article and display it.

Hope it helps.

Upvotes: 31

Mirko
Mirko

Reputation: 5286

For modal box I use jQuery Tools.

Once you set that up, next step is to bind an ajax request when the form is submitted (eg: form.submit(function(){ $.post... })) and post the form's data to controller.

Third step is setting up your Rails controller to respond to ajax request (using respond_to block) and render something as response (probably using :layout => false).

If validation failed, you will replace content of your modal box with this response body, or if successful (let's say response was just head :ok), you will display a success message.

I hope this makes sense to you.

Upvotes: 3

Related Questions