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.
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.
=========
Summary: While everything works above, there’s gotta be a better way of
doing what I described in the basic scenario description. I have
already tried inserting the form remotely into a dialog without using
any buttons from the jqueryui. This also had complications and
encountered redirect problems.
If anyone has any ideas on how to make a jquery modal form dialog work
with rails 3.0.7, without all of the issues I described, please let me
know. I’m not great with javascript, but I’m learning. I don’t
normally throw a lot of javascript or modal dialog events in my site,
but in this particular case, it will look cleaner and smoother having
this type of dialog in place.
Thanks in advance for any responses or feedback.
Take care.