XenForo AJAX Tutorial

Kier

Kier

XenForo developer
Staff member
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.
http://vimeo.com/16893821Or view on Vimeo.com
 
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.
Or view on Vimeo.com
 
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.
http://vimeo.com/17086181Or view on Vimeo
 
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.
http://vimeo.com/17132298Or view on Vimeo
 
Hornstar said:
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 :)
Click to expand...
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:(
 
King Kovifor said:
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?
Click to expand...
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.
 
You must log in or register to reply here.

Similar threads

tenants
XF 2.3 Tutorials for Xenforo 2.3 Javascript without JQuery (inline editing tutorial)
Replies
4
Views
214
XFA
XFA
L3gacy
Video Tutorials, on the Features of XenForo, and how to use them effectively.
Replies
13
Views
189
L3gacy
L3gacy
USCSS_Nostromo
  • Question Question
XF 2.2 Create your own video tutorial
Replies
0
Views
259
USCSS_Nostromo
USCSS_Nostromo
M
Expand your Youtube tutorial series and docs to cover more of the basic setup and features
2
Replies
27
Views
2K
unproperlypropagated
unproperlypropagated
D
  • Locked
XenForo FR : a french XenForo community
Replies
19
Views
2K
Faust
Faust
Back
Top Bottom