Internal page redirection without affecting subdomains

June 8, 2013 effecter Search engine optimization - SEO, Server-side scripting

When we recently decided to redesign our website, we came across the issue of keeping the visitors flow from our old pages and links. As best practice for SEO, we had to redirect our old links to the new ones. The obvious decision was to simply use “Redirect 301” in our .htaccess, but that messed up our subdomains.

Redirect 301 ^/index\.php$ /index.html #this would usually do, but not in this case

1	Redirect 301 ^/index\.php$ /index.html #this would usually do, but not in this case

After some research it became clear that the answer was mod_rewrite (for those of you not familiar with this practice, here is a useful article about url rewriting). The trick was to use a rewrite condition for your root domain, so that the redirection applies only to it.

RewriteEngine on
RewriteCond %{HTTP_HOST} ^(www\.)?if-act\.net$ [NC] #this is the condition
RewriteRule ^/index\.php$ /index.html [R=301,NE,L] #this applies if the condition is true
RewriteRule ^/contacts\.php$ /#contacts [R=301,NE,L] #redirection to an anchor

RewriteEngine on

RewriteCond %{HTTP_HOST} ^(www\.)?if-act\.net$ [NC] #this is the condition

RewriteRule ^/index\.php$ /index.html [R=301,NE,L] #this applies if the condition is true

RewriteRule ^/contacts\.php$ /#contacts [R=301,NE,L] #redirection to an anchor

So the “RewriteCond” compares %{HTTP_HOST} variable (for the php gurus out there %{VAR} variables correspond to php $_SERVER[‘VAR’] variables) and redirects only if true. It is important to pay attention to the flags after the rewrite rule. The “R=301” flag states that this is a permanent redirection (best practice for SEO) and the “L” flag tells the server that it shouldn’t look at any other rules after this one. Also essential when dealing with hashes in the redirecition process is to use the “NE” flag, which tells the server not to escape special chars.

