9tutorials - The best collection of tutorials » Javascript

Create A Tabbed Interface Using jQuery

kusanagi — Wed, 31 Dec 1969 17:00:00 +0000

Creating tabbed interfaces suddenly becomes a piece-of-cake when using the Tabs function in the jQuery UI library. It can be utilized to create completely unique interfaces without having to be a coding God – using only one line of code!

Display content dynamically with AJAX

dangtruong — Sat, 21 Jul 2007 00:52:38 +0000

We want to design a commenting system where visitors of your website can leave a comment on a news post. The form for submitting a comment should only be visible when a â€œpost comment buttonâ€ is clicked. The comment form should be displayed without reloading the web page.

The solution

To get this behaviour we are going to use AJAX (Asyncronous Javascript And XML) which is perfect for these kind of problems. With AJAX it is possible to send requests via Javascript that updates the webpage wiithout the need of a page refresh.

We start with the html code that we later will integrate with a Javascript to reveal the hidden textbox. Create a new file and call it comments.html.

[source:html]

My news post

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ultrices magna eget
nunc. Pellentesque consequat dui sit amet leo. Maecenas a est. Donec justo nunc,
egestas vitae, consequat ac, aliquet ut, nisl. In suscipit nibh vitae lacus.
Pellentesque sapien odio, imperdiet vitae, scelerisque quis, ultricies a, pede.
Nullam feugiat

Post your comment

[/source]

Important things to note with this code is

javascript:showForm(‘comment’);

that calls the javascript function ShowForm when the link is clicked on. Also note the code

Creating the Ajax application with Java

dangtruong — Fri, 22 Jun 2007 07:27:44 +0000

We’ll begin with the complete HTML and JavaScript code for our first application, a simple web page that displays the decimal value of any character. Then we’ll break apart the JavaScript and examine it.

[source:html]

Ajax On Java, Chapter 2 Example

AJAX CHARACTER DECODER

Press a key to find its value.

Enter Key Here ->
onkeyup=”convertToDecimal( );”>

Key Pressed:

Decimal

[/source]

For the most part, this is standard HTML. There are only two JavaScript references: focusIn( ) and convertToDecimal( ). The focusIn( ) function merely puts the cursor in the right input field when the page loads, so the user doesn’t have to move it there with the mouse.

The convertToDecimal( ) function will be our entry into the Ajax world. The lays out the JavaScript code that supports our web page, ajax.js.

[source:javascript]var req;

Let’s take a look at convertToDecimal( ), which is our entry point from index.html. The main JavaScript object we’ll use is XMLHttpRequest. Unfortunately, one problem with JavaScript is that the code isn’t the same on all browsers. In Mozilla, Firefox, and Safari, we get an XMLHttpRequest object like this:

new XMLHttpRequest( );

In Internet Explorer, we use an ActiveX object:

new ActiveXObject(“Microsoft.XMLHTTP”);

Because we can’t tell in advance which browsers users will view our web page with, we have to write code that will work on any of the likely candidates. First, we must determine whether the user is using Internet Explorer or some other browser, such as Firefox or Mozilla. This task is handled by the following code:

[source:javascript]if (window.XMLHttpRequest) {
req = new XMLHttpRequest( );
}
else if (window.ActiveXObject) {
req = new ActiveXObject(“Microsoft.XMLHTTP”);
}[/source]

That’s basically it: req is now an object that we can use to build our Ajax page.

Now let’s look at some code that does some real work. We will be using the code from axax.js in the next chapter, so examine it closely and pay special attention to the mechanism that talks to the server. Since we’re Java developers, the backend will be a servlet, but the web page doesn’t care.

The convertToDecimal( ) function first gets a String from the form and then sets the url variable to “/ajaxdecimalcodeconverter/response?key=…”. Eventually, we’ll send this URL to the server (in our case, a servlet) and expect a response (the decimal value of the key), but we’re not going to send it in response to a Submit button press; we’re going to send it asynchronously (that is, as soon as we have the keystroke that we want to convert).

After the if/else block, where we figure out which browser is being used and get an appropriate req object, we open a connection to the servlet with the call:

req.open(“Get”,url,true);

Let’s look at the three parameters in the req.open( ) function:

