1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XenForo AJAX Tutorial

Discussion in 'Official Development Tutorials and Resources' started by Kier, Nov 16, 2010.

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

    Or view on Vimeo.com
    Hoffi, Geca, Valhalla and 44 others like this.
  2. Kier

    Kier XenForo Developer Staff Member

    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.

    Or view on Vimeo.com
    Hoffi, bart, sonnb and 10 others like this.
  3. Kier

    Kier XenForo Developer Staff Member

    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.

    Or view on Vimeo
    Minh-nv, Hoffi, bart and 8 others like this.
  4. Kier

    Kier XenForo Developer Staff Member

  5. Brogan

    Brogan XenForo Moderator Staff Member

    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 :D
    Dan and Jeremy like this.
  6. ---MAD---

    ---MAD--- Well-Known Member

    Excellent video, very informative.
  7. Jeremy

    Jeremy Well-Known Member

    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)
  8. bambua

    bambua Well-Known Member

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

    JulianD Well-Known Member

    Amazing functionality! Thank you Kier!
  10. Hornstar

    Hornstar Well-Known Member

    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 :)
    dieketzer and Darkimmortal like this.
  11. Trent Gillespie

    Trent Gillespie Active Member

    Absolutely brilliant.
    Kier likes this.
  12. ragtek

    ragtek Guest

    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:(
  13. Jeremy

    Jeremy Well-Known Member

    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?
  14. RickM

    RickM Well-Known Member

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

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

    Kier XenForo Developer Staff Member

    You should see the outtakes... :/
    RickM, Floris and Jeremy like this.
  16. Kier

    Kier XenForo Developer Staff Member

    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 likes this.
  17. Jeremy

    Jeremy Well-Known Member

    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.
  18. marioman

    marioman Active Member

    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

    and the template get $imgid and display it

    good idea
  19. Kier

    Kier XenForo Developer Staff Member

    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 :)
  20. Jamie

    Jamie Well-Known Member

    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!


Share This Page