Devirtuoso » Ajax http://www.devirtuoso.com Web Development Wickedness Tue, 24 Jan 2012 17:16:01 +0000 en hourly 1 http://wordpress.org/?v=3.3 Get Users Location With JQuery and Ajax http://www.devirtuoso.com/2010/09/get-users-location-with-jquery-and-ajax/ http://www.devirtuoso.com/2010/09/get-users-location-with-jquery-and-ajax/#comments Thu, 02 Sep 2010 18:29:15 +0000 Shawn http://www.devirtuoso.com/?p=1267 Ever needed to know where your user is from? Ever needed to do it with jQuery / Ajax? Today my friend you are in luck. This article will show you how to get the user’s location using jQuery, Ajax and the users IP.

What are we building?

Our application here isn’t overly complicated. We’re just going to tell our users where they’re from…incase they didn’t know ;)

Download Example

How to do it

We’ll be using a service from ipinfodb.com to get this bad boy off the ground. They offer an api that allows you to pass in an IP and it spits out all the information we need. So all we have to do is tap into this via jQuery and Ajax.

Step 1: Getting the user’s ip address

First thing we need to do is pull in the user’s ip address. We’re just going to use some PHP for this.

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

/**
 * Get users IP address.
 *
 * @return string ip address
 */
function visitorIP()
{
    if(isset($_SERVER['HTTP_X_FORWARDED_FOR'])){
        $TheIp=$_SERVER['HTTP_X_FORWARDED_FOR'];
    }else{
        $TheIp=$_SERVER['REMOTE_ADDR'];  
    }

    return trim($TheIp);
}

$ip = visitorIP();


?>

Step 2: The Ajax

Now that we have the users ip, we can use it in ipinfodb’s api. We’ll just use jquery’s ajax to get the information.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// Build the URL to query...notice the php ip address at the end.
var url = "http://ipinfodb.com/ip_query2.php?output=json&callback=?&ip=<?php echo $ip ?>";

// Utilize the JQuery's JSON function
$.getJSON(url, function(data){
   
    //Make sure it processed it okay.
    if(data.Locations[0].Status == "OK"){
       
        //Parse the JSON
        var location = data.Locations[0]
        var city = location.City;
        var country = location.CountryName;
        var region = location.RegionName
       
        var output = "Your location is: "+ city+ ", "+region+ " "+ country;
       
        //OUTPUT
        $('body').append(output);
    }
   
});

The magic lies in the GET variables passed with the ipinfodb’s url.

output = json – specifies which format we want…in this case JSON

callback=? – this is for a javascript callback. Since we’re using jquery’s callback we gave this a value of ?. Alternatively you could pass in a javascript function name and it would call the function for you.

ip = (ip address) – is the user’s ip that you want to look up the location.

The JSON it returns will look something like:

1
2
3
4
5
6
7
8
9
10
11
12
{
  "Ip" : "74.125.45.100",
  "Status" : "OK",
  "CountryCode" : "US",
  "CountryName" : "United States",
  "RegionCode" : "06",
  "RegionName" : "California",
  "City" : "Mountain View",
  "ZipPostalCode" : "94043",
  "Latitude" : "37.4192",
  "Longitude" : "-122.057"
}

Notice that it include the latitude and longitude. This is particularly handy with google maps ;)

Hopefully this will help you out. I know I’ve used it numerous times. It’s a simple way to personalize your site. Enjoy.

Download Example
]]> http://www.devirtuoso.com/2010/09/get-users-location-with-jquery-and-ajax/feed/ 0 Reading Excel Documents with PHP and Ajax http://www.devirtuoso.com/2010/08/reading-excel-documents-with-php-and-ajax/ http://www.devirtuoso.com/2010/08/reading-excel-documents-with-php-and-ajax/#comments Mon, 16 Aug 2010 20:00:42 +0000 Shawn http://www.devirtuoso.com/?p=1202 Every wanted to display information from an excel document on a website? Ever wanted to do it asynchronously? Today is your lucky day. This article will show you how to load in an excel document using php, jquery and ajax.

What are we building?

We are going to build a page that pulls in each row from you excel document and styles it to our liking. We’ll be doing this by building a php page that spits out json. Then with the magic of jQuery we’ll pull that information in and parse it to our liking.

Download Example

Excel Ajax

Required Tools

We’ll be using a pre-made php class to handle reading of our excel file. The one I used is call php-excel-reader. You’ll also need an excel document to read from. I’ll be using a list of hair salons in Canada….don’t ask, it was for a project I was working on. It has all the contact info for each business. Besides that you should be good to go.

Extending Class to Meet Our Requirements

