[Tutorial] Cross-Context AJAX Login (The Easy Way)

22 Posts

vzhilov Reply #11, 14 years, 1 month ago

Hureyaaa! Everything is working now! Thank you for all the references and your tutorials. I will have to read them again now to understand the principals as prior to that I was mainly cutting and pasting but I would need to understand how to make the ajax avatar appear and other info, but that's a next step. Thank you very much again.

483 Posts

Fuzzical Logic Reply #12, 14 years, 1 month ago

You're welcome. I trust everything is working for you? If any of my Plugins are not doing the job you need, let me know. I'm treating these as if they were a "package", so I'm supporting them as best as I can.

Also, there will be an Explanation of Code for every Tutorial (including my future ones). These will help explain the concepts.

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

22 Posts

vzhilov Reply #13, 14 years, 1 month ago

Ok, I will do that. Just another question, if you please. There is one more button (link) on the Login form which is "Forgot Password?" In order to implement that in ajax following your examples one would need to create a separate resouce with {{!ForgotPassword}} snippet and then add "onclick" event on the "ForgotPassword" button, is that correct? How the "onclick" will looks like in this case?

22 Posts

vzhilov Reply #14, 14 years, 1 month ago

I have figured that out:

onclick="$.ajax({ type:'GET', url:'/forgotpassword/',
                success:function(data)  { $('#AjaxLogin').html(data);}, error:function(XMLHttpRequest, textStatus, errorThrown) { $('#AjaxLogin').html(errorThrown + ': ' + this.url); }, dataType:'html' });"

☆ A M B ☆
24,524 Posts

sottwell Reply #15, 14 years, 1 month ago

That's not very "unobtrusive". It would be better to separate your content from its behavior by using the button's ID selector in a bit of javascript instead.

<script>
$("#forgotpassword").click(function(event) {
    ...
    ...
    event.preventDefault();
});
</script>

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

483 Posts

Fuzzical Logic Reply #16, 14 years, 1 month ago

@vzhilov:

Yup. That's all you have to do. Generally pretty easy from here on out.

Now, a note: @sottwell is correct. In general, you want to make a separate function. There are reasons why this was not explained in the tutorial, but her code is a great example of unobtrusive javascript. You could add the script element on the same page as the [Login]. I would think on this.

Otherwise, you go it down. Since Login does not require params, you can avoid using "ajax" in the URL. If you required params, you could either use "?&param1=value1" or "/ajax/value1/value2" or a combination of both ("/ajax/value1/value2?&param3=value3") [ed. note: fuzzicallogic last edited this post 14 years, 1 month ago.]

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

22 Posts

vzhilov Reply #17, 14 years ago

I have now got the Login Form down and into the Contact Form. My idea is to make a small contact form at the sidebar which disapears after the submitting and shows a little thanking message and a link to open the form again.

So using your plugin and following your examples I put the submision form in a separate chunk and made a separate resouce with that chunk with your Alias-Site template.

On the form button, similarly to the Login example, I put:

<div class="button"><a href="#" class="ajax_link" onclick="$.ajax({ type:'GET', url:'/[[~[[*id]]]]',
data:$('.BookingForm').serialize(), success:function(data) { $('#BookingForm').html('Thank you for your massage'); }, error:function(error) {$('#BookingForm').html(error); }, dataType:'html'});return false;" name="Booking_form" value="[[+actionMsg]]"><img src="assets/templates/hotel01/html/images/button.gif" alt="" width="134" height="21"></a></div>

The "Thank you for the message" overwrites the form and showup correctly. I would like now to get a link which could open the form again. I suppose I would need to create another resouce which I can then post into the form div after the form is submitted but how I can get that second resource in the button script above instead of the thanking message?

The same thing I'm stuck on trying to put a link to switch from Forgot Password form back into Login Form. [ed. note: vzhilov last edited this post 14 years ago.]

483 Posts

Fuzzical Logic Reply #18, 14 years ago

You can place scripts in subsequent resources all using the same "CSS Selector". So in your "Thank you" message, add a link with another "onClick" event that will grab the page for the original. It will work just fine. This allows you to "chain" AJAX pages together. You simply are replacing a submit button with a link. Then the link with the form again.

Note: It doesn't need to be a Alias (Site). AJAX will work without it. Alias Site is for Resources that must be accessible to all Contexts. You can simply use the AJAX template from the Framework tutorial if it is not Cross Context.

Final Note: I just turned the AJAX Framework into a MODx Extra yesterday and am working out the installation kinks today. There will be additional useful prebuilt stuffs in there,, such as a LazyLoader Chunk. All of these are becoming Extras,as a matter of fact, but I'm starting with the initial AJAX as this seems like it would be the most beneficial.

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

22 Posts

vzhilov Reply #19, 14 years ago

Thank you. Yes, it will be great to see your extra indeed!

How do I call the second resource from the link? Something like:

<div class="button"><a href="#" class="ajax_link" onclick="$.ajax({ type:'GET', url:'/[[~[[*id]]]]',
data:$('.BookingForm').serialize(), success:function(data) { $('#BookingForm').html('[[~9]]'); ...

Unfortunatelly, it doesn't really do anything.

483 Posts

Fuzzical Logic Reply #20, 14 years ago

Is this published or in a place I could get to? I would need to actually see it to know what is happening. AJAX is strange in that it changes what is contained in the HTML. This means that without seeing it happen, it is hard for me to visualize.

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