One thing I’ve seen a few websites do is a live login. Where as soon as you click login it will tell you if your password is right or wrong and progress onto the next step. The way this is accomplished is via AJAX, which is just a fancy name for using JavaScript to submit forms behind the scene and report back what the results are. You use jQuery’s AJAX method to do the bulk of the work, but you also need a way to show the result. You can ether make a new function or you can simply use an anonymous function as well. Here’s the first example I have:

$.post('ajax.html','',function(data) {$('.test').html(data);});


First off you may ask why is it .post instead of .ajax? This is just a short cut to use AJAX with the POST method, if it was .get then it would use the GET method. Which this looks very similar to the example jQuery has but I’ll change it up and add more to it below. The next thing you see is ‘ajax.html’ this is simply the page which will be contacted. After that you see a set of empty quotes, normally you would see data here such as a username or password, but in this example it’s left blank. Next you see an anonymous inner function with only a data parameter. You have three you can get, data – the content that was returned, textStatus – the status of the operation, and jqXHR – an object that contains error and other methods related to the AJAX request. In this case I picked data since you see the next step is to simply inject the “data” into the div with a class named test.

The next logical thing I want to do is submit data, after all what good is AJAX if your not sending data? So we need to get an input field. Let’s call this text input field q. This way we can use ‘[name=q]’ as our selector in $(‘[name=q]’).val(); If we had a lot of elements we could also use $(‘input:text[name=q]’).val(); we will set a variable called q to this value. Now we need some way of getting this variable into the data portion of the AJAX function to be of any use. So where we used the empty quotes ”. We will swap that with ‘q=’ + q, since that’s all it takes and just concatenates q onto that string so a web server can interpret the data correctly. Now I will use a simple PHP script so our complete code looks like:


var q = $('input:text[name=q]').val();
$.post('ajax.php', 'q=' + q, function(data) { $('.test').html(data); } );


Which I enclosed all of this inside a function for ease of use. This example can be accessed at http://itprogramminghq.com/examples/jquery/6-ajax.html and all the script does is tell you if you enter a vowel. You must click on GO! to actually call the AJAX method.

One thing I did read when researching is reports of jQuery being unable to use any new elements that the AJAX method brings in without using another method. Yet in my example above on Chrome I was able to use jQuery to manipulate the AJAX based content. Which it looks like it’s because I used the .html method, if anyone else can provide a better explanation feel free to let me know.

With jQuery you can also manipulate the actual HTML document. For instance you can do something so simple as adding text before or after content. Which in this case means at the top or bottom of a DIV element.

To append text you can use $(“div.text”).append(“HI”); which is similar to all the other examples where you use a selector to select the element to perform the action. Now if you run this as is, then it will keep appending HI to the end of this DIV. So clicking it 4 times will product HIHIHIHI just like this. Same thing to add text at the beginning.

Using $(“div.text”).prepend(“BEFORE”); will add the text BEFORE just like HI was added above, only at the top instead of at the bottom. Now both of these examples can also take a function instead of placing text here. Using .empty() will do exactly what you think, empty everything out of the element you selected.

The one last manipulation thing to cover is .remove() which will not only remove all the elements inside, but will remove the element you selected. So a $(“div.test”).remove(); will actually delete the DIV elements with a class of test.

The next part in this series will go more in depth, covering the DOM (Document Object Model) functions more. The example for this part is accessible here http://itprogramminghq.com/examples/jquery/4-manipulation.html. If you have any questions fell free to leave a comment below.

If you noticed from the example in part 1 to get the reference I need to hide the box I used what jQuery called selectors. In this case I used $(“div.message”) to actually get a reference to all the div elements using a class called message. By the same token if I was to use just $(“div”) then it would have matched all the div elements and in example 1’s case it would have hidden the same div, but if you have multiple div elements this would have hidden every single one. Also in example 1’s case I could have just used $(“.message”) to hide the div, since this would match all elements using a class called message. Now looking at the difference this looks just like what one would use in a CSS style sheet, .message{} for all message classes and div{} for all div elements, that’s one area jQuery tries to keep simple is class selectors.

Yet since it’s jQuery you have much more then just div elements and a simple selector. I could just as well use $(“span”) to get every span element. Or I can add/delete classes with jQuery. Take an interactive webpage where you may have all the messages on the page, but hidden. So you want to show the message, but make it bold, red, and bigger, you could use jQuery’s CSS functions to modify the class, or use the .addClass function. In our case we have a div with a class of msg. So we can just say $(“div.msg”).addClass(“error”) and with this statement it will change the div’s code from <div class=”msg”> to <div class=”msg error”>. Which if you no longer need the class, say the error no longer is needed to display, you replace addClass with removeClass.

For this part’s example goto http://itprogramminghq.com/examples/jquery/2-class-selectors.html and as always I use a basic HTML page in order to show just the jQuery sections. By far this is the cleanest solution and will prevent the most number of problems. If you have any questions feel free to comment, I know I can make a mistake and I’m on the journey to learn jQuery just like you.