Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

All other Modules /

Discuss all other Modules here.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

ajax login form


Go to End
Reply


12 Posts   4702 Views

Avatar
draft

Community Member, 57 Posts

6 May 2010 at 2:21am

Is there default ajax login on silverstripe ? Just wondering if there is a good way to create this feature without changing much of the core code..

Thx..

Avatar
Euphemismus

Community Member, 82 Posts

6 May 2010 at 6:00am

Edited: 06/05/2010 6:02am

Hi,

for a feature like this you don't have to change core code. This is easily done with some jQuery and a additional template.
In your mysite/Page.php:

   function init()
   {
      parent::init();
      //add jQuery support
      Requirements::javascript( THIRDPARTY_DIR . '/jquery/jquery-packed.js' );
      Requirements::javascript( THIRDPARTY_DIR . '/jquery-livequery/jquery.livequery.js' );
      Requirements::javascript( THIRDPARTY_DIR . '/jquery-form/jquery.form.js' );
   }

   public function ajaxLoginForm()
   {
      if( true == Director::is_ajax() )
      {
         $loginForm = array();
         $loginForm[ 'Form' ] = MemberAuthenticator::get_login_form( $this );
         return $this->renderWith( 'ajaxLoginForm', $loginForm );
      }
   }

The template (ajaxLoginForm.ss):

$Form

How to call this?
I'm using a layer that "pops up" if you click on "login" - but you could also just inject the rendered template in a target div or whatever you want. It could look like this...
"jQuery" the link to the login form

jQuery( document ).ready( function()
{
   jQuery( 'a.ajaxLoadForm' ).click( function()
   {
      jQuery( '#loginFormSpace' ).load( jQuery( this ).attr( 'href' ) );
      return false;
   } );
} );

This does following: As soon as the DOM is read, jQuery looks for all links with class "ajaxLoadForm", adds an onclick-event and directs the request to the "href" attribute value (i.e. http://yoursite/ajaxLoginForm). The response of the request (which is the rendered login form), will then be placed in an element with the id "loginFormSpace".
If you want the sending etc. within the form to be ajaxified, too, just add inline JS to your form there, to call jQuery().click for the send-button.

Avatar
draft

Community Member, 57 Posts

6 May 2010 at 5:52pm

hi Euphemismus,

Thx for your answer, i understand that you are displaying the login form using ajax here, which is good, but can you please tell me how u do the ajax process ?
Like when there is wrong email and password, it will just display the message there, without reloading the form, also after login success it will closed up the form and reloading the current page.

Just to clarify, one i'm trying to achieve is on the comment page, u see if i set needed login to comment to true, it will have a login link and no comment form, so what i want is to click the login link, it will show modal box with the login form, and user will login there, after the login success, it will closed up the modal box login, and the comment box appear. Is this possible?

Thx.

Avatar
Euphemismus

Community Member, 82 Posts

6 May 2010 at 7:54pm

Hi draft,

This is absolutely possible ;-)
You should have a little closer look at jQuery an jQuery.ui.
I've tried some modal boxes but wasn't happy until I found [url=http://jqueryui.com/demos/dialog/]Dialog[/url]. I'm using it that way: I inject the form into dialog and show it modal. If you add jQuery to the form, too, you can get the responses and apply them to the modal box, too. If you add i.e. a "close" button or catch the success-event from the login process via jQuery, you can then "refresh" (=jQuery.load) your comment form in a similar way I did with the login form.
I suggest you read into the jQuery and ui manual and this will become a lot clearer :-)

Regards,
Marc

Avatar
draft

Community Member, 57 Posts

6 May 2010 at 8:10pm

hi,

thx for your fast reply.. I already got to load the ajax form working, but what i asked it, when i submit login, i want it also using ajax process, currently it just doing a normal process.

The ajax create this form :
<form enctype="application/x-www-form-urlencoded" method="post" action="/home/LoginForm" id="MemberLoginForm_LoginForm">

and this login button : <input type="submit" title="Login" value="Login" name="action_dologin" id="MemberLoginForm_LoginForm_action_dologin" class="action">

And i do realize next is i will need to create jquery function when the button id is clicked, my question is which controller do i call, is it the "home/LoginForm" controller ? And also i will need to sent the post parameter right? So i will just sent the email and password parameter and it will work ?

Hope my question is clear, if you can show me your current code for that functionality it will be very helpful for me :)

thx.

Avatar
Euphemismus

Community Member, 82 Posts

6 May 2010 at 8:37pm

Hi draft,

what you'll have to do is add inline-JS to your form template.
This means: Look at the initial JS Code where the .click action is added to the links automatically this si a good start ;-)
Then use the jQuery form plugin:

jQuery( '#myForm' ).ajaxForm( function()
{
// here comes the callback
});


This will turn your form into an "ajax form". Pack this into an inline-JS, so it will be called after the the rendered template is injected into the target element.
You can use the respons from the login form to show errors or the success msg. If you have a wrapping i.e. <div id="formWrap"></div> around your form, you can use that as a target for the response which you can get via the callback :-)

Does this answer your question?

Regards,
Marc

Avatar
draft

Community Member, 57 Posts

6 May 2010 at 9:05pm

hi man,

sorry it seem like a very simple solution there, but i still can't get it work..

So my form is <form enctype="application/x-www-form-urlencoded" method="post" action="/home/LoginForm" id="MemberLoginForm_LoginForm">

jQuery( '#MemberLoginForm_LoginForm' ).ajaxForm( function()
{

});

Where should i put it, is it on ajaxLoginForm.ss or on the comment page ?
Also do you realize the form element is created via ajax, do you think jquery will still know this without the livequery ?

Man if u can show me the full code probably i will understand faster :p

Just probably show me how you make the comment page with ajax login, have u built that before ?

Looking forward to hear from you.. thx..

Avatar
Euphemismus

Community Member, 82 Posts

6 May 2010 at 9:31pm

Hello draft,

I haven't got an implementation of that at hand.
You should understand at first, how the whole process works - the you're able to implement the necessary code.

So, the general workflow you want to have is:

First step
pageload -> jQuery alters login link -> opens modal window -> login form is injected into modal window -> jquery adds ajax functionality to form

Next step
Form submit -> sends ajax request to server -> you fetch the response in the callback -> show result (form or msg)

Next step
Close modal window -> reload/load comments

As you can see: There is more to it than the code I gave you. That was just a hint where you can start to do it yourself, which is (in my opinion) the best way to learn/abstract how to deal with such tasks in the future.

OK, back to implementation.
What you need is:
In the callback in your .ajaxForm part you need to add a handling for the form's response that either closes the layer and refreshs (.load) the comment form or just shows the response.
Btw. the .ajaxForm goes IN the form template as an inline-JS...

Regards,
Marc

Go to Top