The php excel reader class isn’t prefect for our needs. We need some sort of method to take each cell and dump it into an array. Also, the class doesn’t handle phone number formatting very well. So what are we going to do? Create our own class and extend the excel reader class with our new methods…fun! Why not just edit the original class? It’s generally bad practice to hack the core. Any mistakes we’ll be making will be contained within our new file.

First thing is first. We need to create our class.

Our Class -> ExcelReader.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
    <?php
        //Load in original excel reader class
        require_once 'excel_reader2.php';
       
        /**
        * Adds Function to excel reader class
        */
        class ExcelReader extends Spreadsheet_Excel_Reader
        {
            /*
                This method will spit out an array
                of all our excel document rows.
            */
            function dumptoarray($sheet=0) {
                # code...
            }
           
            /*
                This method will overwrite a method in
                the Spreadsheet_Excel_Reader.  We will
                add the functionality to handle phone
                number formatting.
            */
            function _format_value($format,$num,$f) {
                # code...
            }
           
        }
    ?>

 

Now on to the method to convert each of the rows into an array.

The dumptoarray method

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    <?php
    function dumptoarray($sheet=0) {
        $array = array();
       
        //Step through each row.
        for($row=1;$row<=$this->rowcount($sheet);$row++) {
           
            //Step through each column
            for($col=1;$col<=$this->colcount($sheet);$col++){
               
                //Add each cell value into the array.
                $array[$row][$col] = htmlentities($this->val($row,$col,$sheet));
               
            }
           
        }

        return $array;
    }
    ?>

 

If you don’t have a phone number formatting in your excel document feel free to skip this. All we’ll be doing is copying the method from the original class, and place in some new code that handles formatting for phone numbers.

Here is the extra code we’ll be placing in the code from the original class.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
  //Handle Phone Numbers
 
  //Check to see if formatting fits (###) ###-####
  $phone_regex = "/\((\d{3})\) (\d{3})-(\d{4})/";
  if (preg_match($phone_regex,$pattern,$matches)) {

    //Puts the number in the cell into the formatting we require.
    $formatted = "(".substr($num,0,3).") ".substr($num,3,3)."-".substr($num,6,4);
   
    //sets pattern for use in class.
    $pattern = preg_replace($phone_regex, $formatted, $pattern);
  }
 
  //set values and exits method.
  return array(
    'string'=>$pattern,
    'formatColor'=>$color
  );
?>

 

So now our method looks something like…

_format_value method

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<?php
  function _format_value($format,$num,$f) {
      // 49==TEXT format
      // http://code.google.com/p/php-excel-reader/issues/detail?id=7
      if ( (!$f && $format=="%s") || ($f==49) || ($format=="GENERAL") ) {
        return array('string'=>$num, 'formatColor'=>null);
      }

      // Custom pattern can be POSITIVE;NEGATIVE;ZERO
      // The "text" option as 4th parameter is not handled
      $parts = split(";",$format);
      $pattern = $parts[0];
      // Negative pattern
      if (count($parts)>2 && $num==0) {
        $pattern = $parts[2];
      }
      // Zero pattern
      if (count($parts)>1 && $num<0) {
        $pattern = $parts[1];
        $num = abs($num);
      }

      $color = "";
      $matches = array();
      $color_regex = "/^\[(BLACK|BLUE|CYAN|GREEN|MAGENTA|RED|WHITE|YELLOW)\]/i";
      if (preg_match($color_regex,$pattern,$matches)) {
        $color = strtolower($matches[1]);
        $pattern = preg_replace($color_regex,"",$pattern);
      }

      // In Excel formats, "_" is used to add spacing, which we can't do in HTML
      $pattern = preg_replace("/_./","",$pattern);

      // Some non-number characters are escaped with \, which we don't need
      $pattern = preg_replace("/\\\/","",$pattern);

      // Some non-number strings are quoted, so we'll get rid of the quotes
      $pattern = preg_replace("/\"/","",$pattern);

      // TEMPORARY - Convert # to 0
      $pattern = preg_replace("/\#/","0",$pattern);

      // Find out if we need comma formatting
      $has_commas = preg_match("/,/",$pattern);
      if ($has_commas) {
        $pattern = preg_replace("/,/","",$pattern);
      }

      // Handle Percentages
      if (preg_match("/\d(\%)([^\%]|$)/",$pattern,$matches)) {
        $num = $num * 100;
        $pattern = preg_replace("/(\d)(\%)([^\%]|$)/","$1%$3",$pattern);
      }


      //Handle Phone Numbers
      $phone_regex = "/\((\d{3})\) (\d{3})-(\d{4})/";
      if (preg_match($phone_regex,$pattern,$matches)) {

        $formatted = "(".substr($num,0,3).") ".substr($num,3,3)."-".substr($num,6,4);

        $pattern = preg_replace($phone_regex, $formatted, $pattern);
      }

      return array(
        'string'=>$pattern,
        'formatColor'=>$color
      );

      // Handle the number itself
      $number_regex = "/(\d+)(\.?)(\d*)/";

      if (preg_match($number_regex,$pattern,$matches)) {
        $left = $matches[1];
        $dec = $matches[2];
        $right = $matches[3];
        if ($has_commas) {
          $formatted = number_format($num,strlen($right));
        }
        else {
          $sprintf_pattern = "%1.".strlen($right)."f";
          $formatted = sprintf($sprintf_pattern, $num);
        }
        $pattern = preg_replace($number_regex, $formatted, $pattern);

      }

      return array(
        'string'=>$pattern,
        'formatColor'=>$color
      );
  }
