Recent Notes

Displaying keyword search results 1 - 12
Created by James on May 03, 2012 14:54:46    Last update: May 03, 2012 14:54:46
History.js gracefully supports the HTML5 History/State APIs (pushState, replaceState, onPopState) in all browsers. For HTML4 browsers it will revert back to using the old onhashchange functionality. All major browsers are supported. This is a simple test page to get started: <html> <head> <title>Test History</title> ... Note: state url must be provided for IE to generate a unique hash. YOu can prefix the state url with '?' ('#' does not work).
Created by James on September 23, 2010 20:30:55    Last update: November 16, 2011 14:51:23
jQuery button set where one button can be pressed "down" at a time. <!DOCTYPE html> <html> <head> <title>jQu...
Created by James on March 29, 2011 11:34:53    Last update: March 29, 2011 11:34:53
The width() function returns the width of an element. The test page below shows how to retrieve widths for table cells. The row parameter can be omitted if columns in all rows are of same width. <!DOCTYPE html> <html> <head> <title>jQu...
Created by James on March 29, 2011 11:28:33    Last update: March 29, 2011 11:30:12
The test page below shows how to count the number of columns for a given table row with jQuery: $('table tr:eq('+row+') td').length <!DOCTYPE html> <html> <head> <title>jQu...
Created by James on March 29, 2011 11:25:35    Last update: March 29, 2011 11:25:35
With jQuery, it is pretty easy to access a table cell: just use the $('table tr:eq('+row+') td:eq('+column+')') selector. Below is a test page: <!DOCTYPE html> <html> <head> <title>jQu...
Created by James on October 11, 2010 18:14:41    Last update: January 11, 2011 20:36:01
Test page: <!DOCTYPE html> <html> <head> <title>jQu... Documentation: UI/Effects - jQuery JavaScript Library Effects - jQueryAPI
Created by Dr. Xi on August 21, 2007 21:25:58    Last update: January 10, 2011 22:19:09
You can grab some animated icons here: http://mentalized.net/activity-indicators/ . And here's some code to demonstrate how to use such an icon. <html> <head> <script language="JavaScript"... However, if you use Ajax and send a synchronous request, the icon won't show up at all, i.e., the following code doesn't work: function eventHandler() { startBusy(); ... This works: function eventHandler() { startBusy(); ...
Created by James on September 07, 2010 22:12:01    Last update: September 07, 2010 22:13:45
I had a need to use Ajax to get a response from the server and conditionally render the results based on a status code. Additionally, I need to update multiple areas on the page from the results of one request. The code presented here uses jQuery and an XML response with CDATA sections to achieve that goal. Server side code (perl cgi): #!C:/perl/bin/perl.exe ## ## redirect ##... The HTML page: <html> <head> <script type="text/javascript...
Created by James on June 30, 2010 19:04:45    Last update: July 03, 2010 21:24:33
Technically, file upload cannot be handled by Ajax, because XMLHttpRequest (XHR) does not handle file inputs. All techniques not using Flash rely on an invisible iframe as the upload form submit target. JavaScript then grabs the response content from the iframe and present it, giving the same illusion as Ajax. webtoolkit AIM The technique by webtoolkit is very simple. It involves 3 simple steps: include the AIM script, implement the start/finish JavaScript functions, and add an onsubmit handler to the normal file upload form. The hooked up form looks like: <head> <script type="text/javascript" src="webt... The AIM script is also quite simple: /** * * AJAX IFRAME METHOD (AIM) * http... The above code only supports HTML responses. In order to support JSON responses, the above...
Created by James on June 24, 2010 22:04:19    Last update: June 24, 2010 22:04:19
Start with this page: <!DOCTYPE html> <html> <head> <title>jQu... When you click "Submit", the form submits fine. Now turn the form to a jQuery dialog: <head> <title>jQuery UI Dialog</title> ... When you click "Submit", the form no longer submits! Why? When you convert the contents of the form into a dialog, the form becomes empty! The "Submit" button is no longer associated with the form. Conclusion: you should always put the form tag inside the element you are converting to a dialog.
Created by James on June 22, 2010 19:40:53    Last update: June 22, 2010 19:52:53
Use jQuery to submit a form by clicking a button not associated with the form. The jQuery submit method can also be used to associate an event handler on the form. <!DOCTYPE html> <html> <head> <title>jQu... To submit the first form on the page: $('form:first').submit();
Created by Dr. Xi on November 15, 2007 04:40:44    Last update: November 15, 2007 04:40:44
Here's some simple Ajax code. The Ajax response is delivered as XML with attributes and an array of data payloads contained in CDATA sections: <?xml version="1.0" encoding="utf-8"?> <ajax-re... And the JavaScript that does the Ajax magic: // ajax.js function ajaxGet(url, ajaxCallback) ... And the HTML test code: <html> <head> <script language="JavaScript"...