Devirtuoso » Ajax

Grabbing Content from Other Pages with Ajax and jQuery

Shawn — Mon, 14 Sep 2009 21:48:33 +0000

Sometimes it is useful to grab content from one of your other pages and use it on another. This tutorial will go over how to pull in the other content, and use selectors to get what you want.

What we’re building

Essentially we will be building two pages. One with static HTML. The other with jQuery to steal the content from there and display it on it’s own page. Pretty cool stuff. It is just standard Ajax, but with one cool feature, it allows you to select what you pull from the site using selectors. If you haven’t used Ajax with jQuery before I recommend you checking out the Beginners Guide to Using Ajax with jQuery.

Download Example

The HTML page

First we’ll create a simple HTML page. I’m just going to use a header and an unordered list, just to show you can pick and choose what you want.

Here is the HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

    <head>

        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

        <title>Content Page</title>

    </head>

    <body>

        <h1 id="title">This is a title</h1>

        <ul>

            <li>Web</li>

            <li>jQuery</li>

            <li>Ajax</li>

            <li>HTML</li>

        </ul>

    </body>

</html>

Not much too it huh. This isn’t going to be the page that displays, so really you just have to make sure it has the content you want in here.

The jQuery / Ajax Page

This page is pretty bare as well. We’re just going to have a div that will be are holder, and the jQuery to pull the content from the other page.

Here is the page:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

    <head>

        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

        <title>Ajax and Jquery: Remote Pages</title>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript" charset="utf-8">

        $(document).ready(function(){

            $('#list').load("Content.html ul");

        });

        </script>

    </head>

    <body>

        <h2>Here is the list from the other page:</h2>

        <div id="list"></div>

    </body>

</html>

Basically the load() function does all the work. You pass in the url of the page, and the selector you want to get and it gets the HTML and puts it in the selector that is calling the load function. Just a note, you might run into some caching issues if you have dynamic content, so it might be a good idea to add some unique id at the end of the url; perhaps a random number that you generate. e.g. (htmlPage.html?cacheBuster=1231321)

Server Side Pages

This also handles server side pages. e.g.(PHP, ASP, etc) The beauty of the load function is it has extra arguments you can pass in. It has 3 in total

The page URL / selector
Any Post Data you want to pass to the URL
A Callback function.

So if you pass an object into the second parameter it will send a post variable with those values.

1
2
3
4
5

$('#selector').load("content.html #selector",

    {data:value}, 

    function(){ 

        alert("Callback Function"); 

    });

For example, say we want to get the navigation from a certain page, and index.php loads the navigation based on what a certain post variable might be. This would be a prime example of when you might use the load function over other Ajax functions in jQuery. The ability to use a selector would help a great deal if you needed to pull a needle from a haystack of content.

Conclusion

More than likely this function isn’t going to be used everyday, but it’s good to keep in mind for those special occasions.

Download Example

Beginners Guide to jQuery Sorting Part 2

Shawn — Thu, 03 Sep 2009 21:56:03 +0000

In the last tutorial we covered how to reorder a list by dragging and dropping. In this tutorial we will show how to save the order of the list via Ajax.

Where We Left Off

We should be at a point where we now know how to reorder a list. If you haven’t read the previous tutorial or aren’t certain on how to reorder lists in jQuery, I encourage you to check out Beginners Guide to jQuery Sorting part 1.

Here is the code from the previous post:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="en">

<head>

    <title>jQuery UI Sortable - Drop placeholder</title>

    <style type="text/css">

        body{

            background-color: #111;

            color:white;

            font-family: Arial, "MS Trebuchet", sans-serif;

        }

        #sortable { 

            list-style-type: none; 

            margin: 0; 

            padding: 0; 

            width:300px

        }

        #sortable li { 

            margin: 0 5px 5px 5px; 

            padding: 5px 20px; 

            font-size: 1.2em; 

            height: 1.5em; 

            background-color: #678;

            cursor:pointer;

        }

        #sortable li.highlight { 

            height: 1.5em; 

            line-height: 1.2em;

            background-color: #036;

            background-image: none;

            border:none;

        }

    </style>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>

    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.sortable.js"></script>

    <script type="text/javascript">

    $(function() {

        $("#sortable").sortable({

            placeholder: 'highlight'

        });

        $("#sortable").disableSelection();

    });

    </script>