?>

JSON Our Entries

Now it’s as simple as pulling in our excel file, calling our dumptoarray method and convert it to JSON. The JSON will be read by jQuery and parsed accordingly.

To do all of this, we’ll create the file list.php and place everything in there.

list.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    <?php
    //load in our class we created.
    require_once 'ExcelReader.php';
   
    //Reads our excel document.
    $data = new ExcelReader("entries.xls",false);
   
    //Put our rows into an array.
    $ary = $data->dumptoarray();
   
    //Convert the array in json.
    $json = json_encode($ary);
   
    //display the json.
    print $json;
    ?>

Load in Our JSON via Ajax

Our HTML is going to be pretty simple. We’re just going to have one div with an id=”content” and a title.

Here is the HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
    <title>Excel Reader</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
   
</head>
<body>
    <div id="content">
        <h1 id="excelEntries">Hair Salons in Canada</h1>
    </div> 
</body>
</html>

Our jQuery isn’t overly complicated. We load in the JSON via Ajax, and we just step through each entry and format it accordingly.

The 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
    $.getJSON("list.php",
      function(data){
                var item = data;
                var content = "";
               
                //Loop through each entry.
                for (var i in data) {

                        // data[row][column] references cell from excel document.
                        var name = data[i][1];
                        var address = data[i][2];
                        var city = data[i][3];
                        var province = data[i][4];
                        var postal = data[i][5];
                        var phone = data[i][6];
                   
                    //First row is column headers.
                    if (i > 1){
                       
                        //Format Entry
                        content += "<div class='entry'>"+
                        "<h4> "+name+ "</h4>"+
                        "<strong>Address:</strong> "+address+"<br />"+
                        "<strong>City:</strong> "+city+"<br />"+
                        "<strong>Province:</strong> "+province+"<br />"+
                        "<strong>Postal Code:</strong> "+postal+"<br />"+
                        "<strong>Phone Number:</strong> "+phone+
                        "</div>";
                    }
       
                  };
               
                //Add entry to page.
                $('#content').append(content);
    });