“Get” – The first parameter tells JavaScript whether to submit the request to the server using HTTPPost( ) or HTTPGet( ). The HTTPPost( ) method hides the parameters in the request; the HTTPGet( ) method puts the parameters in the URL for everyone to see. For this example, I chose HTTPGet( ) because it is easier to see what parameters are being passed, and the number of parameters is relatively small. If I were sending a complex set of parameters, I’d use “Post” instead.[*]

[*] I’m getting quite a ways ahead of the story, but it’s a good idea to use Get only when the request doesn’t make any changes to the data on the server. That’s clearly the case here. Conversely, it’s a bad idea to use Get when you are changing data on the server (for example, if you’re sending new data, or deleting existing data); in this case, use Post instead.

url - The second parameter is the URL we’re passing to the server. We created that URL earlier in the method.

true - The last parameter determines whether or not the call is asynchronous. When this parameter is TRue, the request is sent asynchronously. When designing Ajax applications, you always want to set the asynchronous flag to TRue; basically, it means “don’t stop anything, just notify me when the data comes back.”

Now, notice the next statement:

req.onreadystatechange=callback;

This line allows us to use the call asynchronously. We’re telling the req object to call the callback( ) function whenever a state transition occurs. Therefore, we can process data coming back from the server as soon as it arrives; whenever something happens, we’ll be notified.

What Is a Callback?
A callback is executable code that is passed as a parameter to another function. In our example, we pass code to the XMLHTTPRequest object, which tells us what function to call when it is ready.

The JavaScript code generates a request that is sent to a servlet. When the servlet returns with the information, the callback function is invoked; in turn, the callback function can display the new information to the user. We specified which function to call with the following JavaScript code:

req.onreadystatechange = callback;

This is really powerful. There’s no more waiting on the page; when the data returns, the user will see it without having to wait for a page reload.

The last statement of convertToDecimal( ) sends the request:

req.send(null);

Now, let’s look at the callback( ) function:

[source:javascript]function callback( ) {
if (req.readyState==4) {
if (req.status == 200) {
if (window.XMLHttpRequest) {
nonMSPopulate( );
}
else if (window.ActiveXObject) {
msPopulate( );
}
}
}
clear( );
}[/source]

This function checks the readyState and the status returned by the server. The readyState can have one of five values, listed in table below

Value	State
0	Uninitialized
1	Loading
2	Loaded
3	Interactive
4	Complete

The callback( ) function is called on every state change, but that’s not exactly what we want. We don’t want to do anything until our request has completed, so we wait until req.readyState == 4.

The next check, req.status == 200, ensures that the HTTPRequest returned a status of OK (200). If the page is not found, status will equal 404. In this example, the code should be activated only when the request has been completed. Note that a readyState of 4 doesn’t tell us that the request completed correctly; all we know is that it completed. We still have to check the req.status code.

How Is Our JavaScript Function Called?

We’ve written a nice JavaScript function, convertToDecimal( ), that does some interesting things: it sends a request to the server without intervention by the user, and it arranges for the server’s response to be added to the web page. But how does convertToDecimal( ) get called? The browser calls it when it detects the keyup event on the “Enter Key Here ->” input field. Here is the complete HTML for the input field:

onkeyup=”convertToDecimal( );” tells the browser to call the JavaScript function convertToDecimal( ) whenever the user presses and releases a key in the input field.

How Do We Get the Value of the Key Pressed?

Once control is passed to convertToXML( ), we make this call:

var key = document.getElementById(“key”);

At this point, the object with the id of key contains the decimal value of the key that was pressed. All that’s left for us to do is retrieve the value that the object named key contains. This value is kept in the value parameter of the key element, so key.value contains the value of the key that was pressed.

Once we’ve retrieved it, we want to place this value in a field for display. That allows us to clear the field used to enter the key. We’ve named the field for displaying the key keypressed. Here’s how to retrieve the keypressed field:

var keypressed = document.getElementById(“keypressed”);

The next step is to put the value of key into the value of keypressed:

keypressed.value = key.value;

Formatting the Page

The final step in developing our application is to create a CSS file to give the page some formatting

[source:css]body {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
text-align:center;
background:#cbdada;
}
#keypressed{
width:30;
border:none;
}
#key {
width:20px;
padding:0;
margin:0;
border:none;
text-align:left
}
h1, h2 {
font-size:120%;
text-align:center;
}
h2 {
font-size:110%
}
table, input {
margin-left:auto;
margin-right:auto;
padding:0px 10px;
text-align:center;
color:black;
text-align:center;
background: #a0f6f5;
border:solid black 1px;
}
td {
margin:10px 10px;
padding: 0px 5px;
border: none;
}
input {
width: 80;
border: none;
border-top:solid #999999 1px;
font-size: 80%;
color: #555555;
}[/source]

