PHP Tutorial

Step 12

PHP Tutorial

In this tutorial we will create a simple twitter copycat. In step 12 we will add jQuery magic to our site.

Step 12

1. What is jQuery?

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.


2. First we must add the jquery lib to our project. The easiest way is to use the jQuery CDN (Content Delivery Network) directly. Just add the following line to your header.tpl file:

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

3. Our javascript code will be located in a separate file (main.js) in a javascript folder. Create that file and then import it in the header.tpl file (after the jQuery import):

<script src="{$BASE_URL}javascript/main.js"></script>

4. We want our code to be executed after the document is loaded and ready for manipulation. To do this we must intercept the jQuery event that tells us that the document is ready.

The $ function acts as a selector. The special selector $(document) select the HTML document. The ready event is triggered when the document is ready. To capture the ready event we use the following code (in main.js):

$(document).ready(function() {

});

As you can see, we selected the document and then called the ready function on it. We also passed to that function, the function we want executed when the event is triggered. All code that we want executed as soon as the document is ready, should be inside that function.


5. Let’s start by adding a close indicator to our success and error messages that closes the messages when clicked.

First we must add the indicator (we’ll also add a close class for convenience) in our header.tpl file:

<section id="messages">
  {if isset($ERROR_MESSAGES)}
    {foreach $ERROR_MESSAGES as $error}
      <div class="error">{$error} <a class="close" href="#">&#215;</a></div>
    {/foreach}
  {/if}
  {if isset($SUCCESS_MESSAGES)}
    {foreach $SUCCESS_MESSAGES as $success}
      <div class="success">{$success} <a class="close" href="#">&#215;</a></div>
    {/foreach}
  {/if}
</section>

And some styling:

#messages .close {
  float: right;
  text-decoration: none;
  color: #333;
}

6. Using the $ selector function we can select elements from the HTML page using CSS selectors (and even more: selector reference). To select the close indicator we use just $(‘.close’).

Add the following code inside the document.ready event:

$(document).ready(function() {
  $('.close').click(function() {
    alert('Close');
  });
});

As you can see, we are now catching the click event in the close indicator. For now we are just using an alert to see if everything is working as expected.


7. To select the message div that is the parent of the close indicator we just clicked, we can use the traversal methods defined in jQuery (traversing reference). In this case we will use the parent method.

We also need to know which close indicator has been clicked. For that we will use the special selector $(this) that indicates which element triggered the event.

Finally, to remove the element from the document, we can use a manipulating function (manipulation reference). In this case, we will use the remove function.

$(document).ready(function() {
  $('.close').click(function() {
    $(this).parent().remove();
  });
});

As you can see, the code is very simple and intuitive.


8. If we want a more subtle effect we could use the fadeOut effect instead (effects reference).

$(document).ready(function() {
  $('.close').click(function() {
    $(this).parent().fadeOut();
  });
});

9. In order to make the code more manageable, we can remove the code from the document.ready event into a separate function:

$(document).ready(function() {
  initMessageClosers();
});

function initMessageClosers() {
  $('.close').click(function() {
    $(this).parent().fadeOut();
  });
}

In step 13 we will do some dynamic loading of tweets using Ajax and JSON.