Web Lee » Jquery

Secure Jquery Ajax Request

Lee — Thu, 25 Jun 2009 16:37:56 +0000

As we have seen in our previous Ajax requests we can grab data from different sources to output the the page. But what happens if the client has logged timmed out ? Trying to send the client to a login page can be a little more tricky than it sounds.

In this screencast I will show you a quick way to listen for unauthorized access and send the client to a login page.

Screen Time: 12:20

Please see below the key piece of code you will need.


	$().ajaxError(function(xhr, status, err){
   		if(status.status == 401)
   			window.location.href = '/welcome/login.php';
 	});

Codeigniter Pagination Part 4

Lee — Fri, 12 Jun 2009 20:45:48 +0000

Hopefully this will be a fun screencast for you. We will be using Jquery $.ajax GET request combined with the Codeigniter Pagination Library.

Im sure you will be suprised how easy this is achieved.

Screen Time: 16:42

Download example files here .

Simple Jquery Ajax with Codeigniter Part 4

Lee — Wed, 10 Jun 2009 19:31:43 +0000

Hopefully by now you will have had a better understanding on how to use Jquery with Coedigniter. We have looked at the $.post & $.get request so far and have passed some simple data between them.

In this the last part of this series we will take a look at the $.ajax request. The $.ajax request is very powerfull and far to much to talk about in this one screencast so I would strongly suggest you take a look at the JQuery Documentation

Screencast Time: 19:18

Download Example Files here .

In a future screencast we will have another look at the Ajax request on how we can make better use of it for multiple ajax request throughout your site. So be sure to follow us by the RSS feed or Twitter.

Thank you for tunning in .

Simple Jquery Ajax with Codeigniter Part 3

Lee — Mon, 08 Jun 2009 22:39:41 +0000

So now we have looked at the $.get request we now are going to look at the $.post request.

In this screencast we can see how we can submit form data through this request.

Screencast Time: 14:04

All download files will be displayed on the last post.

Simple Jquery Ajax with Codeigniter Part 2

Lee — Mon, 08 Jun 2009 15:17:47 +0000

Following on from part one in this screencast we will take a look at one of the Ajax functions $.get.

We will take a look at how to perfom a $.get request and how to handle the callback.

Screencast Time: 21:55

I will add a download on the last screecast of this series.

Simple Jquery Ajax with Codeigniter Part 1

Lee — Sun, 07 Jun 2009 19:51:05 +0000

I thought before I do my next screencast with pagination I would do an introduction with Jquery Ajax.

There are a number of excellent Javascript Frameworks (Prototype, Mootools, Dojo, Scriptaculous etc..) but my personal flavour is Jquey. Like Codeigniter it has a great user guide which is easy to follow and a great network of users. And one of the great tools it has in its API is AJAX (Asynchronous JavaScript and XML).

I thought trying to explain it all in one screencast would be quite long so I have broken it down to 4. This first one explains on how easy Jquery can be to setup and some tools you mind find usefull.

Getting Prepared

Screencast Time: 11:30

Download Firephp Library here .

Constant Code:

//
// Define Ajax Request
define('IS_AJAX', isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');
//

Helpful Ajax Testing Tools & Setup:

Jquery – jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
Firebug – Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. Cost: Free
Firephp – FirePHP enables you to log to your Firebug Console using a simple PHP method call. Free
Charles – Charles is an HTTP proxy / HTTP monitor / Reverse Proxy that enables a developer to view all of the HTTP and SSL / HTTPS traffic between their machine and the Internet. This includes requests, responses and the HTTP headers. Cost $50.00
Fiddler – Fiddler is a HTTP Debugging Proxy which logs all HTTP traffic between your computer and the Internet. Fiddler allows you to inspect all HTTP Traffic, set breakpoints, and “fiddle” with incoming or outgoing data. Cost: Free.
Jquery Visual – Sometimes you just cant beat seeing how something actually work!

Radio Button Replacement With Style

Lee — Sat, 30 May 2009 00:20:28 +0000

I thought I would kick off this blog with a short tutorial on how you can make form radio buttons look and feel allot more interesting.

A recent job required the user to select a radio button which then on form submit depending on the result would load a specific page. OK im hearing you a normal set of radio buttons would have done the job fine but it just looked so boring and took up so little space. So I decided that with a bit of CSS & Jquery magic we could make it look allot more interesting.

clear

First lets start of with a normal form with a set of radion buttons.





Fancy Checkbox




Check an Option


Option 1: 

Option 2: 

Option 3: 

Option 4:

Ok now we have our basic form we need to add our styled buttons and tick to show which radio button is active. I have provided in the download the PSD’s for this example but lets see the code. Below you can just see the HTML for the list elements but I have used used css sprites for the hover over / active states (basically one image for both states).



Option
Option
Option
Option

So now to the Javascript. We need to bind the click function to see which link we have clicked then update the checkbox and then update the list to reflect this action. We will use Jquery Selector Hierarchy (parent > child) method which looks like this.

$(document).ready(function () {
$("#list li > a").click(function (event) {
// Work starts here
});
});

So now we have a click event function which will trigger once we click on any of the list links. We will now need to remove all active elements as trying to add/remove from each one will create extra code.

$(document).ready(function () {

$("#list li > a").live('click', function (event) {
// First disable the normal link click
event.preventDefault();

// Remove all list and links active class.
$('#list > li, #list > li a').removeClass("active");
return false;
});
});

Ok thats working nicely but now the fun part. We need to grad the link clicked ID and then make the correct radio button to checked and update the CSS.

$(document).ready(function () {

$("#list li > a").live('click', function (event) {
// First disable the normal link click
event.preventDefault();

// Remove all list and links active class.
$('#list .active').removeClass("active");

// Grab the link clicks ID
var id = this.id;

// The id will now be something like "link1"
// Now we need to replace link with option (this is the ID's of the checkbox)
var newselect = id.replace('link', 'option');

// Make newselect the option selected.
$('#'+newselect).attr('checked', true);

// Now add active state to the link and list item
$(this).addClass("active").parent().addClass("active");

return false;
});

});

And that’s it !!. You now have with just a few lines of code a nice replacement for your radio buttons.

Hope you enjoyed it.