AJAX Generic Form Parser – With Validation

dangtruong — Thu, 24 May 2007 16:35:06 +0000

In this tutorial Iâ€™ll show you a simple method to pass any HTML form through AJAX without the need to hard code all form fields into the JavaScript or Server Side Script. Using this simple piece of JavaScript you can reuse it as is with any form, saving a lot of time. Iâ€™ve even added basic validation to certain form element types (which would be expected).

Okay, straight to the main JS code.

[source:javascript]

var req = createXMLHttpRequest();

function sendRequest(frm, file) {
var rnd982g = Math.random();
var str = â€œâ€?;
if(str = getForm(frm)) {
req.open(â€™GETâ€™, file+â€™?’+str+â€™&rnd982g=â€™+rnd982g);
req.onreadystatechange = handleResponse;
req.send(null);
}
return false;
}

function handleResponse() {
if(req.readyState == 4){
var response = req.responseText;
document.getElementById(â€?resultsâ€?).innerHTML = response;
}
}

function getForm(fobj) {
var str = â€œâ€?;
var ft = â€œâ€?;
var fv = â€œâ€?;
var fn = â€œâ€?;
var els = â€œâ€?;
for(var i = 0;i < fobj.elements.length;i++) {
els = fobj.elements[i];
ft = els.title;
fv = els.value;
fn = els.name;
switch(els.type) {
case “text”:
case “hidden”:
case “password”:
case “textarea”:
// is it a required field?
if(encodeURI(ft) == “required” && encodeURI(fv).length < 1) {
alert(”’+fn+” is a required field, please complete.’);
els.focus();
return false;
}
str += fn + “=” + encodeURI(fv) + “&”;
break;

case “checkbox”:
case “radio”:
if(els.checked) str += fn + “=” + encodeURI(fv) + “&”;
break;

case “select-one”:
str += fn + “=” +
els.options[els.selectedIndex].value + “&”;
break;
} // switch
} // for
str = str.substr(0,(str.length – 1));
return str;
}
[/source]

The JavaScript code above is split into 4 functions, here is an overview of what each function does.

createXMLHttpRequest() – This is the function which will establish the AJAX connection object, this is called as soon as the JS file is loaded.

sendRequest() – This function is the one which is called when the form is submitted. This function requires (passed in) the â€˜Form Objectâ€™ and the â€˜File Nameâ€™ of the script which will receive the form data. When this function has been called, it takes the form object and passes it to the JS function getForm() which in turn parses the whole form extracting all the data. sendRequest() then takes the open AJAX connection and passes all the data to the PHP file form processing. Finally when the request from the PHP server script is returned, it writes out the reply to an element on the screen with the div ID â€˜resultsâ€™.

getForm() – This is the magic, this function reads through the whole form and extracts the field data before returning it back to sendRequest(). It handles radio, text, password, textarea, select and checkbox field types. It even looks for validation requests on text, password and textarea fields (which is enabled by using title=â€?requiredâ€? in the form element).

Simple :)

Next is a very simple form with a mixture of field types and validation requests (nothing fancy here). Also included at the bottom is the div which prints out the results to the browser.

[source:html]

[/source]

As you can see the form trigger which calls the AJAX actions is set in the button using the onClick method. Also note Iâ€™ve added title=â€?requiredâ€? to the â€˜textOneâ€™ field – this means the user will not be able to submit the form unless this field contains a value.

Finally here is a very stripped down Server script in PHP which takes the form values and returns them formatted back to the JS (you could do anything with the data at this stage!).

process.php

[source:php]

if(isset($_GET[â€™rnd982gâ€™])) {
foreach($_GET as $a => $b) {
if($a == â€œrnd982gâ€?) {
// ignore this random number
// only used to prevent browser caching
} else {
echo â€œ$a: â€œ.stripslashes(htmlentities($b)).â€? â€œ;
} // if
} //foreach
die;
}
[/source]

You could easily change the above to generate an email or add the form data to a database, the above example will echo out the results which are passed back to the div tag below the form.

