A common gotcha with JavaScript is access to “this” inside callbacks and functions.  For example, $.get has a callback but inside the callback “this” is out of scope.  So if you need to use a function in the object that contains the $.get define a local variable and set the value  equal to “this”. Here is a quick example of this scenario. Once you are done with the callback the local instance variable of “this” will get cleaned up by garbage collection.

var foo = this;

$.get("test.php", function(data){

//this is out of scope in this callback
alert("Data Loaded: " + data);

//but foo is now = this

foo.sendDataSomeWhereElse(data)

});

On the PHP backend I found a nice mysql wrapper class . It makes it simple to organize MySQL connection and queries.  You can do things like this to connect to your database using a simple config file.

$db = new Database($config['server'], $config['user'], $config['pass'], $config['database'], $config['tablePrefix']);

Then a function would look like this:

$db->connect();

$sql = "insert into tmastertask (masterTaskDescription) VALUES ('" . $values[0] . "');";

$db->query($sql);

$jsonInsertArray[] = "success";
$jsonResultArray["InsertResult"]=$jsonInsertArray;
echo json_encode($jsonResultArray);

$db->close();

© admin for Jason Rowe, 2008. | Permalink | No comment | Add to del.icio.us
Post tags: JQuery, MySql, PHP, taskwidget

Feed enhanced by Better Feed from Ozh

“DataTable currently sorts strings, numbers, and dates, but only when the values are already those types in JavaScript. In contrast, if you get values over the wire (XHR), DataTable will treat all values as strings in those cases. As a workaround, you could implement a custom sort function to do the data type conversion. Data parsed from markup will be typed correctly, and so we’re a part of the way there; before we get out of beta we plan to provide a mechanism so a value can be treated as a specific type regardless of its origin. I can tell you that in the next release (coming soon) we’ll have a hook for you to do your own conversion of data coming over XHR, and in the subsequent release it will do a lot of conversions for you out of the box and also provide a mechanism for you to do more sophisticated custom conversions.”

Here is the custom sort function I created to fix the issue. It still doesn’t work well if you have multipage result lists because the string has to go through the function before it becomes an integer. It works well for small lists or where all the results appear right away.

In the snippet below, “u” would be the variable you  want to get sorting correctly in the data grid results. If you are not familiar with using custom sort functions take a look at the yui data grid docs. It’s very easy.

[code lang="javascript"] 

var myFormatStringFix = 

function(elCell, oRecord, oColumn, oData) 

{ 

oRecord._oData.u = parseInt(oRecord._oData.u); 

elCell.innerHTML = oRecord._oData.u; 

} 

[/code]

© admin for Jason Rowe, 2008. | Permalink | No comment | Add to del.icio.us
Post tags: YUI

Feed enhanced by Better Feed from Ozh

update 5/08/09 - I change some of the javascript from yui to jquery. I converted the old YUI carousel to Jcarousel.(http://sorgalla.com/projects/jcarousel/)

© admin for Jason Rowe, 2007. | Permalink | 3 comments | Add to del.icio.us
Post tags: JQuery, MySql, PHP, YUI

Feed enhanced by Better Feed from Ozh

Bill Scott actually doesn’t support this anymore and the YUI team has taken this on. The new version is very clean and I did try it out. I converted my carousel to the new YUI version but later decided to go with a JQuery extention called jCarousel. They both worked but I think I am going to move in the Jquery direction for awhile.
http://jasonrowe.com/search

References:
http://billwscott.com/carousel/

http://sorgalla.com/projects/jcarousel/

http://developer.yahoo.com/yui/carousel/

© admin for Jason Rowe, 2007. | Permalink | No comment | Add to del.icio.us
Post tags: JavaScript, YUI

Feed enhanced by Better Feed from Ozh

The article has lots of examples if you click on the figure links. Here was a useful one on Inheriting from a Prototype:

Inheriting from a Prototypefunction GreatDane() { }
var rover = new GreatDane();
var spot = new GreatDane();
GreatDane.prototype.getBreed = function() {
return “Great Dane”;
};

// Works, even though at this point
// rover and spot are already created.
alert(rover.getBreed());
// this hides getBreed() in GreatDane.prototype
spot.getBreed = function() {
return “Little Great Dane”;
};
alert(spot.getBreed());
// but of course, the change to getBreed
// doesn’t propagate back to GreatDane.prototype
// and other objects inheriting from it,
// it only happens in the spot object
alert(rover.getBreed());

© admin for Jason Rowe, 2007. | Permalink | One comment | Add to del.icio.us
Post tags: JavaScript

Feed enhanced by Better Feed from Ozh

if(window.addEventListener)

{

// Mozilla, Netscape, Firefox

object.addEventListener(‘mouseover’,function() {this.className = “objectVisible”;false)

object.addEventListener(‘mouseout’,function() {this.className = “objectNotVisible”;return true;}, false)}

else { // IE

object.onmouseenter = function() {this.className = “objectVisible”;return false;};

object.onmouseleave = function() {this.className = “objectNotVisible”;return false;};

}

© admin for Jason Rowe, 2007. | Permalink | No comment | Add to del.icio.us
Post tags: JavaScript

Feed enhanced by Better Feed from Ozh