How to create popup window to create new record in rails 3 -

we have requirement web page displays records joining few tables. have "add button" - upon clicking button, have display popup window, user enter necessary details. popup have 2 buttons save , cancel.

clicking save button, should validate fields , if validations passed, save record database else display error messages in alert boxes.

clicking cancel button close popup window.

how create popup upon clicking add button?

you need separate things server-side (rails, controllers, actions) , client-side (popups, javascript, sending requests).

your client-side actions (javascript code) should think rails application some server, returns some responses some requests. javascript's point of view not important whether server running rails or smalltalk.

the basic workflow popup may be:

1) open new window - requires client-side activity of javascript. use window.open function, or (i humbly consider method better one) create new <div> , style css cover (a nice effect half-opaque background: background: #ddf; opacity: 0.5;, through still see content of page).

2) fill window edit form - here client-side script should make ajax-like call (not real ajax, since in case synchronic request may sensible) edit form rails application. see 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 form-returning action in rails application - (server-side) may new action of given resource controller, rendered without layout.

an alternative approach build form javascript (without fetching separately), or include in page - hidden default, javascript needs set display property.

4) handle form submission - want user stay on same page, should intercept form submission. add handler "submit" event of created form, build request, post it, check server response.

the response returned rails, :create action. may have ready, because code created ./script/rails generate scaffold ok.

if response 201 (created), may close popup (display: none) , update page display new object - either refresh whole page, or fetch changed parts.

if create action cannot create object, default response code 422 (unprocessable entity) , content model errors object, rendered json or xml. display errors in form (let javascript set innerhtml of predefined element).

---

that 'manual' way of doing task. have aversion (hardly explainable ;-) javascript libraries, , prefer work directly dom. may find lot of rails helpers save writing javascript code. guess looking @ :remote => true parameter of form_for starting point.

also jquery documentation ( http://docs.jquery.com/main_page ) may thing read.

ending long story, here short answers questions comment:

how link controller actions popup?

: sending http request proper url: "get /users/1/notes/new", "post /user/1/notes"

how close popup?

: setting display: none if popup element of page, or calling window.close() if popup separate window.