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

Learning JS / jQuery For XF Addon Development

Discussion in 'Off Topic' started by TheBigK, Apr 3, 2015.

  1. TheBigK

    TheBigK Well-Known Member

    I'm learning XF addon development and have made satisfactory progress so far. I can now write very simple addons and understand most of the written code from other addons. I'm however stuck with the JS/jQuery part.

    Do you have any suggestions on how should I go about learning the JS/jQuery in XF? I've tried to go through Kier's tutorials; but it looks like I'll need some more time to be able to understand those tutorials. I've began taking jQuery tutorials and now understand bits of jQuery; still a long way to go.

    Would really appreciate your suggestions. Thanks!
  2. Jaxel

    Jaxel Well-Known Member

    There is actually very little in the XF JS that is it's own framework like how the PHP is... Its only the launching and data manipulation. Everything is is pretty much straight jQuery.
  3. TheBigK

    TheBigK Well-Known Member

    Thanks, Jason. Yeah, what I've explored so far indicates the same. I'm however not sure if I'd need JS knowledge to be able to figure out jQuery. I'm looking for ways to get started.
  4. Jaxel

    Jaxel Well-Known Member

    I know NOTHING about JS... everything I know is jQuery.

    I couldn't write an AJAX prototype if you put a gun to my head.
    TheBigK likes this.
  5. TheBigK

    TheBigK Well-Known Member

    Interesting! Any pointers on how to get started or which addons should I study to understand the basics of how XF uses it?

    The ones in the tutorials section seem to be aimed at those who know how to use jQuery. But that could just be me.
  6. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    It's always good to start with an example. jQuery is commonly used for binds and DOM manipulation. Here is a 'hello world' page I made for some one once which demonstrates binding a click action to a table:

    <!DOCTYPE html>
      <title>PAGE TITLE</title>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <script type="text/javascript">
            alert('hello world');
      <table id="myTable">
            blah blah blah
    To start with jQuery you need to be comfortable with CSS selectors:

    > http://www.w3schools.com/cssref/trysel.asp

    For example, in the previous code you will see the #myTable selector used inside of the jQuery object $():

    This selects that table and gives you access to jQuery functions to be performed on that table, such as the click bind in the previous code:

      alert('hello world');
    And here is an example of DOM manipulation (you can modify the previous code to try this):

      alert('hello world');
      $('#myTable tr:first-child').clone().appendTo('#myTable');
    This uses a CSS selector to select the first row of the table. Then it calls jQuery's clone() function to copy the row, then it calls appendTo() to append the new row back to the table. This also demonstrates how jQuery calls are often chained together to perform multiple operations on the same element.

    Once you are comfortable with these basics then you can consult Google for help with most jQuery functions.

Share This Page