On March 26, 2019 we launched new MODX Forums. Please join us at the new MODX Community Forums.
Subscribe: RSS
  • random_noob Reply #1, 6 years ago
    Hi guys, I'm trying to create an ajax login for a website. I have found this tutorial http://bit.ly/1jdvMp7 and tried to follow as close as possible. From what I understand from the above link, when I submit a form, the jQuery validates the inputs and if successful, posts the form to a blank (empty) resource which calls the Login Snippet.

    I am having a problem with the Login Snippet call. The jQuery is calling the blank resource but the Login snippet is not responding. Below is my code. Can anyone indicate where I'm going wrong?

    My Form
    <div class="formholder formholder_pos">
    			<div class="heading"><h3>My Login</h3></div>
    			<div class="loginMessage">[[+errors]]</div>
                <!-- contact form -->  
    			<p>Please log in below to access your Customer Account.</p>			
                <form action="[[~[[*id]]]]" method="post" id="contactForm" class="clearfix my_ajax_form">
    
                    <div class="rowcol">
                    	<div class="col2">
    	                    <div class="inputsect">
    	                        <label class="label_title" id="popup_username">[[%login.username]]:</label>
    	                        <input type="text" name="username" id="username" class="inputField required loginusername" value="">
    	                    </div>                                                          
    	                    
    					</div>	                    
    	                                       
    	                <div class="col2">
    	                    <div class="inputsect">
    	                        <label class="label_title" id="popup_password">[[%login.password]]:</label>
    	                        <input type="password" name="password" id="password" class="inputField required loginpassword" value="">
    	                    </div>                                                          
    	                    
    					</div>	
    
                    </div>
                    <input class="returnUrl" type="hidden" name="returnUrl" value="[[+request_uri]]" />
    				[[+login.recaptcha_html]]
    				<input class="loginLoginValue" type="hidden" name="service" value="login" />
    
                    <div class="rowcol">                
                         <div>
                            <input type="submit" value="Log In" class="btn btn-submit btn-custom jevon">
                        </div>
    
                    </div>                
               
                </form>
                <!--/ contact form --> 
                <p><a href="[[~335]]">Forgot your Password?</a></p>
    		</div>


    My JQuery

    jQuery(document).ready(function(){
        my_ajax_form();
    });
    
    function my_ajax_form(){
    var my_error;
    var request;
    
    $(".jevon").click(function() {
        // validate and process form here
        
        // abort any pending request
        if (request) {
            request.abort();
        }
        
        var $form = $(this);
        var $inputs = $form.find("input");
        
        my_error = false;
        
        jQuery(".my_ajax_form input").each(function(i)
            {
               var surrounding_element = jQuery(this);
               var value               = jQuery(this).attr("value");
               var check_for 		   = jQuery(this).attr("id");
               var required 		   = jQuery(this).hasClass("required");  
               
               if(check_for == "username"){
                    surrounding_element.removeClass("my_error valid");
                    baseclases = surrounding_element.attr("class");
                    if(value == "" || value == "Name" || value == "name"){
                    	surrounding_element.attr("class",baseclases).addClass("my_error");  
                    	document.getElementById('popup_username').innerHTML = 'Username: <span class="login_error">Required</span>';
                    	myo_error = true;
                    }else{
                    	surrounding_element.attr("class",baseclases).addClass("valid");
                    	document.getElementById('popup_username').innerHTML = 'Username:';
                    }
                }
                
                if(check_for == "password"){
                    surrounding_element.removeClass("my_error valid");
                    baseclases = surrounding_element.attr("class");
                    if(value.length < 6){
                    	surrounding_element.attr("class",baseclases).addClass("my_error");
                    	document.getElementById('popup_password').innerHTML = 'Password: <span class="login_error">At least 6 characters long</span>';                	
                        my_error = true;
                    }else{
                    	surrounding_element.attr("class",baseclases).addClass("valid");
                    	document.getElementById('popup_password').innerHTML = 'Password:';
                    }
                }
               
                
            });// END OF FUNCTION
    
    
             //DO CODE BELOW IF VALIDATION IS TRUE
             if (my_error == false)
               {
               	var serializedData = $form.serialize();
    
               	$inputs.prop("disabled", true);
               	         	
               	// fire off the request to /index.php?id=494
    		    request = $.ajax({
    		        url: "/index.php?id=494",
    		        type: "post",
    		        data: serializedData
    		    }); 
    		    
    		    // callback handler that will be called on success
    		    request.done(function (response, textStatus, jqXHR){
    		    // log a message to the console
    		    console.log("Hooray, it worked!");
    		    
    		    // callback handler that will be called on failure
                request.fail(function (jqXHR, textStatus, errorThrown){
                // log the error to the console
    	        console.error(
    	            "The following error occured: "+
    	            textStatus, errorThrown
    	        );
    	        });
    
    		    // callback handler that will be called regardless
    		    // if the request failed or succeeded
    		    request.always(function () {
    		        // reenable the inputs
    		        $inputs.prop("disabled", false);
    		    });
    		
    		    // prevent default posting of form
    		    event.preventDefault();
    		    
        });
             	
               }
            return false;
      });
    }


    My 1st Empty Resource
    <script>alert("I reached here");</script>
    [[!Login? &tplType=`modChunk` &loginResourceId=`495`]]


    My 2nd Empty Resource (success)
    <script>alert("I reached here too");</script>
    {"redirect":"[[++site_url]][[~1]]"}

    This question has been answered by random_noob. See the first response.

    [ed. note: random_noob last edited this post 5 years, 10 months ago.]
    • discuss.answer
      I got it solved after some debugging.
      • You can post the correct code ?