PHP Ajax Cookbook

In this task, we will use the jQuery UI library as well. We can either include the jQuery UI library from http://jqueryui.com/download or from some CDN. Then we will create a folder for our little project, let's say packt1. There will be more folders in our packt1 folder; these are ajax folders for our HTML files loaded via AJAX, CSS for our styles, and js for our JavaScript libraries.

The folder structure will look like the following:

Packt1/
  ajax/
    content1.html
    content2.html
    content3-broken.php
    items.html
  css/ - all stylesheets
  js/
    ui/ - all jQuery UI resources
    jquery-1.4.4.js
  index.html

How to do it...

Since everything is set, we are ready to start.

We will start with basic HTML layout and content. This part already includes a link to our CSS given from the jQuery UI library. We can save it as index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ajax using jQuery</title>

  <link href="css/ui-lightness/jquery-ui.custom.css" 
    rel="stylesheet" />
</head>
<body>

<div class="demo">
  <div id="tabs">
    <ul>
      <li><a href="#tabs-1">Home</a></li>
      <li><a href="ajax/content1.html">Books</a></li>
      <li><a href="ajax/content2.html">FAQ</a></li>
      <li><a href="ajax/content3-broken.php"> 
        Contact(broken) </a>
      </li>
    </ul>
    <div id="tabs-1">
      This content is preloaded.
    </div>
  </div>
</div>
</body>
</html>

Now we will add JavaScript libraries and their functionality:

<script src="js/jquery-1.4.4.js"></script>
<script src="js/ui/jquery-ui.min.js"></script>
<script>
$(function() {
  $("#tabs").tabs({
    ajaxOptions: {
      success: function(){
        $("#slider").slider({
          range: true,
          min: 1,
          max: 10,
            values: [1,10],
          slide: function( event, ui ) {
            $("#amount").val(ui.values[0] + " to " +   
              ui.values[1]);
            },
          change: function(event, ui) {
          var start = ui.values[0];
          var end 	= ui.values[1];
            $('#result').html('');
            for(var i = start; i <= end; i++){
              var $item = $('<h3></h3>');
              $item
                .load('ajax/items.html #item-'+i);
                 .appendTo($('#result'));
            }          }
        });
      },
      error: function(xhr, status, index, anchor) {
        $(anchor.hash).html(
          "Couldn't load this tab. We'll try to fix
            this as soon as possible. " +
          "If this wouldn't be a demo." );
      }
    }
  });
});
</script>

Our index.html page is ready and we can create files that are going be loaded in our page via AJAX.
The first page will be ajax/content1.html. This page will contain a slider with extra functionality, which will be described later.
```
<h2>Slider</h2>
<p> 
  <label for="amount">Displaying items:</label> 
  <input type="text" id="amount" style="border:0; 
color:#f6931f; font-weight:bold;" value="none" /> 
</p> 
<div id="slider"></div>
<div id="result"></div>
```

The second page will be ajax/content2.html:

<p><strong>This tab was loaded using ajax.</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec turpis justo, et facilisis ligula.</p>

And the last file in our AJAX folder will be items.html:

<div id="item-1">Item 1</div>
<div id="item-2">Item 2</div>
<div id="item-3">Item 3</div>
<div id="item-4">Item 4</div>
<div id="item-5">Item 5</div> <div id="item-6">Item 6</div>
<div id="item-7">Item 7</div>
<div id="item-8">Item 8</div>
<div id="item-9">Item 9</div>
<div id="item-10">Item 10</div>

Now, as shown in the following screenshot, we have a multi-functional page with four tabs. Three of them are loaded via Ajax and one of them contains a slider. This slider has an extra functionality and every change loads a selected number of items.

How it works...

From the beginning, we started with a simple tab layout with four tabs, using the jQuery UI library. One of them (#tabs-1) was included directly in the index.html file. The jQuery UI library allows us to define ajaxOptions, so that we can load our content via AJAX. The navigation where we find the required content is preceeded by the href attribute of each hyperlink. If this target does not exist, the error method is triggered.

We wanted to have a functional slider on our second tab (named Books). To make it work, we can't initialize it in the $(document).ready() function, because its HTML content hasn't been created yet. We will add slider initialization only when we need it in the success method.

After each change of slider the load() function is triggered. This function loads the content of the given target via AJAX. In our case, we use a more specific selector with the exact ID of the object, which is displayed in our result box.

There's more...

In this task we were using only the basic function load(), but jQuery offers more AJAX methods, as shown in the following table:

`$.` `ajax`	Performs an Ajax request
`jQuery.post()`	Loads data from the server using HTTP POST request
`jQuery.get()`	Loads data from the server using HTTP GET request
`jQuery.getJSON()`	Loads JSON data from the server using HTTP GET request
`jQuery.getScript()`	Loads and executes a JavaScript file from the server using HTTP GET request

PHP Ajax Cookbook

PHP Ajax Cookbook

Overview of this book

Related Content you might be interested in

Current Title:

PHP Ajax Cookbook

Loading dynamic content using jQuery slider

Getting ready

How to do it...

How it works...

There's more...

See also