</head>

<body>

<ul id="sortable">

    <li>Item 1</li>

    <li>Item 2</li>

    <li>Item 3</li>

    <li>Item 4</li>

    <li>Item 5</li>

    <li>Item 6</li>

    <li>Item 7</li>

</ul>

</body>

</html>

What We’re Building

This time around we’re just going to take the current order of the list and save it to the database for future use.

Download Example

Reworking the List

Previously we had a simple HTML un-ordered list. This time we’re going to make it a little more complicated, with good reason of course. In order to view the updates we make to the database, we first have to have a list pulling from the database. For this we will be using PHP and MySQL.

First we’re going to create a file called db.php. In this file we’re going to do two things. First connect to the database, and second select all the items from the database and create a list from them. I’m not going to go into too much detail with the connection info. If you want a little refresher, we went into more depth in our Beginners Guide to Using Ajax with jQuery post.

Here is the PHP code for connecting to the database:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

//Connection Info

$username="root";

$password="";

$host="localhost";

$database = "DragDrop";

//Connect to database

$mysqli =  new mysqli($host, $username, $password, $database);

// check connection 

if (mysqli_connect_errno()) {

    printf("Connect failed: %s\n", mysqli_connect_error());

    exit();

}

?>

I guess at this point it might be helpful to see what the database looks like. We have 3 columns:

itemID (unique identifier),
content (the text inside our list)
Order (keep track of the order)

Now we’ll create a function that selects all the items from the database and outputs an un-ordered list.

Here is the PHP:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

//Display a list of all entries

function displayAll (){

    global $mysqli;

    //Get all Entries

    if ($result = $mysqli->query("SELECT * FROM `Items` ORDER BY `Order` ASC")) {

            //start list

            $returnValue = "";

            while ($row = $result->fetch_array())

            {

                //add a new list item each iteration

                $returnValue .= "])."'>".htmlentities($row['content'])."
";

            }

            //close list

            $returnValue .= "";

            //display list

            echo $returnValue;

        /* free result set */

        $result->close();

    }

}

First we query the database with the mysqli object we created when we connected to the database. If it returns results without errors then we can go ahead with making our list.

Making the list isn’t too hard, we’re simply creating a variable that holds our list. We then cycle through all of the items returned from the database and add it to the end of our variable. After we have all the info in our variable, we display it for the world to see. One special note, you’ll see that we are giving each

an id. We’re going to use this when we get to the Ajax portion of the tutorial. For now just know that the id is required.

The New HTML

Now that we have our db.php file ready to go, we can now make use of it in our main file.

First off we’re going to import the file to use it. At the very top we’ll just put:

1	require("db.php"); ?>

Now we can use the function displayAll() that we just created. We’ll be replacing the un-ordered list with this function. When the page is processed, the function will pull the data from the database and output a brand spankin’ new list. Pretty sweet huh.

1
2
3
4
5
6
7
8
9
10

<body>

//Displays the list.

displayAll();

?>

</body>

The jQuery

The jQuery changed a bit. We’re adding a new update parameter to the sortable function. This will be called whenever the order has been changed.

In the update function we’ll be doing 3 things.

Prepping the info to be sent via Ajax
Send the info via Ajax
Display the new updated list

Here is the jQuery:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

$(function() {

    $("#sortable").sortable({

        placeholder: 'highlight',

        //NEW----Called when order is changed

        update: function() {

            //Prep the list order for transfer

            var listOrder = $(this).sortable("serialize");

            //send info to our php file.

            $.post("update.php", listOrder, function(response){

                //update the list with the new list.

                $("sortable").html(response);

            });

        }

    });

    $("#sortable").disableSelection();

});

