Learning JS / jQuery For XF Addon Development

TheBigK · Apr 3, 2015

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!

Jaxel · Apr 3, 2015

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.

TheBigK · Apr 4, 2015

Jaxel said:
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.

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.

Jaxel · Apr 4, 2015

TheBigK said:
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.

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 · Apr 4, 2015

Jaxel said:
I know NOTHING about JS... everything I know is jQuery.

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.

Jake Bunce · Apr 8, 2015

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:

Code:

<!DOCTYPE html>
<html>
<head>
  <title>PAGE TITLE</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function(){
      $('#myTable').click(function(){
        alert('hello world');
      });
    });
  </script>
</head>

<body>
  <table id="myTable">
    <tr>
      <td>
        blah blah blah
      </td>
    </tr>
  </table>
</body>
</html>

To start with jQuery you need to be comfortable with CSS selectors:

http://www.w3schools.com/cssref/css_selectors.asp
> 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 $():

Rich (BB code):

$('#myTable')

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:

Rich (BB code):

$('#myTable').click(function(){
  alert('hello world');
});

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

Rich (BB code):

$('#myTable').click(function(){
  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.

Learning JS / jQuery For XF Addon Development

TheBigK

Well-known member

Jaxel

Well-known member

TheBigK

Well-known member

Jaxel

Well-known member

TheBigK

Well-known member

Jake Bunce

Well-known member

Similar threads

We value your privacy