Question

We have a requirement where the web page displays all the records from joining few tables.
We have an “Add Button” – upon clicking the button, I have to display an popup window, where user will enter the necessary details. The popup will have two buttons Save and Cancel.

Clicking Save button, should validate the fields and if all validations are passed, then save the record to database else display the error messages in alert boxes.

Clicking Cancel button will close the popup window.

How do I create popup upon clicking add button?

Answer 1

You need to separate the things that are server-side (Rails, controllers, actions) and client-side (popups, JavaScript, sending requests).

Your client-side actions (JavaScript code) should think about your Rails application as about some server, which returns some responses for some requests. From JavaScript’s point of view it is not important whether the server is running Rails or Smalltalk.

The basic workflow for your popup may be:

1) open a new window – This requires client-side activity of JavaScript. Use window.open function, or (I humbly consider this method a better one) create a new <div> and style it with CSS so it will cover (a nice effect is an half-opaque background: background: #ddf; opacity: 0.5;, through which you still see the content of the page).

2) fill the window with an edit form – Here your client-side script should make an AJAX-like call (not necessarily real AJAX, since in this case a synchronic request may be sensible) to get the edit form from your Rails application. See this simplicated example:

function fillPopupBody(popup) {
  var req = new XMLHttpRequest();
  req.open("GET","/something/partial_new_form.html",false); // Synchronic request!
  req.send(null);
  if( req.status == 200 ) {
    popup.innerHTML = req.responseText;
    return true;
  } else {
    popup.innerHTML = "<p class='error'>"+req.status+" ("+req.statusText+")</p>";
    return false;
  }
}

3) Prepare the form-returning action in your Rails application – (server-side) Usually this may be your new action of the given resource controller, but rendered without layout.

An alternative approach would be to build the form by the JavaScript (without fetching it separately), or to include it always in the page – just hidden by default, so the JavaScript needs only to set its display property.

4) Handle form submission – you probably want the user to stay on the same page, so you should intercept the form submission. Just add a handler to the “submit” event of the created form, build a request, post it, check the server response.

The response will be returned by Rails, by your :create action. You may already have it ready, because the code created by ./script/rails generate scaffold is usually OK.

If the response is 201 (created), you may close the popup (display: none) and update the page to display the new object – either refresh the whole page, or fetch only the changed parts.

If the create action cannot create the object, by default the response code is 422 (unprocessable entity) and the content is the model errors object, rendered as JSON or XML. Just display the errors in the form (let your JavaScript set the innerHTML of some predefined element).

---

That was the ‘manual’ way of doing the task. I have some aversion (hardly explainable 😉 to JavaScript libraries, and I prefer to work directly with DOM. You may find a lot of Rails helpers which will save you from writing JavaScript code. I guess that looking at the :remote => true parameter of form_for will be a good starting point.

Also the jQuery documentation ( http://docs.jquery.com/Main_Page ) may be a good thing to read.

Ending this long story, here are the short answers to your questions from the comment:

How do i link controller actions from the popup?

: By sending a HTTP request to the proper URL: “GET /users/1/notes/new”, “POST /user/1/notes”

How do i close the popup?

: By setting display: none if the popup is an element of the page, or by calling window.close() if your popup is a separate window.