Prepping the Info

First thing we tackle is prepping the info by serializing it. This just means that we’re taking the order of the list and preparing them in a way that they can be attached to a url.(e.g. www.domain.com?serialized=data ) For this serialize function to work we have to create ids for our list items in a particular way. If I want an array called “item” then I would give my li tags an id of item_1, item_2, item_3, etc. The serialize function will take the text before the underscore as the array name, and the number after as it’s value. So a list with ids of item_1, item_2 would be serialized to item[]=1&item[]=2 . When we created the function displayAll() we took this into consideration, and put the items ID value from the database after the underscore so we can reference it later.

Send Info

Next comes the Ajax. We’re going to use the post function. We simply have to give it a url, any data we want to send to the url and the function we want to call when we receive something back from the url.

Display New List

The function that handles the response simply just switches out the list’s HTML with the new HTML.

Updating the Database

The first thing we’re going to do is create a file called update.php. This is the file that will be called by the Ajax. In this file a couple of things are going to happen.

Get the array sent in by the Ajax
Cycle through each item in the array
Update the database with the new value
Display a new list

Here is the PHP:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

//Get the Array from Ajax

//Make sure it is an array.

if (is_array($_POST['item'])){

    $items = $_POST['item']; 

}else{

    $items = "";

}

if ($items != ""){

//Connect to database.

require 'db.php';  

    //Cycle through Array.

    for ($i=0; $i < count($items); $i++) { 

        //Make sure the value of the item is numeric.

        if (is_numeric($items[$i])){

            $id = $items[$i];

        }else{

            die("Invalid ID");

        }

        //Set the database order to match the order of the array.

        $query = "UPDATE `Items` SET `Order` = " . $i . " WHERE `itemID` = " . $items[$i];

        $mysqli->query($query) or die('Error, insert query failed');

    }

    /* Display a new list */

    if ($result = $mysqli->query("SELECT * FROM `Items` ORDER BY `Order` ASC")) {

            $returnValue = "";

            while ($row = $result->fetch_array())

            {

                $returnValue .= "])."'>".htmlentities($row['content'])."
";

            }

            echo $returnValue;

        /* free result set */

        $result->close();

    }

}

?>

Get the Array from Ajax

Since we used the post method in our jQuery, PHP’s $_POST variable will be populated by what we pasted in. In our case it was the item array. It’s always good practice to make sure you’ll be receiving what you’re expecting. In this case we’re expecting an array, so we check and make sure it is an array.

Cycle through the Array

After we’re sure we have an array on our hands, we cycle through each element in the array. For each element we’re going to check and make sure the value is a number. If we didn’t malicious users could pass in some harmful stuff.

Update the Database

After we have verified that array’s value is a number, we then pass it into our SQL statement. The array is ordered in the same manner as the list was. So the first item in the array is also the first item in the list. The SQL will then set the Order of the item to where it is in the array.

Display a New List

The code for this is pretty well the same as displayAll(). The only difference is that we’re leaving the

off, as these will already be in place, and we’re just replacing the innards.

That’s IT

That’s pretty well it. Now we have our initial code that display’s our list. Then our jQuery that passes on the order of the list via AJAX. Then our update PHP file that checks to make sure the values are good, and passes them to the database. After all that it passes the new list back to the jQuery to display. Voila!

db.php :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

//Connection Info

$username="root";

$password="";

$host="localhost";

$database = "DragDrop";

//Connect to database

$mysqli =  new mysqli($host, $username, $password, $database);

// check connection 

if (mysqli_connect_errno()) {

    printf("Connect failed: %s\n", mysqli_connect_error());

    exit();

}

//Display a list of all entries

function displayAll (){

    global $mysqli;

    //Get all Entries

    if ($result = $mysqli->query("SELECT * FROM `Items` ORDER BY `Order` ASC")) {

            //start list

            $returnValue = "";

            while ($row = $result->fetch_array())

            {

                //add a new list item each iteration

                $returnValue .= "])."'>".htmlentities($row['content'])."
";

            }

            //close list

            $returnValue .= "";

            //display list

            echo $returnValue;

        /* free result set */

        $result->close();

    }

}