There you have it, short and sweet (I hope) – Iâ€™ve intentionally kept the example scripts to a minumum but with still enough to be useful. Please feel free to take this and mess around with it.

Have Fun!!

Copyright @ Ajax Tutorial 2007

How to Develop Web Applications with Ajax

dangtruong — Mon, 21 May 2007 20:39:39 +0000

In the past, web applications were limited because a web page had to be reloaded (or another page loaded in its place) in order for new data to be obtained. Other methods were available (without loading another page), but the techniques werenâ€™t well supported and had a tendency to be buggy. Recently, a technique that had not been widely supported in the past has become available to a large number of web surfers, giving developers more freedom to develop cutting-edge web applications. These applications, which asynchronously retrieve XML data via JavaScript, are affectionately known as â€œAjax applicationsâ€? (Asynchronous Javascript and XML applications). In this article, I will explain how to retrieve a remote XML file via Ajax to update a web page, and as this series continues, I will discuss more ways that Ajax technology can be used to take your web applications to the next level.

The first step is to create an XML file with some data. Weâ€™ll call this file data.xml. Itâ€™s a simple XML file and would most certainly be more complex in a real-world application, but for clarity our examples will be simple and concise.

[source:xml]

This is some sample data. It is stored in an XML file and retrieved by JavaScript.

[/source]

Now letâ€™s create a simple web page containing some sample data. This is the page that all our JavaScript will be in, and the page that users will visit to see the Ajax script in action. Letâ€™s call this file ajax.html.

[source:html]

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

Developing Web Applications with Ajax – Example

Developing Web Applications with Ajax

This page demonstrates the use of Asynchronous Javascript and XML (Ajax) technology to
update a web page’s content by reading from a remote file dynamically — no page reloading
is required. Note that this operation does not work for users without JavaScript enabled.

This is some sample data. It is the default data for this web page. title=”View the XML data.” onclick=”ajaxRead(‘data.xml’); this.style.display=’none’; return false”>View XML data.

[/source]

Note that we link to the data.xml file for users without JavaScript. For users with JavaScript, the function â€œajaxReadâ€? is called, the link is hidden, and the link does not redirect to the data.xml file. The function â€œajaxReadâ€? isnâ€™t defined yet, so if you test the example code above, youâ€™ll get a JavaScript error. Letâ€™s go ahead and define that function (and another) so you can see how Ajax works. The following SCRIPT goes in your HEAD tags:

[source:javascript]

[/source]

Thatâ€™s quite a bit, so letâ€™s take this one piece at a time. The first function is â€œajaxReadâ€? â€“ what we call from our â€œView XML dataâ€? link on the web page. In the function, we define an â€œxmlObjâ€? variable â€“ this will be the middleman between the client (user viewing the web page) and the server (the web site itself). We define this object in an if/else chunk:

[source:javascript]

if(window.XMLHttpRequest){
xmlObj = new XMLHttpRequest();
} else if(window.ActiveXObject){
xmlObj = new ActiveXObject(“Microsoft.XMLHTTP”);
} else {
return;
}

[/source]

This is just a test for the availability of different objects â€“ some browsers implement the XMLHttpRequest object differently, so when we define â€œxmlObjâ€? as our XMLHttpRequest object, we have to define it depending on what browser implementation is available. If no XMLHttpRequest object is available, we end the function with a â€œreturnâ€? statement to avoid errors. Most of the time, this check will return an XMLHttpRequest object â€“ this particular code should work in almost every browser out there, with the exception of some older browsers (it works in IE 5.01, but will cease to function in Netscape 4).

Next is this block:

[source:javascript]

xmlObj.onreadystatechange = function(){
if(xmlObj.readyState == 4){
updateObj(‘xmlObj’, xmlObj.responseXML.getElementsByTagName(‘data’)[0].firstChild.data);
}
}

[/source]

Creating sortable lists with PHP and Ajax

dangtruong — Sat, 12 May 2007 20:32:50 +0000

You might have been in a situation before where you had a list of items in your database that needed to be output in a specific order. These items could be anything: perhaps a listing of your favourite movies or your favourite books. For whatever reason, you want them ordered in a custom way that canâ€™t be determined automatically (such as alphabetical).

This article covers the implementation of a system that lets you easily define the order of such a list.

