jQuery Iphone Style Ajax Switch
In this example we’ll purely be looking at making a simple ajax request using the functionality of the iPhone buttons to trigger a script to return a string based on whether the switch is on or off.
The Code:
<div id="ajax"></div> <div id="1"></div> <script type="text/javascript"> $('#1').iphoneSwitch("on", function() { $('#ajax').load('on.html'); }, function() { $('#ajax').load('off.html'); }, { switch_on_container_path: 'iphone_switch_container_off.png' }); </script>
So to run through whats happening when the iphoneSwitch() function is called we run an ajax call to return the contents of the pages on.html and off.html. You could make this more dynamic by calling a php page which authenticates a user with a session id which would then update data in a database depending on the switches current status.
looking at jQuery .load:
Another way of using the .load function is to pass POST variables through to a script for example below we are passing the POST variable ‘limit’ with a value of ’10′ to the file rss.php and asking it to load the results into the div #rss, once the ajax request has completed it will alert ‘The last 10 entries in the rss feed have been loaded’:
$("#rss").load("rss.php", {limit: 10}, function(){ alert("The last 10 entries in the rss feed have been loaded"); });
You might also like
Tags
accordion accordion menu animation navigation animation navigation menu carousel checkbox inputs css3 css3 menu css3 navigation date picker dialog drag drop drop down menu drop down navigation menu elastic navigation form form validation gallery glide navigation horizontal navigation menu hover effect image gallery image hover image lightbox image scroller image slideshow multi-level navigation menus rating select dependent select list slide image slider menu stylish form table tabs text effect text scroller tooltips tree menu vertical navigation menu