Hi All,
First, I'm providing a public gist of a jquery modal dialog that is working in Rails 3.0.7 with the latest jquery and jqueryui.
https://gist.github.com/987103
I would like to find some honest feedback on what I could do to make this a better dialog, because I personally don't like some of the coding I had to do to make it work.
Here's the basic scenario and how it functions.
Non-authenticated user visits the site. Non-authenticated user forgets password. Non-authenticated user clicks a link to forgot password. A jquery modal dialog box pops up, graying/shading out the background. Inside the modal dialog box is a form with an email input field. Two buttons are used by the jqueryui dialog (one cancels and one submits). Submit is handled (through two events - enter or mouseclick). When the non-authenticated user submits, a POST request is sent to:
=> forgot_password_path (which equals '/forgot_password')
A password reset code is then mailed to the user.
This scenario works 100% with the code I pasted above, but not without issues, which is why I'm posting this here.
ISSUES:
Several browser issues exist because of the UI modal dialog and its handling of the post request. To make the modal look clean, I opted to not have a submit tag or button inside the rails form. I left the submit events to be handled by jquery through:
$.post('/forgot_password', $("#submit-forgot-password").serialize());
The only problem with doing this is that now the browser issues start. First, here's a brief example of some issues I encountered:
(when user clicks the enter key):
IE9: The post works perfectly, the modal closes, but the browser sits in place and does not redirect to the '/forgot_password' URL. If I add a window.location after the post, it will send a GET request which will throw up a routing error. As a work around I ended up creating a simple view that acts as a GET catch route for the password reset. I'm then able to put the window.location in and route it to the GET request route. This makes IE send the correct post through jquery, and then redirect the browser to the get catch route. UGLY, and I hate it.
Mozilla: The post works perfectly, the modal closes, and the browser redirects to the '/forgot_password' url with the correct POST and data. Everything works perfectly.
Safari: Same thing as Mozilla above.
(when user clicks the button on the jquery UI for submitting via mouse)
IE9: The same situation for the enter key scenario above applies to this as well. No deviation. Same workaround implemented.
Mozilla: Lo and behold, mozilla now experiences the same issues that IE9 encountered. I end up having to supply the same work around for mozilla but only when the button is clicked.
Safari: Safari encounters this as well. Only, it doesn't like window.location, and instead destroys the post URL and throws the window.location URL into the post, effectively routing the user to the get catch all route, but not performing a post. I ended up having to supply an alert only for safari and only when the user clicks the button.