Traditionally, implementations of such functionality involve you clicking a â€œmove upâ€?, â€œmove downâ€?, â€œmove to topâ€?, or â€œmove to bottomâ€? button that switches the order the items (one item at a time). Or perhaps each item has a text box with a number in it, that by changing the numbers you can change the order of the list.

To achieve the Ajax effects (that is, the drag/drop effect, and the seamless saving of ordering data), we will be using the Prototype and Scriptaculous libraries.

Firstly, we will create a database table (compatible with MySQL and PostgreSQL) and populate it with data. Then we will output our list and apply the drag and drop effects to it. Finally, we will deal with the saving of the new ordering data.

For our example, we will use a list of â€œfavourite moviesâ€?, and implement functionality to change the order of our movies.

Creating our database and populating it

We will now create the database table we need in order to create this example. We wonâ€™t be writing all the code for inserting, editing and deleting of data, as it is beyond the scope of this example. As such, we will simply provide insert statements to create a static list of data.

The examples below are for PostgreSQL and MySQL.

Create your database

First up, you need to create a database for this article. This may be in either PostgreSQL or MySQL. Additionally, you may need to setup a username and password to access the database, depending on your system setup.

MySQL database schema

[source:sql]

create table movies (
movie_id int not null auto_increment,
title varchar(255) not null,
ranking int,

primary key (movie_id)
);

[/source

MySQL database schema

[source:sql]

insert into movies (title) values (‘American Pie‘);
insert into movies (title) values (‘Die Hard‘);
insert into movies (title) values (‘Clerks‘);
insert into movies (title) values (‘Air Force One‘);
insert into movies (title) values (‘Titanic‘);
insert into movies (title) values (‘The Shawshank Redemption‘);
insert into movies (title) values (‘Gone In 60 Seconds‘);

[/source ]

About the schema

The database table is fairly simple, it just consists of an ID, a movie title, and a field to store the ordering. Thereâ€™s no particular reason why the ranking field is allowed to be null, other than the values wonâ€™t be set when we initially insert our data.

If we were being really tricky, we would write a trigger on the database that would assign the next ranking value when a row is inserted, but that is beyond the scope of this article.

Outputting the database data

Now that weâ€™ve made and populated our database, weâ€™re going to write a PHP script to connect to this database and select all of this data. Because we are making both a MySQL version and a PostgreSQL version, some of this code will be implemented twice (once for each).

Hopefully you are using database abstraction in your web applications, but for the purpose of this article weâ€™ll assume that you arenâ€™t.

database.php

[source:php]

function dbConnect()
{
$link = mysql_connect(‘localhost’, ‘username’, ‘password’);
if (!$link)
return false;

return mysql_select_db(‘phpriot’);
}
?>

[/source]

movies.php

[source:php]

function getMovies()
{
$query = ’select movie_id, title from movies order by ranking, lower(title)’;
$result = mysql_query($query);

$movies = array();
while ($row = mysql_fetch_object($result)) {
$movies[$row->movie_id] = $row->title;
}

return $movies;
}
?>

[/source]

index.php

Hereâ€™s the main script that displays the list of movies. It is the same for both MySQL and PostgreSQL, as it will include the necessary code. At this point it is not styled and it is not yet possible to change the ordering. Weâ€™ll be adding each of those things in next.

[source:php]

require_once(‘database.php’);
require_once(‘movies.php’);

if (!dbConnect()) {
echo ‘Error connecting to database’;
exit;
}

$movies = getMovies();
?>

phpRiot Sortable Lists

phpRiot Sortable Lists

[/source]

Interstitial pages with javascript

dangtruong — Fri, 11 May 2007 15:59:16 +0000

When you click on a link, an interstitial page (usually an advert) appears before you are shown the new page that you clicked to view. doInterstitial() is a simple javascript function that rewrites all links on a page.

[source:javascript]

function doInterstitial(newURL, time) {
var links = document.getElementsByTagName(‘a’);
for( var i=0; i var oldURL = links[i].href;
links[i].href = newURL + ‘?oldURL=’ + oldURL + ‘&timer=’ + time;
}
}

[/source]

and can be called on page load (passing the advert url and a time duration for the advert):

[source:html]

[/source]

The following demonstrates a simple interstitial advert. Its basic function is to wait for a defined duration and then forward the user to their desired page.

The GET variables are parsed from the url, and used to find the duration and destination.

The biggest trick is the location.replace line which removes the advert from the history, stopping it appearing when the back button is pressed.

[source:html]

[/source]