Recent Notes

Displaying keyword search results 1 - 10
Created by James on February 02, 2012 09:20:22    Last update: February 02, 2012 09:20:22
This example came from the jQuery validation documentation. The required rule can be used to validate a required selection box when you set the value of the first option to empty. <!DOCTYPE HTML> <html> <head> <scrip... The error message is the title since no error message is specified. A more fully defined validation check would look like this: $('#my-form').validate({ errorElement: "p", ...
Created by James on May 24, 2009 20:14:25    Last update: January 11, 2011 20:07:38
In the following HTML code, I attached an inline handler to the text field input and added two event handlers with addEventListener / attachEvent . Both IE and Firefox called the inline handler first. But the order in which the added event handlers were called are different between IE and Firefox (IE calls attached_click2 first). Further, if I add the same event handler multiple times, IE calls the handler the same number of times. But Firefox only calls the same handler once, no matter how many times it was added. <html> <body> <form> Input: <input type="... You can attach an event handler to an HTML element either inline , with JavaScript , or by calling addEventListener (DOM level 2), or attachEvent (IE specific). When you...
Created by Dr. Xi on October 26, 2010 04:47:37    Last update: January 11, 2011 20:00:36
The code presented here is a simple implementation of a tab set. It is used to demo how a tab set could be implemented. The code is stand alone and does not depend on any JavaScript libraries. Multiple tab sets within the same page is supported. The HTML markup is fairly simple: Tabs sets are contained within a DIV element with class name "tabsContainer". Define a UL list for the tabs. Follow the UL list with equal number of DIVs for the tab contents. The Nifty Corners Cube technique is used to draw the rounded corners (original form, not the enhanced JavaScript form). HTML, CSS and JavaScript: <!doctype html> <html> <head> <style typ...
Created by Dr. Xi on October 03, 2008 02:36:41    Last update: January 11, 2011 19:53:25
Demo page to retrieve the value and text of a dropdown box using JavaScript. <html> <head> <script language="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 30, 2010 20:14:28    Last update: July 03, 2010 18:41:12
The HTML page <!DOCTYPE html> <html> <head> <title>jQu... Client Side Code // called before upload submit function sta... Server Side Code Using Apache Commons FileUpload as example. Upload code (responds to fileUpload.do ): final HttpSession session = httpServletRequest... Progress code (responds to uploadProgress.do ): HttpSession session = httpServletRequest.getSe...
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 James on March 16, 2010 16:55:51    Last update: March 16, 2010 19:29:28
I had this seemingly innocent code that did not work: <html> <body> <script language="JavaScript"... I fired up the Chrome JavaScript console and it told me that: Uncaught TypeError: object is not a function . When the name sameAsInputName appeared in the inline event handler, the browser thinks that it refers to the input field(s), not the JavaScript function! It works as expected if you attach the event handler later: <html> <body> <script language="JavaScript"...
Created by Dr. Xi on March 02, 2009 23:29:08    Last update: March 28, 2009 21:35:41
An HTML form contains more than what meets the eye. This bookmarklet displays information about form fields in the page. When there are multiple forms on the page, successive invocations of the bookmarklet display each form in turn. Add this link to your bookmarks. Here's the code: <html> <body> <a href="javascript: i...
Previous  1 2 Next