Jump to:

10848 Posts in 2516 Topics by 1792 members

All other Modules

SilverStripe Forums » All other Modules » ajax login form

Discuss all other Modules here.

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

Page: 1 2
Go to End
Author Topic: 4277 Views
  • draft
    Avatar
    Community Member
    57 Posts

    ajax login form Link to this post

    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..

  • Euphemismus
    Avatar
    Community Member
    82 Posts

    Re: ajax login form Link to this post

    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.

  • draft
    Avatar
    Community Member
    57 Posts

    Re: ajax login form Link to this post

    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.

  • Euphemismus
    Avatar
    Community Member
    82 Posts

    Re: ajax login form Link to this post

    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 Dialog. 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

  • draft
    Avatar
    Community Member
    57 Posts

    Re: ajax login form Link to this post

    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.

  • Euphemismus
    Avatar
    Community Member
    82 Posts

    Re: ajax login form Link to this post

    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

  • draft
    Avatar
    Community Member
    57 Posts

    Re: ajax login form Link to this post

    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

    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..

  • Euphemismus
    Avatar
    Community Member
    82 Posts

    Re: ajax login form Link to this post

    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

    4277 Views
Page: 1 2
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.