|
Showing and hiding Divs using JQuery and a select field |
||||||||
In this blog entry I'll show you how to create a simple JQuery function that shows and hides elements based on a form select field.
You can see an example of the finished script here: Demo JQuery show / hide using a select field
|
Differences in calling a function in JQuery |
||||||||
2
3function changeFields(){
4 var selected = $("#type option:selected").val();
5 $('.formElems').hide();
6 $("." +selected).show();
7 }
I noticed then that all the other JQuery based functions do not construct the function as a separate entity. The function is embedded within the actual event handler.
More like this:
2 {
3 var selected = $("#type option:selected").val();
4 $('.formElems').hide();
5 $("." +selected).show();
6 });
Both methods work equally as well (IE they do what they are supposed to) but I can't see any reason you would do one over the other. The only thing I can think of is that in the first example the function is reference able from elsewhere, whereas the second code example is not.
Anyone more knowledgeable than me got a view on this?
|
JQuery AJAX Http polling example |
||||||||
This article examines a way of creating a polling AJAX http request. This is a request that will run every N seconds based on a value. It will hit a remote service and return a result, and display that result on screen.
View a full demo of an AJAX polling request here.
|
Simple JQuery method of intercepting a hyperlink |
||||||||
Ever wanted to run a custom routine (like validation) on a template when a user clicks a link to proceed to the next step? I recently worked on a checkout template that was not a form, but still needed some validation installed when a user clicked the 'proceed' option. The code below shows a very simple way of using a JQuery selector to intercept the href click event and replace it with a custom function. My example shows a 'warning' div, and then returns false, IE does not action the click URL request.
2$(document).ready(function(){
3$("#element").click(function() {
4// Do some custom validation - show a div
5$(".warning").show();
6
7// disable the click
8return false; });
9});
10</script>
11
12<a href="" id="element">proceed</a>
