I found this list of auto-complete plugins and scripts on dzine blog today and decided to share it. Looks like a nice collection.
I found this list of auto-complete plugins and scripts on dzine blog today and decided to share it. Looks like a nice collection.
Posted at 12:28 PM in JavaScript | Permalink | Comments (0) | TrackBack (0)
I built this for one small project then found myself using it all over the place. It's basically a generic JavaScript 'class'* that allows you to easily build YUI charts with very little JavaScript code.
If you use YUI charts as suggested in many examples you'll need configuration code for each individual chart which, if you have more than 2 or 3 charts on a page, can make your code appear cluttered. With the ChartsAjax class, all the chart options can be set with JSON data built dynamically on the server and retrieved from one AJAX call. This includes not only data for the datastore but also styling and column definitions.
Below is a breakdown with code examples. Feel free to offer suggestions on how to make it better!
function ChartsAjax(){
var statType='';
var chartType='';
this.buildChart = buildChart;
this.useData = useData;
this.handleFailure = handleFailure;
function buildChart(type, chart){
statType = type;
chartType = chart;
var sourceUrl = '/stats/get_chart/'+statType+'/';
var callback = {success:this.useData,failure:this.handleFailure};
AjaxObject.makeRequest(sourceUrl, callback);
};
function useData(o){
try {var json = YAHOO.lang.JSON.parse(o.responseText);}
catch (e) {return false;}
YAHOO.widget.Chart.SWFURL = "http://yui.yahooapis.com/2.7.0/build/charts/assets/charts.swf";
var msDs = new YAHOO.util.DataSource( json.Response.Results );
msDs.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
msDs.responseSchema = {
fields:json.Response.Fields
};
var targetDiv = statType;
var chartDefinition = {
series: json.Response.Series,
xField: json.Response.XField,
yField: json.Response.YField,
style: json.Response.Style
}
switch(chartType){
case "line":
var chart = new YAHOO.widget.LineChart(targetDiv, msDs, chartDefinition);
break;
case "column":
var chart = new YAHOO.widget.ColumnChart(targetDiv, msDs, chartDefinition);
break;
}
};
function handleFailure(o){
//do something with o.responseText
}
};
var AjaxObject = {
makeRequest:function(url, callback){var request = YAHOO.util.Connect.asyncRequest('GET', url, callback);}
};
<div id="products_sold" >Loading...</div>
function load_charts(){
var products_sold = new ChartsAjax();
products_sold.buildChart('products_sold', 'line');
}
YAHOO.util.Event.onDOMReady(load_charts);
{"Response": {
"YField": "",
"Style": {
"legend": {
"display": "bottom"},
"xAxis": {"labelRotation": "-90"},
"yAxis": {"titleRotation": "-90"}},
"Fields": ["date", "total"],
"Results": [
{"date": "05-27", "total": 147},
{"date": "05-28", "total": 105},
{"date": "05-29", "total": 160},
{"date": "05-30", "total": 40},
{"date": "05-31", "total": 66},
{"date": "06-01", "total": 136},
{"date": "06-02", "total": 243}],
"Series": [{
"yField": "total",
"displayName": "Total Products Sold"}],
"XField": "date"}}
Posted at 07:41 AM in JavaScript, PHP, Python | Permalink | Comments (3) | TrackBack (0)
Regular Expressions can be an elusive art. Even when you understand all the rules, you still can easily find yourself having to 'hack' at a pattern until you see the results you expect. Here's an awesome regular expressions tool that I've been using for over a year now. Using AJAX, it sends the pattern/subject to the server and and then populates the result boxes seamlessly. It does this as you type so you can very rapidly iterate through a problem.
If you bookmark it you will use it ;)
Posted at 07:44 AM in JavaScript, PHP, Regular Expressions | Permalink | Comments (0) | TrackBack (0)
Here's a great list of examples and resources for building really sexy forms. There are a lot of JavaScript and CSS tricks that I've seen around for a while, but I've never actually had the need to use. When it comes time create something you've seen before, it can be a bit of a pain finding it again ;(
Posted at 10:36 AM in CSS, JavaScript, Web/Tech | Permalink | Comments (0) | TrackBack (0)