Posts Tagged: Javascript


5
Jan 11

Ajaxy Pagination using jQuery

Saw this today: AJAX Pagination using jQuery and PHP with Animation. While it is quite simple to add paging using jQuery, why not make it work without the jQuery as well?

It isn’t too hard to do, add a url to each of the a tags, then load the content based on that instead.

This would be the code (some of it has been left as an exercise for the reader):

the table would look like this (or you know, something else…)

page.php is sort of like a controller… for a one off page this would be fine, I would abstract it a bit more if it were part of a bigger site.

paged_results.tpl.php Spit out the stuff to the users

Here is script.js… it has the javascript that would be used to make it ahem… ajaxy

Code is here if you want it: https://gist.github.com/767437


24
Mar 10

jQuery :contains selector and unicode characters

I have an element like this (to save space in the menu since they can put up to 255 characters in it):

    <span class="tool_tip" title="The full title">The ful&#8230;</span>

While this seems to work:

    jQuery('span:contains(…)');

this does not:

    jQuery('span:contains(&#8230;)');

I am pretty sure that it would be bad to use the first one because if someone else saves the file, or the browser decides to get the file in a different character set for some reason things will not work.

There has to be a way to properly select this span, right? Turns out there is:

 
    jQuery('span:contains(\u2026)');

In other words:

Use the hex value instead of the decimal value as the selector and things will work out fine.


10
Mar 10

Using the jQuery-UI Autocomplete Widget

The latest version of jQuery-ui has an autocomplete widget. No more looking for one that will work (you get the point) with the version of jQuery that you have.

All you have to do is pull the latest one down from the jQuery-ui site and you are good to go.

First the jQuery to use the autocomplete plugin:

 
//we will be using this to cache the responses from the server
var ajaxCache = {};
 
//activate autocomplete on boxes that have the autocomplete class
$("input.auto_complete").autocomplete({
	source: function(request, response) {
		//what are we searching for
		var query_type = $(this).attr('element').attr('id');
		//the cacheterm that we use to save it in the cache
		var cachedTerm = (request.term + '' + query_type) . toLowerCase();
		//if the data is in the cache and the data is not too long, use it
		if (ajaxCache[cachedTerm] != undefined && ajaxCache[cachedTerm].length < 13) {
			//map the data into a response that will be understood by the autocomplete widget
			response($.map(ajaxCache[cachedTerm], function(item) {
				return {
					label: item.value,
					value: item.value
				}
			}));
		}
		//get the data from the server
		else {
			$.ajax({
				url: "/ajax/auto_complete.php",
				dataType: "json",
				data: {
					query_type: query_type,
					q: request.term
				},
				success: function(data) {
					//cache the data for later
					ajaxCache[cachedTerm] = data;
					//map the data into a response that will be understood by the autocomplete widget
					response($.map(data, function(item) {
						return {
							label: item.value,
							value: item.value
						}
					}));
				}
			});
		}
	},
	//start looking at 3 characters because mysql's limit is 4
	minLength: 3,
	//when you have selected something
	select: function(event, ui) {
		//close the drop down
		this.close
	},
	//show the drop down
	open: function() {
		$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
	},
	//close the drop down
	close: function() {
		$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
	}
});

The ajax/auto_complete.php would look something like this:

 
<?php
 
//make sure that we only allow valid query types
/**
 * @var array
 */
$validQueryTypes = array(
	'country',
	'city',
	'first_name',
	'last_name',
);
/**
 * @var string
 */
$column = (isset($_POST['query_type']) && in_array($_POST['query_type'], $validQueryTypes))? $_POST['query_type'] : null;
/**
 * @var string
 */