?>

Here is the HTML / jQuery / PHP:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

("db.php"); ?>

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="en">

<head>

    <title>jQuery UI Sortable - Drop placeholder</title>

    <style type="text/css">

        body{

            background-color: #111;

            color:white;

            font-family: Arial, "MS Trebuchet", sans-serif;

        }

        #sortable { 

            list-style-type: none; 

            margin: 0; 

            padding: 0; 

            width:300px

        }

        #sortable li { 

            margin: 0 5px 5px 5px; 

            padding: 5px 20px; 

            font-size: 1.2em; 

            height: 1.5em; 

            background-color: #678;

            cursor:pointer;

        }

        #sortable li.highlight { 

            height: 1.5em; 

            line-height: 1.2em;

            background-color: #036;

            background-image: none;

            border:none;

        }

    </style>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>

    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.sortable.js"></script>

    <script type="text/javascript">

    $(function() {

        $("#sortable").sortable({

            placeholder: 'highlight',

            //NEW----Called when order is changed

            update: function() {

                //Prep the list order for transfer

                var listOrder = $(this).sortable("serialize");

                //send info to our php file.

                $.post("update.php", listOrder, function(response){

                    //update the list with the new list.

                    $("sortable").html(response);

                });

            }

        });

        $("#sortable").disableSelection();

    });

    </script>

</head>

<body>

//Displays the list.

displayAll();

?>

</body>

</html>

update.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

//Get the Array from Ajax

//Make sure it is an array.

if (is_array($_POST['item'])){

    $items = $_POST['item']; 

}else{

    $items = "";

}

if ($items != ""){

//Connect to database.

require 'db.php';  

    //Cycle through Array.

    for ($i=0; $i < count($items); $i++) { 

        //Make sure the value of the item is numeric.

        if (is_numeric($items[$i])){

            $id = $items[$i];

        }else{

            die("Invalid ID");

        }

        //Set the database order to match the order of the array.

        $query = "UPDATE `Items` SET `Order` = " . $i . " WHERE `itemID` = " . $items[$i];

        $mysqli->query($query) or die('Error, insert query failed');

    }

    /* Display a new list */

    if ($result = $mysqli->query("SELECT * FROM `Items` ORDER BY `Order` ASC")) {

            $returnValue = "";

            while ($row = $result->fetch_array())

            {

                $returnValue .= "])."'>".htmlentities($row['content'])."
";

            }

            echo $returnValue;

        /* free result set */

        $result->close();

    }

}

?>

Download Example

Beginners Guide to Using AJAX with jQuery

Shawn — Thu, 30 Jul 2009 03:09:35 +0000

AJAX offers users a seamless way to work with your interface, no waiting for whole pages to load. jQuery has a set of tools to make it super simple to implement. We will walk you through how to use jQuery to connect to PHP so you can step up your user interface.

What is AJAX

AJAX is a short hand for asynchronous JavaScript and XML. Which plainly means that instead of waiting for the whole page to load, you can load only what you need to. So if you only need to update one small text part of your site, you don’t have to worry about loading everything else on that page. A vast majority of sites use this technology now. Probably one of the most popular uses is an auto complete feature for the search box at Google and Yahoo.

What We Will Be Building

There are several things that we could build, but we’re just going to keep it simple for this example. We’re going to create a simple text field that when you type in anything it gets sent to the server via jQuery. In return the server will append some text and send it back to jQuery.

Download Example

Getting Start

The HTML is pretty simple. We just need an input text and a div with an id so jQuery can input the text when it gets it back from the server. We’ll also need to import the jQuery library.

Here is the HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title>Ajax With Jquery</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

    <label for="txtValue">Enter a value : </label>

    <input type="text" name="txtValue" value="" id="txtValue">

    <div id="display"></div>

</body>

</html>

