Updating login form via Ajax

classic Classic list List threaded Threaded
6 messages Options
Reply | Threaded
Open this post in threaded view
|

Updating login form via Ajax

vincent_hanna
I have an Ajax login form in a shadowbox to which I'm returning error messages to.  The correct response appears to arrive but the DOM never gets updated.

Has anyone ever encountered this problem and/or does anyone have a solution for this?

Thanks.
Reply | Threaded
Open this post in threaded view
|

Re: Updating login form via Ajax

Wizzud
What do you mean by an 'Ajax login form'?
How are you running Shadowbox - as inline html or as an iframe?
Do you have a web-accessible example page that can be looked at?
Combine literacy with curiosity and a whole world of information opens up to you
Reply | Threaded
Open this post in threaded view
|

Re: Updating login form via Ajax

vincent_hanna
Sorry for my thin description.  I am using shadowbox with inline html to open a hidden form that is loaded with every page.

The form fires the POST to a login action in an onsubmit and is initially set to 'display:none'. The form and link that triggers shadowbox are shown in the pastie below:

http://pastie.org/215412

And if I submit an invalid form (for example, one with blank fields), and the response message as shown in Firebug is:

try {
  Element.update("login_error", "You must enter your email address and password to log in.");
} catch (e) { alert('RJS error:\n\n' + e.toString()); alert('Element.update(\"login_error\", \"You must enter your email address and password to log in.\");'); throw e }

What should happen is that the #login_error div should have the error message inserted, but nothing is happening.  Any ideas?

Thanks.
Reply | Threaded
Open this post in threaded view
|

Re: Updating login form via Ajax

Wizzud
You've mentioned Firebug so you must be using Firefox...
With the form displayed in the shadowbox, inspect the html within shadowbox_content.
You should find your form code, including #login_error.
If you also look (outside of shadowbox) for your original inline form you will find that it is still there, in its original position in the document, and it too has a #login_error element. If you submit the form to get the error you will probably be able to see the error text loaded into the original #login_error.

Because Shadowbox clones inline html into the shadowbox_content div, any ids get duplicated. Referencing an id will probably (not reliably) return the first one found, which will be the original one not the shadowbox one, because shadowbox itself gets appended to the document.

If you are going to use shadowbox to display inline html that is updatable by ajax, you might need to use classes to locate cloned elements (#shadowbox .login_error).
Combine literacy with curiosity and a whole world of information opens up to you
Reply | Threaded
Open this post in threaded view
|

Re: Updating login form via Ajax

vincent_hanna
Thanks for your quick response.  Firebug is indeed showing the original "login_error" receiving the update, but not the cloned one.

Thanks!
Reply | Threaded
Open this post in threaded view
|

Re: Updating login form via Ajax

vincent_hanna
Thanks to Wizzud, I got the error message to display in the shadowbox.

In case anyone needs an explicit solution, the js I used is:

try {
$$("#shadowbox_content .login_error").first().insert("You must enter your email address and password to log in.");
} catch (e) { alert('RJS error:\n\n' + e.toString()); alert('$$(\"#shadowbox_content .login_error\").first().insert(\"You must enter your email address and password to log in.\");'); throw e }

This is being render in Rails using inline RJS in the controller, which looks like this:

respond_to do |format|
  format.html { render :action => 'new' }
  format.js do
  render :update do |page|
    page.select("#shadowbox_content .login_error").first.insert flash[:error]
  end
end

Thank you very very much Wizzud.