We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 40828
    • 22 Posts
    Hello. I'm doing Ajax login based on the Login add-on. I have a div where I output the result. When in the ajax snippet I put
      case 'lgn':
    	$res = $modx->runSnippet('[[!Login]]');
    

    and then try to put output ($res) into the div I get the whole page with a header, footer etc. (and with the needed login form as well) trying to squize into that div while I need only the login fom itself.

    When I test this and put let's say
      case 'lgn':
    	$res = 'Hello World';
    

    I get "Hello World" in the needed div. So as I understand the runSnippet('[[!Login]]') command generate the whole page instead of just the Login form. So far I only figured out that I can then take the $res and substring the needed div with login form from it which then I will output to the page but I belive there is a better way to do it.
      • Studying MODX in the desert - http://sottwell.com
        Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
        Join the Slack Community - http://modx.org
        • 40828
        • 22 Posts
        Thank you. I have fixed that. But still same result - I get the whole page as a result instead of that the Login form.
        • This being an AJAX request, the question is what exactly is being returned to the javascript? Is this snippet in a MODx resource, and you are using the URL to that resource as the url for the AJAX request?

          If that is the case, that resource needs to have a blank (none) template.

          Some javascript library functions allow you to specify an element such as a specific div within the returned object, and will only "load" that element's contents. See the section "Loading Page Fragments" here.

          http://api.jquery.com/load/

          I tend to use this for forms like Login or Formit, since this way I can use a resource with a normal template, so if the user doesn't have Javascript enabled the link will send him to the page with the form as usual. Only the part that I want gets loaded from the whole returned page when Javascript is being used.
            Studying MODX in the desert - http://sottwell.com
            Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
            Join the Slack Community - http://modx.org
            • 39932
            • 483 Posts
            If you want to create an ajax login, the easiest way to do this is not to use runSnippet. Instead, you might consider making a Resource with the Login Snippet call. You can then redirect to there instead. The reason for this is that Login has a controller and responds to POSTs. If you don't have a dedicated resource, then there is not a dedicated URL to send the POSTs to. You will also have to set the template of that Login resource to "(empty)" template or to a template without surrounding HTML. Login performs all of the security and additional processing that you might need.

            There is a tutorial which demonstrates this in my signature (mouseover my pic).
              Website: Extended Dialog Development Blog: on Extended Dialog
              Add-ons: AJAX Revolution, RO.IDEs Editor & Framework (in works) Utilities: Plugin Compatibility List
              Tutorials: Create Cross-Context Resources, Cross-Context AJAX Login, Template-Based Actions, Remove Extensions from URLs

              Failure is just another word for saying you didn't want to try. "It can't be done" means "I don't know how".
            • Again, if you're using the JQuery "Load()" function, you can specify just the part of the returned page that you want to use. The Login resource can have a full template, and only the "loginForm" div will be loaded by the AJAX.

              $('#ajax_form').load('login.html #loginForm');
                Studying MODX in the desert - http://sottwell.com
                Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
                Join the Slack Community - http://modx.org
                • 39932
                • 483 Posts
                I love "load()". I never use it, but I do love it. So handy...
                  Website: Extended Dialog Development Blog: on Extended Dialog
                  Add-ons: AJAX Revolution, RO.IDEs Editor & Framework (in works) Utilities: Plugin Compatibility List
                  Tutorials: Create Cross-Context Resources, Cross-Context AJAX Login, Template-Based Actions, Remove Extensions from URLs

                  Failure is just another word for saying you didn't want to try. "It can't be done" means "I don't know how".
                  • 40828
                  • 22 Posts
                  Sorry, I got a bit lost here. Could I give you more details on what I do:

                  Answering the question of Susan I don't have the javascript as a modx resource (if I undestand correctly), I only created an empy snippet and inserted the code there.

                  First I have the following chunk in the heater of my template:

                  <script type="text/javascript">
                  $(document).ready(function() {
                    $('.loginLoginButton').click(function() {
                      var action = 'lgn';
                      var form = $('.loginForm form');
                      var name = $( ".loginUsername" ),
                          password = $( ".loginPassword" ),
                          allFields = $( [] ).add( name ).add( password ),
                          tips = $( ".loginMessage" );
                  
                  $.post(document.location.href, form, function(data){
                                                           try {
                                                                   var jsd = $.parseJSON(data);
                                                                    } catch (e) {
                                                                      $('.loginForm').text(data);
                                                                    }
                                                                   window.location = jsd.redirect; 
                      })
                      return false;
                    })
                  })
                  </script>
                  



                  the I have the php snippet which catch all the requests above and answers on it.
                  <?php
                  if ($_SERVER['HTTP_X_REQUESTED_WITH'] != 'XMLHttpRequest') {return;}
                  $action = $_POST['action'];
                  if (empty($action)) {return;}
                  $res = '';
                  switch ($action) {
                    case 'lgn': 
                  	$res = $modx->runSnippet('Login');
                  	break;
                  }
                  if (!empty($res)) {
                    die($res);
                  }
                  


                  Should I put .load instead of post? Should I put the javascript code in the resouce with blank template?
                    • 40828
                    • 22 Posts
                    Yes, I'm reading your tutorials, it is very interesting.
                    • I see what's going on. You have the AJAX using the same document as its AJAX processor. So it's returning itself to itself, thus you're getting the whole page repeated.

                      Put the snippet in another resource with no template, just the snippet tags. Then use the URL to that resource instead of document.location.href.

                      Or, if you used load() instead of post(), you could specify that you just want the element that contains the Login results.
                        Studying MODX in the desert - http://sottwell.com
                        Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
                        Join the Slack Community - http://modx.org