JQuery Video Tutorial Pt 7

Learn AjaxIn this part of the JQuery Video Tutorial I will show you how to retrieve information from your server dynamically. It is amazingly easy to implement AJAX concepts using JQuery.

By the end of this tutorial you’ll be able to retrieve plain text and XML. You’ll also be able to access PHP code that can access databases, or any other type of information on your server. And, yes this works dynamically!

If you need the JQuery library you can get it here JQuery. If you missed my previous tutorials on JQuery, they begin here JQuery Video Tutorial.

All of the code used, follows the video. You can use it however you would like. Leave questions and comments below.

Code From the Video

JQueryEx12.html

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”

“http://www.w3.org/TR/html4/loose.dtd”>

<head>

<title>JQuery Example</title>

<script type=”text/javascript” src=”http://code.jquery.com/jquery-latest.js”></script>

<script type=”text/javascript”>

$(“document”).ready(function() {

// Bind click events on buttons to trigger specified functions

$(‘#oneButton’).bind(‘click’,getInfoFromServer);

$(‘#twoButton’).bind(‘click’,getDblFromServer);

$(‘#threeButton’).bind(‘click’,getXmlFromServer);

});

// Pull text from a text file on the server

// Type defines the type of request to make being GET or POST

// Success defines the function to call if the request succeeds

// Error could be defined to specify the function to call if an error happens

function getInfoFromServer() {

$.ajax({

type: “GET”,

url: “textFromServer.txt”,

success: postToPage});

}

// Function called to display the message from the server

// Receives the text and the server status

function postToPage(data, status) {

$(‘#first’).text(data);

}

// Load a value into a span

// I define that the program getDouble.php should be executed

// getDouble is sent the information in the form and then it stores the returned // info in the span

function getDblFromServer() {

$(“span”).load(“getDouble.php”,

$(“#theForm”).serializeArray());

}

// Here I define that I’m receiving xml data from the server

function getXmlFromServer() {

$.ajax({

type: “GET”,

url: “customers.xml”,

datatype: “xml”,

success: postToPageTwo});

}

// I use the find method to search through the xml data

// When I match for any of these attributes I append them to the div named

// customers

function postToPageTwo(data) {

$(data).find(‘customer’).each(function(){

var id = $(this).attr(‘id’);

var firstName = $(this).find(‘firstName’).text();

var lastName = $(this).find(‘lastName’).text();

var street = $(this).find(‘street’).text();

var city = $(this).find(‘city’).text();

var zip = $(this).find(‘zip’).text();

$(‘<div class=”firstname”></div>’).html(firstName).appendTo(‘#customers’);

$(‘<div class=”lastname”></div>’).html(lastName).appendTo(‘#customers’);

$(‘<div class=”street”></div>’).html(street).appendTo(‘#customers’);

$(‘<div class=”city”></div>’).html(city).appendTo(‘#customers’);

$(‘<div class=”zip”></div><br />’).html(zip).appendTo(‘#customers’);

}

);

}

</script>

</head>

<body id=”theBody”>

<div><h3>Playing with Server Data</h3></div>

<div>

<h4><strong>Message from the Server:</strong></h4>

<p id=”first”>Waiting for Message</p>

</div>

<form id=”theForm”>

<button type=”button” id=”oneButton”>Get Text</button><br />

<div>

<h4>Double Number on the Server:</h4>

<span></span><br />

</div>

<input type=”text” name=”data” id=”data”></input>

<button type=”button” id=”twoButton”>Double Number</button><br /><br />

<button type=”button” id=”threeButton”>Get XML Data</button>

</form>

<div>

<h4><strong>XML Data from the Server:</strong></h4>

</div>

<div id=”customers”>Customer Information</div>

</body>

</html>

GetDouble.php

<?php

$numberToDbl = $_POST[“data”];

echo $_POST[“data”] . ” Times 2 Equals “;

$doubleUp = $numberToDbl * 2;

echo $doubleUp;

?>

customers.xml

<?xml version=”1.0″ encoding=”iso-8859-1″?>

<customers>

<customer id=”0″>

<firstName>Paul</firstName>

<lastName>Jones</lastName>

<street>123 Main St</street>

<city>Anywhere</city>

<zip>15235</zip>

</customer>

<customer id=”1″>

<firstName>Sally</firstName>

<lastName>Jones</lastName>

<street>123 Main St</street>

<city>Anywhere</city>

<zip>15235</zip>

</customer>

</customers>

11 Responses to “JQuery Video Tutorial Pt 7”

  1. Alfa9 says:

    Hey, is there any way to act based on the php responde, like if the data coming from the php file is ‘Ok’, then do this with jquery and if not then do that !
    I really need some help here !!

  2. chris says:

    amazing tutorial đŸ™‚

  3. Lucas says:

    1. Why does my browser spit out the message “object XMLDocument” after hitting the “Get Text” button? Instead of the proper text, of course.

    Something is wrong here…

    2. Any idea how to make the browser use the data from the xml file only once?

    Thanks in advance

  4. Dave says:

    $(‘’).html(firstName).appendTo(‘#customers’);

    $(‘’).html(lastName).appendTo(‘#customers’);

    $(‘’).html(street).appendTo(‘#customers’);

    $(‘’).html(city).appendTo(‘#customers’);

    $(‘’).html(zip).appendTo(‘#customers’);

    Hi Derek,

    Love your tutorials but am having a problem with jQuery Tutorial #7. My local host chokes on the above “div class” statements. The error I get is “invalid XML name” which points to the div section of the code for the XML part. Any help would be greatly appreciated and keep up the great work!!

    • admin says:

      It looks like you have the back quotes in the code. Sorry, but you have to replace them with normal quotes for the code to work. That is an old security feature that I’ll correct soon

  5. RalphZero says:

    Cannot get the php feature to work.
    All other features are working.
    Using VS 2010.
    Added GetDouble.php to the root folder of my project.
    This is just a txt file I renamed GetDouble.php.

    function getDblFromServer() {
    debugger;
    $(“span”).load(“GetDouble.php”, $(“#theForm”).serializeArray());
    }

    debugger is being hit.

Leave a Reply

Your email address will not be published.

Google+