$q = isset($_POST['q'])? $_POST['q'].'%':null;
 
 
if($column && $q){
	switch($column){
		case 'country':
		case 'city':
			$q = new sQuery();
			$results = $q->from('addresses')
				//to make things simpler for the javascript, always select as value
				->column($column . ' as value')
				->where($column, $q, 'LIKE')
				->getAll();
 
			//SELECT $column as value FROM addresses WHERE $column LIKE '$q%';
			break;
		case 'first_name':
		case 'last_name':
			$q = new sQuery();
			$results = $q->from('users')
				->column($column . ' as value')
				->where($column, $q, 'LIKE')
				->getAll();
			//SELECT $column as value FROM users WHERE $column LIKE '$q%';
			break;
	}
 
	//$result is something like this:
	array(
		array('value'=>'Canada'),
		array('value'=>'America'),
		array('value'=>'Mexico'),
		array('value'=>'Netherlands'),
	);
 
	//then return it to the javascript
	echo json_encode($results);
}
exit;

Then the simplest part of the exercise:

 
City:
<input type="text" name="city" id="city" title="enter a city" class="auto_complete" />
 
Country:
<input type="text" name="country" id="country" title="enter a country" class="auto_complete" />
 
First Name:
<input type="text" name="first_name" id="first_name" title="enter a first_name" class="auto_complete" />
 
Last Name:
<input type="text" name="last_name" id="last_name" title="enter a last_name" class="auto_complete" />

And if they don’t have javascript enabled it doesn’t detract from the form (go progressive enhancement!).

Edit:

This post is pretty old, but just in-case you were wondering sQuery is this: https://github.com/SeanJA/ShoestringPHP/blob/master/library/classes/squery.class.php and there is also a better tested more standalone-y version here as a separate project: https://github.com/SeanJA/query-builder.


16
Dec 09

Daily Digest for December 16th

twitter (feed #2)
New blog post: Daily Digest for December 15th http://blog.seanja.com/2009/12/daily-digest-for-december-15th/ [SeanJA]
googlereader (feed #5)
googlereader (feed #5)
Shared Truecolor.
googlereader (feed #5)
googlereader (feed #5)
twitter (feed #2)
RT @jephjacques: WHOOOOA REMEMBER METALLICA AND BLUE OYSTER CULT??!?!?!? #everymetalbandIlistento [SeanJA]
twitter (feed #2)
Hey, the torch is in Peterburrah right now [SeanJA]
twitter (feed #2)
Dear lady on TV… reindeer are not carnivorous [SeanJA]
twitter (feed #2)
Why is there javascript in adobe reader? What point could that possibly have? [SeanJA]
twitter (feed #2)
I have always wanted a name that features a definite condition [SeanJA]
twitter (feed #2)
Free SEO toolkit from M$ http://is.gd/5pTO4 [SeanJA]
googlereader (feed #5)
twitter (feed #2)
OH NO! RT @rtraction: Nuts! Out of Stock! Mini Weapons of Mass Destruction: Build Implements of Spitball Warfare – http://bit.ly/8hJ5AO [SeanJA]
twitter (feed #2)
twitter (feed #2)
Sooooo…. why are there dragons in wonderland? http://bit.ly/5cc7p5 [SeanJA]
twitter (feed #2)
twitter (feed #2)
Ok… they are god’s rather large monsters [SeanJA]

1
Dec 09

Simple Tool Tip with jQuery

I saw a post that talked about how to make a simple tool tip with jQuery, but that post did not make a plugin of it. It just added the function to the global scape, meaning that it was not chainable and it would only be applied to the a element. So I took the code for the first example as a starting point and turned the first example into a plugin. So, based on the first example, here we have yet another tooltip plugin, it uses the title attribute so it is perfectly accessible to people without javascript enabled. It can be applied to any element, and it is chainable and it will also be applied to new elements on the page instead of you having to re attach it to every item that you add to the dom.

Here is the javascript:

// starting the script on page load
$().ready(function(){
	$('a').simple_tip();
});

The html:

 
<a href="#" title="This is a tooltip">I have a tool tip!</a>
 
<a href="#">I don't have a tool tip!</a>

The demo.

The code is available here:
http://code.google.com/p/jsimpletip/downloads/list

The code is licensed:
Mit and GPL v2