background preloader

Javascript snippets

Facebook Twitter

5 Ways to Make Ajax Calls with jQuery | Nettuts. There are at least five ways to make AJAX calls with the jQuery library. For beginners, however, the differences between each can be a bit confusing. In this tutorial, we'll line them up and make a comparison. Additionally. we'll review how to inspect these AJAX calls with Firebug as well. This section is for those who have no idea what AJAX is. If you don't fall into this category, feel free to skip to the next section. In Gmail, switch from inbox to draft. The key to AJAX's concept is "asynchronous". Now we should know what AJAX actually is.

For static content, we may want the response cached. The most common use of AJAX is for loading HTML from a remote location and injecting it into the DOM. Click on the first button named "load(). " Below is the JavaScript code for this effect: $.ajaxSetup forces the browser NOT to cache AJAX calls.After the button is clicked, it takes a little while before the new HTML is loaded. Now, let's explore more details of the request with Firebug: JavaScript HTML DOM Examples. XML DOM - Change Node Values. Changing Select Content on the fly. Changing Select element content on the fly Changing a select element's content on the fly is a powerful feature of JavaScript that's just as practical. It forms the basis of implementing inter-dependant select menus, where the selection of one menu changes the contents of another.

In this tutorial, lets look at how this is done, and also, how to create a 2 level interdependent select list using the technique. Sounds like fun! The basic technique The basic technique for changing a select element's content using JavaScript is a two part process. <form name="myform"><select name="master" size="1"><option value="newsvalue">News</option><option value="webmastervalue">Webmaster</option><option value="techvalue">Tech</option></select></form> To change "master"s content using JavaScript, do the following: 1) Remove all options by setting the Options array's length to 0 document.myform.master.options.length=0 Doing the above instantly empties the select element, ready to be populated with new data.

Copying contents of billing addy to shipping addy. Form Scripts | The JavaScript Source. These scripts (and a few tutorials) all deal with Javascript forms. We'll show you some really neat forms that keep you from receiving bogus information as well as others that are just fun to play with (test personal info). In addition, be sure to check our snippets section for additional form-related scripts.

As always, we're here if you have any questions or comments. General questions about form scripts here should be posted to The JavaScript Forum. Validating an email address in HTML5 by Brad Jones Validating an email address in HTML5 is very simple. Creating and destroying content - Unobtrusive Javascript. The main strength of the DOM is the option not only to read, but also to alter the content and the structure of the document at hand.

For this we have several methods at our disposal. Creating new content createElement(element) Creates a new element createTextNode(string) Creates a new text node with the value string. Newly created elements are not added to the document immediately, they remain in limbo until we append them somewhere in the node tree. Javascript: mynewparagraph=document.createElement('p'); mynewtext=document.createTextNode('this is a new paragraph'); Altering the existing content setAttribute(attribute,value) Adds a new attribute with the value to the object appendChild(child) Adds child as a childNode to the object. child needs to be an object, you cannot use a string. cloneNode() Copies the whole node with all childNodes. hasChildNodes() Checks if an object has childNodes, and returns true if that is the case. insertBefore(newchild,oldchild) removeChild(oldchild) The picture example.

Form Scripts | The JavaScript Source.