It is also important to look at the case when you want to redirect a link with a query portion (that’s the string after the query sign – ‘?’) to another with hash (‘#’) in it. As the server doesn’t take notice of the query portion it will simply append it to the new URL.

RewriteRule ^/services\.php\\?seo$ /#services [R=301,NE,L] #redirect to /#services?seo

1	RewriteRule ^/services\.php\\?seo$ /#services [R=301,NE,L] #redirect to /#services?seo

Since we don’t want that, we need to add a new query to our redirected link, which will override the old one. So you end up with a rule like this:

RewriteRule ^/services\.php\\?seo$ /?#services [R=301,NE,L] #works just fine

1	RewriteRule ^/services\.php\\?seo$ /?#services [R=301,NE,L] #works just fine

So this is our tip of the day and hopefully this will save you some keyboard smashing moments the next time you try to SEO-friendly redirect pages. 🙂

Leave any questions, remarks and suggestions in the comment section below.

Cheers! Have a nice day!

Split flap display plugin for JQuery

September 15, 2012 effecter Client-side scripting

The airport departure board effect is now available for everybody to use

If you need a new and cool effect for your website you need not to look for such anymore. The split flap display plugin for JQuery gives you the ability to turn every string into an amazing eye-catching animation as you may have seen on an airport departure board.

It’s very simple to use

You need only to include the jquery library and the plugin file called splitFlap.js

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.js"></script>
<script type="text/javascript" src="splitFlap.js"></script>

1 2	<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.js"></script> <script type="text/javascript" src="splitFlap.js"></script>

Invoke the plugin on any HTML DOM object with proper innerHTML (text only).

<script type="text/javascript">
 $(document).ready(function () {
  $('p').flapDisplay();
 });
</script>

$(document).ready(function () {

$('p').flapDisplay();

});

</script>

Starting the animation goes like this:

<script type="text/javascript">
 $(document).ready(function () {
  $('p').flapDisplay();

  $('p').flapDisplay('start');
 });
</script>

$(document).ready(function () {

$('p').flapDisplay();

$('p').flapDisplay('start');

});

</script>

The plugin has two modes of operation. The default mode uses the textual content of the object given to the plugin and implements the airport departure board effect on it. The second mode uses an array of words passed to it for a more genuine split-flap display recreation. More detailed information about all the options and setting is available at the end of this article.

The JQuery plugin is prepared for almost anything you could want of it

Let’s look at some examples:

The common regular flip implemented on hover:

Just place the mouse in a cell and watch what happens

The delayed flip implemented on hover:

With this settings the chars start to flip gradually in contrast to the default settings where they all start together.

More realistic airport departure board:

In this example I’ve passed an array of words. You can see the result for yourself. As you can see it copes very well with special chars and different alphabets.

On-demand flip:

You could pass words to the plugin dynamically.

Plugin documentation

Settings:

delayed: [boolean]

Description: Controls whether the animation starts with all chars flipping together (delayed: false) or they are gradually included to the flipping process (delayed: true)
Default value: false

chars: [string]

Description: A string which specifies the chars that are to be used in the flipping process. In case you’ve missed a char that appears in some of the innerHTMLs the plugin will automatically detect and add it. Parsing less chars will result in a faster animation.
Default value: ‘$_!@#%()-12357890abcdefghijklmnopqrstuvwxyz ‘

words: [Array]

Description: Parse here an array of words for the plugin to use.
Default value: []

speed: [integer]

Description: Given in milliseconds this is the speed at which the plugin refreshes the string while flipping. Smaller number will result in a faster animation.
Default value: 70

interval: [integer]

Description: Given in milliseconds this is the pause time between words. If there are no words passed this parameter is obsolete
Default value: 2000

Drag’n’Slide JQuery Gallery v2.0

June 19, 2012 effecter Client-side scripting

Finally, the new and improved version of our Drag’n’Slide gallery is out. Following the latest trends in gallery design, we’ve added some new features to our product, while preserving the unique properties of the plugin. Below you may find some code samples, as well as a demo of the gallery.

What’s new?

Cool navigation added!

As you will see the new Drag’n’Slide jQuery gallery will provide the user with a simple and intuitive way of navigating across the pictures in the gallery. These tiny and cool circles will fit perfectly into any website design.

Changeable background colour!

For perfect compatibility with every website layout You can now choose the background colour that will enable the Drag’n’Slide jQuery gallery to fit right into your design.

Border on/off!

Outline the Drag’n’Slide jQuery gallery with a sleek border or just allow it to blend with the rest of the webpage.

You can find detailed documentation of the new features of the Drag’n’Slide Jquery Gallery below.

How to use Drag and Slide JQuery gallery?

Simple and easy to use

Just wrap your content with a single div and call the gallery on it. The code will look like this:

   .
   .
   .

<script type="text/javascript">
$("#your_div_ID").drag_n_slide_gallery();
</script>

   .
   .
   .

<div id="your_div_ID">
 <img />
   .
   .
   .
 <img />
</div>

$("#your_div_ID").drag_n_slide_gallery();

</script>

<img />

</div>

Drag and slide website content

If you wish to store additional HTML information inside each draggable entity, then you should wrap all the entities with the .page CSS class.

   .
   .
   .

<script type="text/javascript">
$("#your_div_ID").drag_n_slide_gallery();
</script>

   .
   .
   .

<div id="your_div_ID">
 <div class="page"> You could place pictures and text styled as You wish</div>
   .
   .
   .
 <div class="page"> Perfect for displaying a portpholio</div>
</div>

$("#your_div_ID").drag_n_slide_gallery();

</script>

<div class="page"> You could place pictures and text styled as You wish</div>

<div class="page"> Perfect for displaying a portpholio</div>

</div>

Available settings:

New features

border: {string}

Description: Determine the style, width and colour of the border that wraps the gallery.
Default value: ‘1px solid gray’
Example: border: ‘0’ or border: ‘3px double #676767’

backgroundColor: {string}

Description: Choose the right background color that would fill the empty space in the gallery if a picture is too small or the color that will appear behind Your content if You use the Drag’n’Slide JQuery Gallery in page mode.
Default value: ‘#383838’
Example: backgroundColor: ‘#FFFFFF’ or backgroundColor: ‘lightgreen’

Legacy settings: v1.0

width: {value} or ‘{value}px’

Description: Width of each gallery’s page/image. The width is applied only to images, whose own width is bigger than the the one described here.
Default value: ‘640px’
Example: width: 600 or width: ‘600px’

coefficient: 0 <= {value} < 1

Description: The coefficient of the offset needed in order for the image to be moved. If – for example – it is set to 0.2 (20%), the user would need to move current image/page 0.2 times of the whole width (see above) in order to see the next one. When instantMove property (see below) is set to true, the coefficient is overridden – its value won’t matter.
Default value: 0.4
Example: coefficient: 0.2

instantMove: {boolean}

Description: If set to true the image/page is directly moved after the first drag. If – for example – it is set to false (the default value), an image/page could be only moved when the user clicks on it, moves the mouse and releases it. If – on the other hand – the property is set to true, the only thing the user needs to do is to click on the image/page and moves the mouse horizontally – no release of the mouse button is needed.
Default value: false
Example: instantMove: true

verticalCenter: {boolean}

Description: Centers image (resp. – page’s content) vertically when the display’s height is bigger than the one of the object inside it.
Default value: false
Example: verticalCenter: true

initialTip: {boolean}

Description: A fast sliding effect of all the images/pages intended to show the user that the image (resp. – page contents) is draggable.
Default value: false
Example: initialTip: true

Download:

Download if-act’s gallery

We expect Your requests, recommendations and bug reports in the comment section. Cheers! 🙂

if-act’s Drag and Slide jQuery Gallery

March 13, 2012 effecter Client-side scripting

We are glad to introduce ver1.0 of our Drag’n’Slide gallery. Below you may find some code samples, as well as a demo of the gallery. A modified version, used to present some content along with the images, is used in our portfolio.

How to use Drag and Slide gallery?

Simple and easy to use

Just wrap your content with a single div and call the gallery on it. The code will look like this:

   .
   .
   .

<script type="text/javascript">
$("#your_div_ID").if_act_gallery();
</script>

   .
   .
   .

<div id="your_div_ID">
 <img />
   .
   .
   .
 <img />
</div>

$("#your_div_ID").if_act_gallery();

</script>

<img />

</div>

Drag and slide website content

If you wish to store additional HTML information inside each draggable entity, then you should wrap all the entities with the .page CSS class.

   .
   .
   .

<script type="text/javascript">
$("#your_div_ID").if_act_gallery();
</script>

   .
   .
   .

<div id="your_div_ID">
 <div class="page"> You could place pictures and text styled as You wish</div>
   .
   .
   .
 <div class="page"> Perfect for displaying a portpholio</div>
</div>

$("#your_div_ID").if_act_gallery();

</script>

<div class="page"> You could place pictures and text styled as You wish</div>

<div class="page"> Perfect for displaying a portpholio</div>

</div>

Available settings:

width: {value} or ‘{value}px’

coefficient: 0 <= {value} < 1

instantMove: {boolean}

verticalCenter: {boolean}

initialTip: {boolean}

Description: A fast sliding effect of all the images/pages intended to show the user that the image (resp. – page contents) is draggable.
Default value: false
Example: initialTip: true

Download:

Download if-act’s gallery

I hope you would enjoy the gallery. Please write us if/when you find any bugs or just want to tell us Bravo 🙂
Have a nice day!

Cows and Bulls

January 16, 2012 effecter Uncategorized

Have fun with the popular game of Cows and Bulls with score calculation and rankings: if-act’s Cows and Bulls

Javascript calculator with jQuery

December 22, 2011 effecter Client-side scripting

At your attention is a simple tutorial about building a javascript calculator using jQuery. The whole code is explained below and a demo of the calculator is available here: calculator demo.

As I think the markup and the styling are self-explanatory, they would not be shown here explicitly, so let’s start with the code.
First we declare a few variables, half of them pointing to HTML elements.

$('document').ready(function(){
	var $calc = $("#calculator");
	var $display = $("#display");
	var $digits = $(".digits");
	var $operations = $(".operations");
	
	var init = 0;
	var operand = init;
	var operation = null;
	var afterOperation = false;
	
	var reset = function() {
		$display.text(init);
		operand = null;
		operation = null;
	};

$('document').ready(function(){

var $calc = $("#calculator");

var $display = $("#display");

var $digits = $(".digits");

var $operations = $(".operations");

var init = 0;

var operand = init;

var operation = null;

var afterOperation = false;

var reset = function() {

$display.text(init);

operand = null;

operation = null;

};

$calc points to the calculator body, but I am pretty sure it has actually never been used through the code.
$display points at – of course – the calculator display (a div element), while $digits and $operations are sets representing the digits and operations DIVs respectively. The init variable is used by initializing the calculator and resetting the state – of course, it is 0. What operand point to is the first of two operands, taking part in each operation. The operation variable is used to hold the last unexecuted operation, chosen by the user. The afterOperation flag indicates whether the last user’s choice was a digit or an operation. The reset variable, pointing to an anonymous function, resets the display and both operand and operation, used through the code below.

The remaining part of the code is actually a few click handlers – for clicking on a digit or a operation button and two additional – for the decimal point (which I, should admit, wrongly call ‘dot’) and for the change of the sign (+/-). The first function, which comes after the variable declaration and initialization is the digit click handler.

$digits.not($('#dot, #sign')).click(function(event) {
	event.preventDefault();
	if (afterOperation == false) {
		if ($display.text() == init && $display.text().indexOf('.')<0) {
			$display.text($(this).text());
		} else {
			$display.append($(this).text());
		}
	} else {
		$display.text($(this).text());
		afterOperation = false;
	}
});

$digits.not($('#dot, #sign')).click(function(event) {

event.preventDefault();

if (afterOperation == false) {

if ($display.text() == init && $display.text().indexOf('.')<0) {

$display.text($(this).text());

} else {

$display.append($(this).text());

}

} else {

$display.text($(this).text());

afterOperation = false;

}

});

First, as you can see, I exclude the dot and the sign buttons from the elements set, as they actually belong to the digits class, but should be handled a bit differently.
Here the afterOperation flag is used for the first time – there are two options, depending on the flag value – the first one (if (afterOperation == false) {…) is used when we are ‘building’ the value digit by digit and the second one is used to start ‘building’ the value after an operation has been performed. The main difference is in the text() and append() functions – the first one types the clicked digit ($(this).text()) in the display, while the second one simply concatenates the digit to these, already present in the display.
By afterOperation with a value of false, there are analogically two cases – the first one (if ($display.text() == init && $display.text().indexOf(‘.’)<0) {...) checks whether the display has the init value (0) AND whether NO decimal point is available. In this case the text() function is used – that means that the newly chosen digit is written in the display on the init value’s place. The reason to check for the absence of the decimal point, is the following – when we have for example 0 on the display and click the ‘dot’ button for adding a decimal point, the point is concatenated to the zero. However, the expression “0.” == 0 evaluates to true and so the text() function would be invoked, while we need to append digits after the decimal point – so the $display.text().indexOf(‘.’)<0 statement has been added. So in the case “0.” we have true for the first statement $display.text() == init and false for the second one, thus eventually having true AND false, which evaluates to false, making the code appending digits after the dot instead of not resetting the display with the text() function.
Let’s now have a look at the operation handler.

$operations.click(function(event){
	event.preventDefault();
	var currOperation = $(this).text();
	var currOperand = parseFloat($display.text());
	if (currOperation != 'CE') {
		// Do the math
		if (operation != null && !afterOperation) {
			switch(operation) {
				case '+': {
					$display.text(operand + currOperand);
					break;
				}
				case '-': {
					$display.text(operand - currOperand);
					break;
				}
				case '*': {
					$display.text(operand * currOperand);
					break;
				}
				case '/': {
					if (currOperand != 0) {
						$display.text(operand / currOperand);
					} else {
						alert("What the fuck?!");
						reset();
					}
					break;
				}
			}
		}
		if (currOperation != '=') {
			operation = currOperation;
		} else {
			operation = null;
			afterOperation = false;
			return;
		}
		operand = parseFloat($display.text());
		afterOperation = true;
	} else {
		reset();
	}
});

$operations.click(function(event){

event.preventDefault();

var currOperation = $(this).text();

var currOperand = parseFloat($display.text());

if (currOperation != 'CE') {

// Do the math

if (operation != null && !afterOperation) {

switch(operation) {

case '+': {

$display.text(operand + currOperand);

break;

}

case '-': {

$display.text(operand - currOperand);

break;

}

case '*': {

$display.text(operand * currOperand);

break;

}

case '/': {

if (currOperand != 0) {

$display.text(operand / currOperand);

} else {

alert("What the fuck?!");

reset();

}

break;

}

if (currOperation != '=') {

operation = currOperation;

} else {

operation = null;

afterOperation = false;

return;

}

operand = parseFloat($display.text());

afterOperation = true;

} else {

reset();

}

});

First, we make two additional local variables – currOperation for the current operation and currOperand for the current operand. Then we simply check if the Clear button is pressed – if so, we call the reset() function.
If not, however, we go on with the math.
First, we check if there is already an operation set AND whether the flag afterOperation has a value of false, which means that no operation button has been clicked just before the event, being handled at the moment. If both the upper conditions are satisfied, a switch statement (for the operation, not currOperation) takes care for doing the math. Please note that if we have typed a value (e.g. 5) for example, than chosen ‘+’ operation, type a value again and chose a ‘-‘ operation, the operation variable would point to the last unhandled one – that means the plus operation, so it would be caught and executed by the switch statement. So, at the moment of clicking on the minus sign, the plus operation would be executed.
The expression if (currOperation != ‘=’) {operation = currOperation;} takes care of assigning the current and still not executed operation (the ‘minus’ from the example above) to the operation variable. The operation behind the equal sign is, of course, not to be remembered anywhere – by clicking on the equal sign, we execute the last available operation and reset the operation and the afterOperation flag.
However, no matter how many times we have clicked on an operation button (different from “CE” and “=”),

...
operand = parseFloat($display.text()) 
afterOperation = true;
...

...

operand = parseFloat($display.text())

afterOperation = true;

...

statements would be executed – operand should point to the value, currently available on the display (that is – most likely – the result of the past operation) and afterOperation should be true.
The last two handlers are for the decimal point and the switch sign.

$('#dot').click(function(event){
	event.preventDefault();
	if (!afterOperation) {
		if ($display.text().indexOf('.') < 0) {
			$display.append('.');
		}
	} else {
		$display.text('0.');
		afterOperation = false;
	}
});
$("#sign").click(function(event){
	event.preventDefault();
	if (afterOperation) {
		return;
	} else {
		$display.text(parseFloat($display.text())*(-1));
                afterOperation = true;
	}
});

$('#dot').click(function(event){

event.preventDefault();

if (!afterOperation) {

if ($display.text().indexOf('.') < 0) {

$display.append('.');

}

} else {

$display.text('0.');

afterOperation = false;

}

});

$("#sign").click(function(event){

event.preventDefault();

if (afterOperation) {

return;

} else {

$display.text(parseFloat($display.text())*(-1));

afterOperation = true;

}

});

The ‘dot’ click handler appends a single dot to the digits available in the display if afterOperation flag is false or writes “0.” string in the display in case an operation button has been just clicked on.
The ‘sign’ click handler switched the sign only if the afterOperation flag is set to false.

I really hope the article has been useful and adequately responding to your needs.

RSS file update system with ajax and jquery

December 6, 2011 effecter Client-side scripting, Server-side scripting

After the article about parsing xml/rss data with jquery’s ajax functions, I would now show you how the editing system for the Useful links repository page has been made.
What it actually does is editing/deleting and creating of rss files and respectively the items in them without a single refresh. The most relevant part of the client-side and the whole part of the server-side would be shown.

A demo of the system is here to be found
Please note that no data would be send to the server-side .php file – the ajax function doing this is commented and will not execute. That’s why when reloading the page you are going to see only the currently available categories and their corresponding items – changes made by you would not affect the files and its contents. Please also note that editing of a category or item, newly created by you would also be not possible, because of the same reason – editing is based on existing files and since the demo page actually does not create or alter anything in the categories folder on the server, it would not work as expected when for example trying to edit item in the category you have just added one to.

The files, used by the system:

– index.php – the admin start page, containing HTML and a bit of PHP to list all the currently existing category files (each category file is a RSS file, all available under the Useful Links Repository page)
– adminProcessesController.js – the client-side code which reads existing files and sends requests about file manipulation to the server-side page below (available from the link above)
– adminProcesses.php – the server-side code, which handles the ajax requests, done by the client-side page above
– RSSDocument.php – a file, containing the ifactnet_RSSDocument class, extending the DOMDocument PHP class.
– ifactnet_util.php – a file, containing some little functions (e.g. obtaining files in a folder by given extension, returning the absolute file name (without the extension) and so on…)
– style.css

The entry point – index.php – contains actually a few lines of code, whose main goal is to create the menu, used for the editing. The menu has the following structure:

Create new category
[Category 1]
- Create new item
- [Item 1 in Category 1]
- [Item 2 in Category 1]
[Category 2]
- Create new item
- [Item 1 in Category 2]

…etc…

Clicking on each item or category link gives a possibility to edit it or delete it, creating of items and categories is also done by clicking on the corresponding “Create” option. Let’s now have a look at the more interesting files:

adminProcessesController.js

The current file is the most important, and so the biggest from the set above and would be unfortunately not possible to explain it in details, but I will try to cover the most important moments.
AJAX is used in two functions, declared at the very beginning of the file – the first one for reading an item or channel properties from a .xml file and the second one for sending requests to the php page:

// Find and return the selected item for edit
var loadSelected = function(indexSelected, path) {
	var $toEdit = null;
	$.ajax({
		type: "GET",
		url: path,
		cache: false,
		async: false,
		dataType: "xml",
		success: function(xml) {
			if (indexSelected != "") {
				var $items = $(xml).find('item');
				$toEdit = $items.eq(indexSelected-1);
			} else {
				var $channelProperties = [];
				$channelProperties.push($(xml).find("title").eq(0));
				$channelProperties.push($(xml).find("description").eq(0));
				$channelProperties.push($(xml).find("link").eq(0));
				
				$toEdit = $channelProperties;
			}
		},
		error: function(jqXHR, text, errorMsg) {
			alert("Error - "+errorMsg);
		}
	});
	
	return $toEdit;
}

// Create, edit or delete item/category
var callServerSide = function(properties, path) {
	var responce = "";
	$.ajax({
		type: "POST",
		url: path,
		cache: false,
		data: properties,
		dataType: "text",
		async: false,
		success: function(returnedData) {
			responce = returnedData;
		},
		error: function(jqXHR, text, errorMsg) {
			alert("The following error occured: - "+errorMsg);
		}
	});
	
	return responce;
}

// Find and return the selected item for edit

var loadSelected = function(indexSelected, path) {

var $toEdit = null;

$.ajax({

type: "GET",

url: path,

cache: false,

async: false,

dataType: "xml",

success: function(xml) {

if (indexSelected != "") {

var $items = $(xml).find('item');

$toEdit = $items.eq(indexSelected-1);

} else {

var $channelProperties = [];

$channelProperties.push($(xml).find("title").eq(0));

$channelProperties.push($(xml).find("description").eq(0));

$channelProperties.push($(xml).find("link").eq(0));

$toEdit = $channelProperties;

}

error: function(jqXHR, text, errorMsg) {

alert("Error - "+errorMsg);

}

});

return $toEdit;

}

// Create, edit or delete item/category

var callServerSide = function(properties, path) {

var responce = "";

$.ajax({

type: "POST",

url: path,

cache: false,

data: properties,

dataType: "text",

async: false,

success: function(returnedData) {

responce = returnedData;

error: function(jqXHR, text, errorMsg) {

alert("The following error occured: - "+errorMsg);

}

});

return responce;

}

loadSelected variable (that is unnamed (anonymous) function, assigned to a variable):
The arguments are pretty much self-explanatory – indexSelected is the index of the selected item (obtained by clicking on its title – that a bit latter) and the second one is the path to the xml files. As already explained in a previous article about ajax – the path should be relative to the root directory of your server – for example, the paths, used in css and javascript files are relative to the .html file, where they are included. A path for ajax call to a file under ‘http://domainName.com/lib/news.rss’ should be “/lib/news.rss”, no matter where the javascript file, making the ajax call, actually is.
The ajax call parameters, used in the current function are to be found on the ajax methods documentation page in jquery’s website. There is, however, an important thing to notice – when returning any data, ‘fetched’ from the call, use async: false, like in the example above.
The success callback function returns the item node or an array of three of the channel’s node children – title, description and link. Its argument is the obtained xml (in this case – the whole xml file).

callServerSide variable (again unnamed (anonymous) function, assigned to a variable):
The function uses POST method to send the properties argument to the server side page, the path to which is assigned to path argument.
data property of the ajax function should point to the data, which we are about to send. As you would see later – the data is a regular POST string with the form key1=”value1″&key2=”value2″. dataType is the type of data, expected as answer from the server-side script – in this case it is a plain text, as what the current server-side script returns is either “true” or “false”. The data, returned from the server is passed to the first argument of the success callback function – in our case that be returnedData. Of course, you can name the argument differently.

What the file does further:
It ‘splits’ the different links from the menu by purpose – item editing/deleting, item creating, or category editing/deleting and creating, assigning different anchor sets (depending on the anchors’ classes) to different variables (shown below).
Each set of anchors (for item editing/deleting or item creating, etc…) is handled a little differently on click. Basically, the handling procedures could be categorized as Creating and Editing/Deleting ones.
The creating procedures are a bit tricky, as the newly created item/category titles should be prepended to the menu on the go – as you remember, the menu is created in the index.php with a php code. However, as the aim is to accomplish all the tasks without reloading, the newly created items should be created in both the corresponding file (this is done by the php script) AND in the menu itself. Analogically – newly created categories demand creating of both the category file and the category ‘entry’ in the menu.
Editing procedures edit the content of the item/category in both the files and the menu entries.
When each of the procedures is started (by clicking on the corresponding menu entry(anchor)), a form is shown – with blank fields for creating procedure and populated ones for editing. Both are explained few lines below.
The form submission is the part, where the server-side script is called and the editing/deleting and creating processes are actually handled.

Let’s already come back to the code and especially the different kinds of menu entries:

...
        var $navigation = $("#navigation");
	var $navigationItems = $navigation.find("ul li a");
	var $addCategory = $navigationItems.parent().children("a#addCategory");
	var $addItem = $navigationItems.parent().children("a.addItem");
	var $editCategory = $navigationItems.parent().find("a.category");
	// An alternative way of traversing - parent().siblings() returns all the top-level <li> elements
	var $editItems = $navigationItems.parent().siblings().find("ul li a.item");
...

...

var $navigation = $("#navigation");

var $navigationItems = $navigation.find("ul li a");

var $addCategory = $navigationItems.parent().children("a#addCategory");

var $addItem = $navigationItems.parent().children("a.addItem");

var $editCategory = $navigationItems.parent().find("a.category");

// An alternative way of traversing - parent().siblings() returns all the top-level <li> elements

var $editItems = $navigationItems.parent().siblings().find("ul li a.item");

...

What is omitted is the initialization of another variables, needed for the current implementation of the admin system. As the aim of the article is only pointing out the sole idea behind the ajax calls and the server side script, executed on their request, these are not included in the code. The dollar sign ($) at the beginning of each variable only denotes that the variable holds/points to jQuery object/set of objects.
The variables above are used as follows:

$($navigationItems).live('click', function(e){
	e.preventDefault();
	var $clicked = $(this);
		
	$(".activeInMenu").removeClass("activeInMenu");
		$clicked.addClass("activeInMenu"); // colours the clicked item in red - only cosmetic
        if ($clicked.is($editItems) || $clicked.is($addItem)) {
			var $parentCategory = $clicked.closest("ul").parent().prev("li").children(0);
			// All the items in this current parent category. Here is being searched for the index, obtained below - the index of the item being edited.
			$itemsInParentCategory = $clicked.parent().parent().children();
			// Index of the clicked item's LI tag. IMPORTANT: Item with index 0 is always the default "Add an item" option (A tag) => first item with class "item" comes at index 1.
			itemIndex = $itemsInParentCategory.index($clicked.parent());
			category = $parentCategory.text().toLowerCase();
        }

        // Edit an item
        if ($clicked.is($editItems)) {
                    ...
        // Edit a category
        } else if ($clicked.is($editCategory)) {
                    ...
        // Create an item
        } else if ($clicked.is($addItem)) {
                    ...
         // Create a category
        } else if ($clicked.is($addCategory)) {
                    ...
        }
}); // eo live

$($navigationItems).live('click', function(e){

e.preventDefault();

var $clicked = $(this);

$(".activeInMenu").removeClass("activeInMenu");

$clicked.addClass("activeInMenu"); // colours the clicked item in red - only cosmetic

if ($clicked.is($editItems) || $clicked.is($addItem)) {

var $parentCategory = $clicked.closest("ul").parent().prev("li").children(0);

// All the items in this current parent category. Here is being searched for the index, obtained below - the index of the item being edited.

$itemsInParentCategory = $clicked.parent().parent().children();

// Index of the clicked item's LI tag. IMPORTANT: Item with index 0 is always the default "Add an item" option (A tag) => first item with class "item" comes at index 1.

itemIndex = $itemsInParentCategory.index($clicked.parent());

category = $parentCategory.text().toLowerCase();

}

// Edit an item

if ($clicked.is($editItems)) {

...

// Edit a category

} else if ($clicked.is($editCategory)) {

...

// Create an item

} else if ($clicked.is($addItem)) {

...

// Create a category

} else if ($clicked.is($addCategory)) {

...

}

}); // eo live

An important part here is the use of “live” – it binds the click event not only to the anchors, already created, but also to these, which are appended to the menu on the go – when an item or category is newly created.

What was omitted here (but shown a couple of rows below) is the call of the loadSelected() function. By item/category editing procedure, a form is created on the go and eventually appended to the main div in index.php. Its fields are populated with the data, returned from loadSelected() and a Delete button is added as well.
By creation process, the corresponding forms are shown with blank fields (these forms are already present in the index.php. They are, of course, hidden, until a creation link is clicked on).
Have a look at the code, handling item editing procedure, but have in mind that there are few functions and variables used, whose implementation and declaration are not shown. However, the functions are self-explanatory and all the variables represent different html elements. The only thing which could be of interest here, is the hideTheseNodeValues array – it contains all the item values, which are not to be edited – currently only the pudDate, actually.

// Edit an item
		if ($clicked.is($editItems)) {
			action = itemEditingAction;
			
			$xmlItem = loadSelected(itemIndex, categoriesPath+category+".xml");
			$currentActionField.html("Modifying <span class='hilight'>"+$xmlItem.find("title").text()+"</span> in "+category);
			$editForm.removeFields();

			$xmlItem.children().each(function(){
			var nodeName = $(this).get(0).nodeName;
				if ($.inArray(nodeName, hideTheseNodeValues) == (-1)) {					
					$("<label />").text(capitalize(nodeName)).appendTo($editForm);
					$("<input />").val($(this).text()).attr("type", "text").attr("id", nodeName).attr("name", nodeName).appendTo($editForm);
					$("<br />").appendTo($editForm);
				}
			});
			$("<input />").val("Edit").attr("type", "submit").css("float", "right").appendTo($editForm);
			$deleteButton.appendTo($editForm).show();
			toBePossiblyDeleted = itemEditingAction;
			
			$editForm.display();
		// Edit a category
		} else if ($clicked.is($editCategory)) {
.........

// Edit an item

if ($clicked.is($editItems)) {

action = itemEditingAction;

$xmlItem = loadSelected(itemIndex, categoriesPath+category+".xml");

$currentActionField.html("Modifying <span class='hilight'>"+$xmlItem.find("title").text()+"</span> in "+category);

$editForm.removeFields();

$xmlItem.children().each(function(){

var nodeName = $(this).get(0).nodeName;

if ($.inArray(nodeName, hideTheseNodeValues) == (-1)) {

$("<label />").text(capitalize(nodeName)).appendTo($editForm);

$("<input />").val($(this).text()).attr("type", "text").attr("id", nodeName).attr("name", nodeName).appendTo($editForm);

$("<br />").appendTo($editForm);

}

});

$("<input />").val("Edit").attr("type", "submit").css("float", "right").appendTo($editForm);

$deleteButton.appendTo($editForm).show();

toBePossiblyDeleted = itemEditingAction;

$editForm.display();

// Edit a category

} else if ($clicked.is($editCategory)) {

.........

The last parts of the javascript file are the forms submit handlers and the delete actions, where the callServerSide function is called.

$editForm.submit(function(e){
		e.preventDefault();
        // Edit item
		if (action == itemEditingAction) {
			var properties = $editForm.serialize()+"&category="+category+"&action="+action+"&index="+itemIndex;
			var result = callServerSide(properties, serverScriptsPath);
                        ... //notify on success or failure and edit the current item title in the menu
        // Edit category
		} else if (action == categoryEditingAction) {
            var modifiedCategory = $(this).find("input#category").val();
			var properties = (modifiedCategory == category) ? $editForm.serialize()+"&category="+category+"&action="+action : $editForm.serialize()+"&category="+category+"&action="+action+"&newCategoryName="+modifiedCategory;
                        ... //notify on success or failure and edit the current category title in the menu
		}
});

$editForm.submit(function(e){

e.preventDefault();

// Edit item

if (action == itemEditingAction) {

var properties = $editForm.serialize()+"&category="+category+"&action="+action+"&index="+itemIndex;

var result = callServerSide(properties, serverScriptsPath);

... //notify on success or failure and edit the current item title in the menu

// Edit category

} else if (action == categoryEditingAction) {

var modifiedCategory = $(this).find("input#category").val();

var properties = (modifiedCategory == category) ? $editForm.serialize()+"&category="+category+"&action="+action : $editForm.serialize()+"&category="+category+"&action="+action+"&newCategoryName="+modifiedCategory;

... //notify on success or failure and edit the current category title in the menu

}

});

The serialize() function is the one, creating the POST string – as mentioned at the beginning of the article – it holds key-value pairs, where the keys are the form input names and values are the strings, typed in the corresponding input fields.
The creation processes are pretty much the same, as these shown above, except that they handle the additional appending of items to the menu – that is: [Item N in category M] menu entry for an item or
-[New category name]
– Create new item in [New category name]
menu entries for a whole new category.
The issue: items are created in category files by the php script, categories are created as new files by the same php file, but all that results in different menu structure, which should be handled by the javascript, if no reloading is needed. The alternative of the on-the-go appending of menu entries is a simple refresh of the page – then index.php would list all the existing files and its contents. (I have written about that in the very beginning of the article). However, this refresh would make the whole ajax processing useless – each form action could call the adminProcesses.php file directly, which would handle the request accordingly and eventually reopen the index.php for further item/category processing from user’s side.

The last part of the file:

$deleteButton.live('click', function(){
 ...
});

$deleteButton.live('click', function(){

...

});

handles the deleting of both item and category and removing its menu entries respectively. callServerSide function is called again, only with different parameters, of course.

adminProcesses.php

Finally, the complete server-side code:

<?php
	require_once "RSSDocument.php";
	require_once "ifactnet_util.php";
	
	
	$categoriesPath = realpath("../categories/");
	$allCategories = getAllFiles($categoriesPath, "xml");
	
	if (isset($_POST['action']) && isset($_POST['category'])) {
		$action = $_POST['action'];
		$category = $_POST['category'];
		$filePath = $categoriesPath."/".$category.".xml";
		$updates = array();
		$index = "";
		
		switch($action) {
			case "editItem" : {			
				foreach ($_POST as $nodeName => $nodeValue) {
					if ($nodeName != "category" && $nodeName != "index") {
						$updates[$nodeName] = $nodeValue;
					} else if ($nodeName == "index") {
						$index = $nodeValue;
					}
				}
				
				$rss = new ifactnet_RSSDocument();
				$rss->load($filePath);
				$rss->updateItem($index, $updates);
				$rss->save($filePath);
				
				echo "true";
				break;
			}
			
			case "createItem" : {
				$title = $_POST['title'];
				$description = $_POST['description'];
				$link = $_POST['link'];
				
				$rss = new ifactnet_RSSDocument();
				$rss->load($filePath);
				$rss->addItem($title, $description, $link);
				$rss->save($filePath);
				
				echo "true";		
				break;
			}
			
			case "editCategory": {
				$title = $_POST['title'];
				$description = $_POST['description'];
				$link = $_POST['link'];
				
				$rss = new ifactnet_RSSDocument();
				if (isset($_POST['newCategoryName'])) {
					$oldFilePath = $filePath;
					$filePath = $categoriesPath."/".$_POST['newCategoryName'].".xml";
					
					rename($oldFilePath, $filePath);
				}
				$rss->load($filePath);
				$rss->title($title);
				$rss->description($description);
				$rss->link($link);
				$rss->save($filePath);
				
				echo "true";
				break;
			}
			
			case "createCategory": {
				$title = $_POST['title'];
				$description = $_POST['description'];
				$link = $_POST['link'];
				
				$rss = new ifactnet_RSSDocument();
				$rss->channelProperties($title, $description, $link);
				$rss->save($filePath);
				
				echo "true";
				break;
			}
			
			case "deleteItem": {
				$rss = new ifactnet_RSSDocument();
				$rss->load($filePath);
				$rss->deleteItem($_POST['index']);
				$rss->save($filePath);
				
				echo "true";
				break;
			}
			
			case "deleteCategory": {
				unlink($filePath);
				
				echo "true";
				break;
			}
			
			default: echo "false";
		}
	} else {
		echo "false";
	}
?>

100

101

102

103

104

105

106

<?php

require_once "RSSDocument.php";

require_once "ifactnet_util.php";

$categoriesPath = realpath("../categories/");

$allCategories = getAllFiles($categoriesPath, "xml");

if (isset($_POST['action']) && isset($_POST['category'])) {

$action = $_POST['action'];

$category = $_POST['category'];

$filePath = $categoriesPath."/".$category.".xml";

$updates = array();

$index = "";

switch($action) {

case "editItem" : {

foreach ($_POST as $nodeName => $nodeValue) {

if ($nodeName != "category" && $nodeName != "index") {

$updates[$nodeName] = $nodeValue;

} else if ($nodeName == "index") {

$index = $nodeValue;

}

$rss = new ifactnet_RSSDocument();

$rss->load($filePath);

$rss->updateItem($index, $updates);

$rss->save($filePath);

echo "true";

break;

}

case "createItem" : {

$title = $_POST['title'];

$description = $_POST['description'];

$link = $_POST['link'];

$rss = new ifactnet_RSSDocument();

$rss->load($filePath);

$rss->addItem($title, $description, $link);

$rss->save($filePath);

echo "true";

break;

}

case "editCategory": {

$title = $_POST['title'];

$description = $_POST['description'];

$link = $_POST['link'];

$rss = new ifactnet_RSSDocument();

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

$oldFilePath = $filePath;

$filePath = $categoriesPath."/".$_POST['newCategoryName'].".xml";

rename($oldFilePath, $filePath);

}

$rss->load($filePath);

$rss->title($title);

$rss->description($description);

$rss->link($link);

$rss->save($filePath);

echo "true";

break;

}

case "createCategory": {

$title = $_POST['title'];

$description = $_POST['description'];

$link = $_POST['link'];

$rss = new ifactnet_RSSDocument();

$rss->channelProperties($title, $description, $link);

$rss->save($filePath);

echo "true";

break;

}

case "deleteItem": {

$rss = new ifactnet_RSSDocument();

$rss->load($filePath);

$rss->deleteItem($_POST['index']);

$rss->save($filePath);

echo "true";

break;

}

case "deleteCategory": {

unlink($filePath);

echo "true";

break;

}

default: echo "false";

}

} else {

echo "false";

}

The file uses couple of functions from the ifactnet_util.php, mentioned at the beginning of the article, which, I hope, are self-explanatory. The ifactnet_RSSDocument class is going to be included in another post for free use.

What adminProcessing.php actually does is to either edit, delete or create an item or a category, using a controlling variable – $action. As a response for each task, it simply echoes true on success, or false on failure, thus ‘sending’ it to the AJAX call (callServerSide()), which returns it to a certain variable (already in the javascript file – adminProcessesController.js). According to the answer, returned from the server side, either an error or success message message is shown.
The adminProcessing.php uses the POST request, sent from the AJAX call in its $_POST variable – take for example the following POST string – item=item1&title=title1, which would result in a $_POST array with two pairs key=>value – $_POST[‘item’] would give ‘item1’ and $_POST[‘title’] would give title1.

Conclusion

What AJAX enables us to do is to send either GET or POST requests to be (PUT and DELETE are available as well – refer to the ajax() manual in the jQuery website) processed by the server (in our case the server processing is actualy the adminProcesses.php file) without reloading the page.
Data sent to the server via POST method for example is available in the php $_POST array. The data is processed by the server and when needed is ‘returned’ to the same ajax call with a simple echo statement. When expecting data from the server-side, it is good to set the dataType property of the ajax function to the data type you are waiting – e.g. text, json or xml. However, not doing so would simply result in the so called “intelligent guess” – the jQuery would try to guess what type the received data is.
I hope that the article was of use for you, though its length and the fairly big amount of code not shown here, but taking part in the whole script.

Airport departure board or split-flap display effect with JavaScript

November 21, 2011 effecter Client-side scripting

In this tutorial I’ll show you how to achieve the split-flap display (aka airport departure board) effect with JavaScript. Now available also as Jquery plugin

Before we start with the coding, let my explain really quick what we’ll do. For the purpose of this tutorial I’ve prepared a table with strings. My if-act (effect) will be executed on mouse over and stopped on mouse out if necessary. Let’s get started!

When you look at an airport departure board what do you see? Yep, flipping characters! So lets begin by defining the chars we want to flip in a long string.

var chars="#@!$%&*()_-0123456789abcdefghijklmnpqrstuvwxyz ";

1	var chars="#@!$%&*()_-0123456789abcdefghijklmnpqrstuvwxyz ";

Let’s put this variable in the body of a constructor function that will be our flipper class.

function flipper (obj) {
     var chars="#@!$%&*()_-0123456789abcdefghijklmnpqrstuvwxyz ";
}

function flipper (obj) {

var chars="#@!$%&*()_-0123456789abcdefghijklmnpqrstuvwxyz ";

}

As you can see the constructor has 1 parameter that is the object whose innerHTML we’ll flip. In order to do that we need the chars of the innerHTML in an array. Chopping a string to array is simple with the method .split() of the String class. I also use another two arrays. The first I called indexes holds the indexes of the chars that need to be flipped. The other one is the array that will be flipped and it holds indexes of chars in our chars variable. With a little bit of initialization we come to this:

function flipper (obj) {
    var chars="#@!$%&*()_-0123456789abcdefghijklmnpqrstuvwxyz ";
    this.obj = obj;
    this.textArray = this.obj.innerHTML.split("");
    this.html = this.obj.innerHTML;
    this.indexes = [];
    this.cia = [];                        // CIA - just a coincidence. Stands for Character Indexes Array
    this.interval;
    var _this = this;

    for (var i = 0; i<this.textArray.length; i++) {
	this.cia.push(0);
	this.indexes.push(i); 
    }
}

function flipper (obj) {

var chars="#@!$%&*()_-0123456789abcdefghijklmnpqrstuvwxyz ";

this.obj = obj;

this.textArray = this.obj.innerHTML.split("");

this.html = this.obj.innerHTML;

this.indexes = [];

this.cia = []; // CIA - just a coincidence. Stands for Character Indexes Array

this.interval;

var _this = this;

for (var i = 0; i<this.textArray.length; i++) {

this.cia.push(0);

this.indexes.push(i);

}

We’ll come to the rest of the variables in a moment but first take a look at the initialization loop. When the if-act starts every char from the innerHTML will start to flip from the char at position 0 in chars (#). I need all of them to start rolling and that’s why I push all indexes in the indexes array. Notice that indexes in this variable correspond to those of both the textArray and the cia. The flipping will be handled by a function called roll(). In its body there is a loop trough indexes. For every index I increment the value in cia and thus go another char forward from chars until I reach the char that is at the same index in textArray. In that case I exclude the index so that it’s not flipped anymore. The function looks like this:

this.roll = function () {
		
		for(var i = 0; i<this.indexes.length; i++) {
			this.cia[this.indexes[i]]++;
		if (chars.charAt(this.cia[this.indexes[i]]).toUpperCase() === this.textArray[this.indexes[i]].toUpperCase()) this.indexes.splice(i,1);
		}
		

		this.repaint();
		if (this.indexes.length == 0) this.stop(); // if no chars need to be flipped - stop
	}

this.roll = function () {

for(var i = 0; i<this.indexes.length; i++) {

this.cia[this.indexes[i]]++;

if (chars.charAt(this.cia[this.indexes[i]]).toUpperCase() === this.textArray[this.indexes[i]].toUpperCase()) this.indexes.splice(i,1);

}

this.repaint();

if (this.indexes.length == 0) this.stop(); // if no chars need to be flipped - stop

}

The repaint function assembles the string and puts/shows it.

this.repaint = function () {
	var txt='';
	for (var i = 0; i<this.cia.length; i++) txt+=chars.charAt(this.cia[i]);
	this.obj.innerHTML=txt;
}

this.repaint = function () {

var txt='';

for (var i = 0; i<this.cia.length; i++) txt+=chars.charAt(this.cia[i]);

this.obj.innerHTML=txt;

}

The roll method is called every 70ms by setInterval(). That’s what I need the this.interval variable for.

this.timeInt = function () {
		this.interval=setInterval(function () {_this.roll()},70);
	}

this.stop = function () {
	clearInterval(this.interval); // no more rolling
	this.obj.innerHTML = this.html; // restore the original innerHTML
}

this.timeInt = function () {

this.interval=setInterval(function () {_this.roll()},70);

}

this.stop = function () {

clearInterval(this.interval); // no more rolling

this.obj.innerHTML = this.html; // restore the original innerHTML

}

_this holds the instance scope. And the code of the whole class goes like this:

function flipper (obj) {
 var chars="#@!$%&*()_-0123456789abcdefghijklmnpqrstuvwxyz ";
 this.obj = obj;
 this.textArray = this.obj.innerHTML.split("");
 this.html = this.obj.innerHTML;
 this.indexes = [];
 this.cia = [];
 this.interval;
 var _this = this;
 
 for (var i = 0; i<this.textArray.length; i++) {
	this.cia.push(0);
	this.indexes.push(i); 
}

	this.start = function () {
		this.timeInt();
	}
	
	this.stop = function () {
		clearInterval(this.interval);
		this.obj.innerHTML = this.html;
	}
	
	this.repaint = function () {
		var txt='';
		for (var i = 0; i<this.cia.length; i++) txt+=chars.charAt(this.cia[i]);
		this.obj.innerHTML=txt;
	}
	
	this.roll = function () {
		
		for(var i = 0; i<this.indexes.length; i++) {
			this.cia[this.indexes[i]]++;
		if (chars.charAt(this.cia[this.indexes[i]]).toUpperCase() === this.textArray[this.indexes[i]].toUpperCase()) this.indexes.splice(i,1);
		}
		

		this.repaint();
		if (this.indexes.length == 0) this.stop();
	}
	
	this.timeInt = function () {
		this.interval=setInterval(function () {_this.roll()},70);
	}

}

function flipper (obj) {

var chars="#@!$%&*()_-0123456789abcdefghijklmnpqrstuvwxyz ";

this.obj = obj;

this.textArray = this.obj.innerHTML.split("");

this.html = this.obj.innerHTML;

this.indexes = [];

this.cia = [];

this.interval;

var _this = this;

for (var i = 0; i<this.textArray.length; i++) {

this.cia.push(0);

this.indexes.push(i);

}

this.start = function () {

this.timeInt();

}

this.stop = function () {

clearInterval(this.interval);

this.obj.innerHTML = this.html;

}

this.repaint = function () {

var txt='';

for (var i = 0; i<this.cia.length; i++) txt+=chars.charAt(this.cia[i]);

this.obj.innerHTML=txt;

}

this.roll = function () {

for(var i = 0; i<this.indexes.length; i++) {

this.cia[this.indexes[i]]++;

if (chars.charAt(this.cia[this.indexes[i]]).toUpperCase() === this.textArray[this.indexes[i]].toUpperCase()) this.indexes.splice(i,1);

}

this.repaint();

if (this.indexes.length == 0) this.stop();

}

this.timeInt = function () {

this.interval=setInterval(function () {_this.roll()},70);

}

You can check out the demo here: split-flap display if-act

The second table holds another version of my class which starts to flip the chars one by one.

Tips and Hints: You can control the speed of the if-act by reducing/increasing the time in setInterval() and/or the number of the chars in chars.

For questions, suggestions or requests use the comment section below.

Useful Links Repository

November 19, 2011 effecter Uncategorized

The blog page about Useful Links Repository @ http://if-act.net/faddap/

Useful Links Repository was created with the intention to serve as a reference guide for valuable web development resources all over the web. The collected links are divided by categories, as each category is available as RSS Feed. There is for now no possibility for everyone to freely add resources, so please share your proposals and/or comments here.

The knowledge

I would be glad to share the knowledge gained from the creation process, posting it in the server- and client-side scripting categories and I hope the topics (DOM traversing with php and jQuery, ajax function calls with POST and GET types and the ifactnet_RSSDocment class, extending the DOMDocument) are all going to be useful as well. The creation of the admin system, offering instant modifications over the RSS files and their content with the help of AJAX requests, is briefly described here.

Parsing XML/RSS data with AJAX and jQuery

November 9, 2011 effecter Client-side scripting

As you already probably know, AJAX is a javascript technology providing us with an easy way of reading and/or parsing data from the server without using even a single line of server-side language in most of the cases, or as w3schools says – “AJAX is the art of exchanging data with a server, and update parts of a web page – without reloading the whole page.“. Although it can freely be used without any library, when using jQuery in our project, why not trying its AJAX functions as well?

What is shown in the current post is RSS file data parsing with the jQuery.ajax() method. As a sample XML I am using a RSS file, used in my Useful links repository. As the file is with ever changing (let’s hope expanding) content, I would not show its contents here, but instead – in the demo page.
Let’s start first with the code I am actually using in the page where I am editing the content of the RSS Feeds in the Useful links repository.

var getXMLElement = function(url, element) {
	 $.ajax({
		type: "GET",
		url: url,
		cache: false;
		dataType: "xml",
		success: function(xml) {
			$(xml).find('item title').each(function() {
					if ( $.trim(element) == $.trim($(this).text()) ) {
						var nodeToEdit = $(this).parent();
						
						var title = element;
						var description = nodeToEdit.find('description').text();
						var link = nodeToEdit.find('link').text();
						
						$("#title").val(title);
						$("#description").val(description);
						$("#link").val(link);
					}
			});
		},
		error: function(jqXHR, text, errorMsg) {
			alert("Error opening file - "+errorMsg);
		}
	});
}

var getXMLElement = function(url, element) {

$.ajax({

type: "GET",

url: url,

cache: false;

dataType: "xml",

success: function(xml) {

$(xml).find('item title').each(function() {

if ( $.trim(element) == $.trim($(this).text()) ) {

var nodeToEdit = $(this).parent();

var title = element;

var description = nodeToEdit.find('description').text();

var link = nodeToEdit.find('link').text();

$("#title").val(title);

$("#description").val(description);

$("#link").val(link);

}

});

error: function(jqXHR, text, errorMsg) {

alert("Error opening file - "+errorMsg);

}

});

}

About the Ajax primer above

The function above takes url and element as arguments, where url is the path to the file, which we are about to open for parsing and would be passed to url parameter of the jQuery.ajax() method. The element is used for searching a string in the parsed file, but have in mind that the logic behind my search is a bit weak, as it would not work correctly if there are two or more equal “title” strings in the “item” nodes.

A bit over the RSS files

The obligatory nodes (tags) of a RSS file are title, link, description and at least one item for the actual content, where each item should have the title, link and description tags itself as well. More about the structure of a RSS file and other optional elements could easily be found on google. Now let’s go back to the Ajax calls.

The url parameters

What you need to know when opening files with Ajax is that the path for the URL parameter of each method is relative to the root of your server, no matter where the HTML or Javascript files actually are. Actually, you won’t be able to make an Ajax call to any other (web) server. Let’s observe for example the following structure: http://myDomainName.net/library/mainFeed.xml. To pass a relative path to the xml file as argument, you should use “/library/mainFeed.xml”.

jQuery.ajax() method parameters used in the first example

The other jQuery.ajax() parameters are type – the default one is “GET”, when also “POST”, “PUT” and “DELETE” are available, but the latter two are not supported by all the browser, according to the jquery ajax() documentation page. Setting cache parameter to false would force the browse not to cache the page and the dataType tells us how the returned data would be formatted. Success is a parameter, expecting a callback function to be executed by successful load, while callback “linked” to the error parameter would be executed by any errors loading the data. Both the functions could get data, textStatus and jqXHR as arguments, in the case above – xml argument passed to success represents the data, fetched from the file as xml object (because of the dataType: “xml”).

Traversing over XML-formatted data

Now, that was pretty much the basics, the actual parsing of the data depends entirely on you, I would only give you a few (let’s hope useful) examples. When formatted as xml, the returned data could be traversed with jQuery.find() method, as you can see from the example above. Using it with the current “items title” argument would give us a set of title tags, children of the item tags. Iterating over find(“title”) would give us pretty much the same, only with the channel tag’s title. As you can see, when formatted as xml, the data returned by the ajax call would be easily manipulated like any other proper DOM Object.

If we need to return the data, fetched by the ajax call, instead of processing it in a callback function, according to my research on the matter, one thing is obligatory, namely:

$.ajax()({
...
async: false,
...
;});

$.ajax()({

...

async: false,

...

;});

Now, lets substitute the dots above with the actual code from the demo page:

var getXML = function(url) {
	var xmlDoc = null;
	$.ajax({
		type: "GET",
		url: url,
		dataType: "xml",
		async: false,
		success: function(xml) {
			xmlDoc = $(xml);
		},
		error: function(jqXHR, text, errorMsg) {
			alert("The following error occured: "+errorMsg);
		}
	 });
	 return xmlDoc;
}
function write(node, niveau) {
	// indention for better formatting
	var indent = "&nbsp;&nbsp;";
	if (niveau == null) {
		niveau = 0;
	}
	for (var i=0; i<niveau; i++) {
		indent += indent;
	}
	
	// actual implmentation
	$("#recursive").append("<br />"+indent+"["+node.get(0).nodeName+"]");
	if (node.children().length) {
		niveau++;
		node.children().each(function() {
			write($(this), niveau);
		});
	} else {
		$("#recursive").append(node.text()/*+"[\\"+node.get(0).nodeName+"]"*/);
	}
	// Optional line - closes all the tags, but fucks up the formatting. (the indent should be somehow splitted)
	//$("body").append("[\\"+node.get(0).nodeName+"]<br />");
}
$(document).ready(function() {
	var link = "/faddap/categories/javascript.xml";
	var xmlDoc = getXML(link);
	
	// Procesing by known structure
	xmlDoc.find('item').each(function(){
		$(this).children().each(function(){
			// this refers to xmlElement, while $(this) is a jQuery object
			$("#processing").append(this.nodeName+" - "+$(this).text()+"<br />");
		});
	});
	
	// Simple recursive printing of all the nodeNames and nodeValues.
	write(xmlDoc);
});

var getXML = function(url) {

var xmlDoc = null;

$.ajax({

type: "GET",

url: url,

dataType: "xml",

async: false,

success: function(xml) {

xmlDoc = $(xml);

error: function(jqXHR, text, errorMsg) {

alert("The following error occured: "+errorMsg);

}

});

return xmlDoc;

}

function write(node, niveau) {

// indention for better formatting

var indent = "  ";

if (niveau == null) {

niveau = 0;

}

for (var i=0; i<niveau; i++) {

indent += indent;

}

// actual implmentation

$("#recursive").append("<br />"+indent+"["+node.get(0).nodeName+"]");

if (node.children().length) {

niveau++;

node.children().each(function() {

write($(this), niveau);

});

} else {

$("#recursive").append(node.text()/*+"[\\"+node.get(0).nodeName+"]"*/);

}

// Optional line - closes all the tags, but fucks up the formatting. (the indent should be somehow splitted)

//$("body").append("[\\"+node.get(0).nodeName+"]<br />");

}

$(document).ready(function() {

var link = "/faddap/categories/javascript.xml";

var xmlDoc = getXML(link);

// Procesing by known structure

xmlDoc.find('item').each(function(){

$(this).children().each(function(){

// this refers to xmlElement, while $(this) is a jQuery object

$("#processing").append(this.nodeName+" - "+$(this).text()+"<br />");

});

// Simple recursive printing of all the nodeNames and nodeValues.

write(xmlDoc);

});

First have a look at the link variable on line 41 – the relative path used there is actually almost the same as the absolute one, which it corresponds to – “http://if-act.net/faddap/categories/javascript.xml”.

The getXML function

Now let’s go to getXML – the function which returns the fetched data, using the xmlDoc variable. Have in mind that $(xml) on line 9, is a jQuery object, representing the xml data. As everything else in the Ajax call here is pretty much the same as the code used in the Ajax code in the first primer, let’s go a bit down the code. Already having the XML Object, hold by the xmlDoc variable on line 42, we can traverse it using standard jQuery functions for traversing DOM elements.

The recursive write function

The recursive function write, shown above is just a basic primer for iterating over RSS document with unknown structure and does not cover namespaces, additional tag attributes and so on.

More on the matter

All the jQuery’s Ajax methods and functions
More on the XMLHttpRequest Call
w3schools Ajax tutorial