XenForo AJAX Tutorial

[Kier]

Last week, I promised to do a tutorial for add-on developers, in which I would explain how to use some of XenForo's AJAX facilities.

I thought a video would make a good vehicle for this tutorial, as it makes the subject a little more accessible for non-developers who are interested in the system, and the first parts of it are now ready.

In this video, we look at the XenForo Overlay system, and how to get content loaded into overlays, and then we investigate how to load other pages into the current page with AJAX, including any extra CSS they may reference.

Further parts of this tutorial will follow.

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

http://vimeo.com/16893821Or view on Vimeo.com

 

[Kier]

In this second part of the AJAX developer demo, I show you how to override the standard behaviour of XenForo's View layer when making a JSON request, how to have it return raw JSON data without a template, and then give an illustration of how to work with the returned data in JavaScript.

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

Or view on Vimeo.com

 

[Kier]

This third part of the video series shows how to work with input from forms, how to submit them with AJAX and how to work with their output.

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

http://vimeo.com/17086181Or view on Vimeo

 

[Kier]

This is not strictly related, but I've just released an add-on with an accompanying video that goes all the way with its demonstration of how to work with AJAX-submitted forms and how to get them to return the data you want.

http://xenforo.com/community/threads/scratchpad-demonstration-ajax-add-on.8369/

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

http://vimeo.com/17132298Or view on Vimeo

 

[Paul B]

Very nice.
I shall be making use of that functionality.

"Step 2 is to admit that I Lied"
How did I know that was coming

 

[---MAD---]

Excellent video, very informative.

 

[Jeremy]

I love your videos, and will watch this when I get back to my room... (I'm surrounded by a bunch of people who wouldn't be happy if I started to watch a video... haha)

 

[bambua]

Awesome functionality, I'll be using this for sure in a mod I have coming.

 

[JulianD]

Amazing functionality! Thank you Kier!

 

[Hornstar]

These videos never play for me on this site through FF, however they play from the uploaded site in FF fine http://vimeo.com/16893821

Anyway thanks for this great video

 

[Trent Gillespie]

Absolutely brilliant.

 

[ragtek]

These videos never play for me on this site through FF, however they play from the uploaded site in FF fine http://vimeo.com/16893821

Anyway thanks for this great video

For me it also not plays from there

I really really hope, that we will have a real documentation.
It's nice but really hard to read nonstop the existing code if you want to know how something is working

 

[Jeremy]

Kier... just... wow. I can't believe it was THAT easy to do an AJAX insertion. I was ready for a Step 2 to be hard javascript. I'm pretty sure even I could do that! Question tho, your append has a border around the content. Is it possible for us to write our template in such a way that that doesn't occur?

 

[RickM]

Ahh great! Just started on my second custom mod and will be needing this

Cheers Kier - really glad to see you've not gone potty prepping for the IB lawsuit!

 

[Kier]

you've not gone potty prepping for the IB lawsuit!

You should see the outtakes... :/

 

[Kier]

Question tho, your append has a border around the content. Is it possible for us to write our template in such a way that that doesn't occur?

My insert has a hard border because the content being inserted had class="sectionMain". There's nothing to say that it has to have that, or any other class - the styling of the inserted content is entirely at your discretion.

 

[Jeremy]

That's definitely good to know. It should make XenForo's add-on's 20x nicer to use, because let me tell you, without this, you'd never have gotten something like this if I programmed it.

 

[marioman]

wow
can i use it with images ?
if i need to display many images in page as thumbnail
and when user click in image it displayed in this black window ( that used in contact us example )
i mean something like slideshow

hum, i can make the link of every image have query string like
http://xenforo.com/community/images.php?imgid=222

and the template get $imgid and display it

good idea

 

[Kier]

wow
can i use it with images ?

If you can build a page with it, you can display it in an overlay. That's a fundamental ability of XenForo, and one that we are very proud of

 

[Jamie]

I am not a coder and I am amazed that the thought you guys are putting into this system!

You make me want to learn how to code!

Jamie