The jQuery

Now we have the framework down we can get started on the jQuery. The first thing we are going to do is create a key up event for our input text box once the page loads. Once a user types a character in the text box it will call a function that handles the AJAX.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

//When Page Loads....

$(document).ready(function(){

    // When the user finishes typing 

    // a character in the text box...

    $('#txtValue').keyup(function(){

        // Call the function to handle the AJAX.

        // Pass the value of the text box to the function.

        sendValue($(this).val());   

    }); 

});

Now here is the magic. We’re going to create the function that handles the AJAX. The function will have one argument; this will be the text from the text box. There are several ways to use AJAX with jQuery. We are going to use the post method, but I encourage you to have a look on jQuery’s website to check out the other methods. We’ll be using 4 arguments with the post method, but only the first one is required.

Post Method Arguments:

Your file on the server, in our case, a PHP file.
The values you want to pass to the server. These will be sent using the POST request.
The function that is called when the server responds. In our case this is where we use jQuery to populate the div with the info we got back from the server.
This is how the data will be organized. In our case we’ll be using JSON.

Here is the jQuery AJAX Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// Function to handle ajax.

function sendValue(str){

    // post(file, data, callback, type); (only "file" is required)

    $.post(

    "ajax.php", //Ajax file

    { sendValue: str },  // create an object will all values

    //function that is called when server returns a value.

    function(data){

        $('#display').html(data.returnValue);

    }, 

    //How you want the data formated when it is returned from the server.

    "json"

    );

}

The PHP

There isn’t much to the PHP file. We simply get the POST variables, make sure our output is JSON encoded, then output what we want to return to our jQuery.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

 
//Get Post Variables. The name is the same as 

//what was in the object that was sent in the jQuery

if (isset($_POST['sendValue'])){

    $value = $_POST['sendValue'];   

}else{

    $value = "";

}

//Because we want to use json, we have to place things in an array and encode it for json.

//This will give us a nice javascript object on the front side.

echo json_encode(array("returnValue"=>"This is returned from PHP : ".$value));  

?>

Bringing it All Together

That wasn’t all the difficult was it. This is the beginning of making a auto complete search box. The biggest thing you would have to do to finish it is adjust the PHP so it searches your data, and outputs the appropriate results. Perhaps in another tutorial we’ll handle that. For now here is the code all together:

HTML / jQuery :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title>Ajax With Jquery</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript" charset="utf-8">

        $(document).ready(function(){

            $('#txtValue').keyup(function(){

                sendValue($(this).val());   

            }); 

        });

        function sendValue(str){

            $.post("ajax.php",{ sendValue: str },

            function(data){

                $('#display').html(data.returnValue);

            }, "json");

        }

    </script>

</head>

<body>

    <label for="txtValue">Enter a value : </label>

    <input type="text" name="txtValue" value="" id="txtValue">

    <div id="display"></div>

</body>

</html>

PHP :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

 
//Get Post Variables. The name is the same as 

//what was in the object that was sent in the jQuery

if (isset($_POST['sendValue'])){

    $value = $_POST['sendValue'];   

}else{

    $value = "";

}

//Because we want to use json, we have to place things in an array and encode it for json.

//This will give us a nice javascript object on the front side.

echo json_encode(array("returnValue"=>"This is returned from PHP : ".$value));  

?>

Download Example

Fancy Upload : Powerful and Elegant Ajax uploader

Shawn — Thu, 07 May 2009 23:59:56 +0000

Fancy Uploads has released a new version of their Ajax uploader. A must have for dealing with multiple uploads. This new version has some really nice features.

For those who haven’t used Fancy Uploads before it uses Mootools with the help of the class Swiff to create a platform independent way to upload multiple files at once. There is a handy queue and progress bar, and is completely styleable via CSS and XHTML .

Here are a couple of examples:

The API is very flexible, offers lots of options & very well-documented.

Website: http://digitarald.de/project/fancyupload/
Download: https://github.com/digitarald/digitarald-fancyupload