After adding some css, your HTML page should look something like…

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
    <title>Excel Reader</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <style type="text/css" media="screen">

        body{
            font-family: Arial, "MS Trebuchet", sans-serif;
            font-size:.8em;
            color:#333;

        }
        /* Styling Entries */
        .entry{

            background:#efefef;
            padding:10px;
            border:1px solid #ddd;
            line-height:1.5em;
            margin:0 5px 5px 0px;
            width:400px;
            float:left;

            /* Rounded Corners */
            -moz-border-radius:10px;
            -webkit-border-radius:10px;
            -khtml-border-radius:10px;
            border-radius:10px;

            /*Inner shadow */
            -moz-box-shadow: 2px 2px 3px #ddd; /* FF3.5 */
            -webkit-box-shadow: 2px 2px 3px #ddd; /* Saf3.0 , Chrome */
            box-shadow: 2px 2px 3px #ddd; /* Opera 10.5, IE 9.0 */

            /* Gradient */
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#efefef', endColorstr='#dedede'); /* for IE */
            background: -webkit-gradient(linear, left top, left bottom, from(#efefef), to(#dedede)); /* for webkit browsers */
            background: -moz-linear-gradient(top,  #efefef,  #dedede); /* for firefox 3.6+ */


        }

        h4{
            margin:3px 0px;
            font-size:1.5em;
            color:#014A8D;
            text-shadow:0 1px 1px #fff;
        }

    </style>
</head>
<body>

<div id="content">
    <h1 id="excelEntries">Hair Salons in Canada</h1>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    $.getJSON("list.php",
      function(data){
                var item = data;
                var content = "";

                for (var i in data) {

                        // data[row][column] references cell from excel document.
                        var name = data[i][1];
                        var address = data[i][2];
                        var city = data[i][3];
                        var province = data[i][4];
                        var postal = data[i][5];
                        var phone = data[i][6];

                    if (i > 1){

                        content += "<div class='entry'>"+
                        "<h4> "+name+ "</h4>"+
                        "<strong>Address:</strong> "+address+"<br />"+
                        "<strong>City:</strong> "+city+"<br />"+
                        "<strong>Province:</strong> "+province+"<br />"+
                        "<strong>Postal Code:</strong> "+postal+"<br />"+
                        "<strong>Phone Number:</strong> "+phone+
                        "</div>";
                    }

                  };
                $('#content').append(content);
       });
</script>

</body>
</html>

That should be it. Be sure to download all the files and fiddle around with it yourself. Also be sure to read up on the documentation that comes with the excel reader class.

Download Example

 

 

]]> http://www.devirtuoso.com/2010/08/reading-excel-documents-with-php-and-ajax/feed/ 0 Grabbing Content from Other Pages with Ajax and jQuery http://www.devirtuoso.com/2009/09/grabbing-content-from-other-pages-with-ajax-and-jquery/ http://www.devirtuoso.com/2009/09/grabbing-content-from-other-pages-with-ajax-and-jquery/#comments Mon, 14 Sep 2009 21:48:33 +0000 Shawn http://www.devirtuoso.com/?p=1117 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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "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

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

    4. 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

     

    ]]> http://www.devirtuoso.com/2009/09/grabbing-content-from-other-pages-with-ajax-and-jquery/feed/ 4 Beginners Guide to jQuery Sorting Part 2 http://www.devirtuoso.com/2009/09/beginners-guide-to-jquery-sorting-part-2/ http://www.devirtuoso.com/2009/09/beginners-guide-to-jquery-sorting-part-2/#comments Thu, 03 Sep 2009 21:56:03 +0000 Shawn http://www.devirtuoso.com/?p=1040 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
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "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

    image

     

    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
    <?php

    //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)

    database table

     

     

    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 = "<ul id='sortable'>";
               
                while ($row = $result->fetch_array())
                {
                    //add a new list item each iteration
                    $returnValue .= "<li id='item_".htmlentities($row['itemID'])."'>".htmlentities($row['content'])."</li>";
                }
                //close list
                $returnValue .= "<ul>";
               
                //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 <li> 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.

     

    display all function

     

    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
    <?php 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>
    <?php

    //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();
    });

     

    serialize order

     

    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
    <?php

    //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 .= "<li id='item_".htmlentities($row['itemID'])."'>".htmlentities($row['content'])."</li>";
                }
               
                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 <ul></ul> 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
    <?php
    //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 = "<ul id='sortable'>";
               
                while ($row = $result->fetch_array())
                {
                    //add a new list item each iteration
                    $returnValue .= "<li id='item_".htmlentities($row['itemID'])."'>".htmlentities($row['content'])."</li>";
                }
                //close list
                $returnValue .= "<ul>";
               
                //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
    <?php require("db.php"); ?>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "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>
    <?php

    //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
    <?php

    //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 .= "<li id='item_".htmlentities($row['itemID'])."'>".htmlentities($row['content'])."</li>";
                }
               
                echo $returnValue;
       
            /* free result set */
            $result->close();
        }
       
    }


    ?>

     

    Download Example
    ]]>     http://www.devirtuoso.com/2009/09/beginners-guide-to-jquery-sorting-part-2/feed/ 3     Beginners Guide to Using AJAX with jQuery http://www.devirtuoso.com/2009/07/beginners-guide-to-using-ajax-with-jquery/ http://www.devirtuoso.com/2009/07/beginners-guide-to-using-ajax-with-jquery/#comments Thu, 30 Jul 2009 03:09:35 +0000 Shawn http://www.devirtuoso.com/?p=759 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.

    DownloadExample

     

    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
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "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:

    1. Your file on the server, in our case, a PHP file.
    2. The values you want to pass to the server.  These will be sent using the POST request.
    3. 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.
    4. 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
    <?php

    //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
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "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
    <?php

    //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)); 

    ?>

     

    DownloadExample

     

    ]]>     http://www.devirtuoso.com/2009/07/beginners-guide-to-using-ajax-with-jquery/feed/ 12     Fancy Upload : Powerful and Elegant Ajax uploader http://www.devirtuoso.com/2009/05/fancy-upload-powerful-and-elegant-ajax-uploader/ http://www.devirtuoso.com/2009/05/fancy-upload-powerful-and-elegant-ajax-uploader/#comments Thu, 07 May 2009 23:59:56 +0000 Shawn http://www.imageref.com/?p=4 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

    ]]>     http://www.devirtuoso.com/2009/05/fancy-upload-powerful-and-elegant-ajax-uploader/feed/ 1