Use your left/right keys to browse tutorials
jQuery Iphone Style Ajax Switch

jQuery Iphone Style Ajax Switch

1 Star2 Stars3 Stars4 Stars5 Stars
Posted on July 3, 2009

I’ve been looking for a while at how to mimic the iPhone on / off switch with Jquery and stumbled across this post By Daniel LaBare over at elctech.com which is a great start to base an ajax tutorial on. In this tutorial I’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. You need to include the ‘jquery.iphone-switch.js’ file along with jquery which is in the download.

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");
});

demodownload



More tutorials from Papermashup
  • Pingback: jQuery Enhanced CSS Button Techniques

  • Pingback: 20 Awesome jQuery Enhanced CSS Button Techniques - Speckyboy Design Magazine

  • Hunter

    Check this out! It is the same thing but you can drag it!

    • http://www.papermashup.com Ashley

      @Hunter looks great, thanks for the link!

  • http://www.morningz.com Stephen

    Hi… nice little plugin here….

    I’d like to make one suggestion….

    change the “click handling” section to pass the through to the callback events, a la:


    jQuery(this).click(function() {
    ...
    switched_off_callback(this);
    ...
    switched_on_callback(this);
    ...
    });

    that way


    $(".Boolean").iphoneSwitch(
    "on",
    function(obj) {
    //do something on change to "on"
    },
    function(obj) {
    //do something on change to "off"
    }
    );

    that way if there are multiple objects wired to this plugin, there is some hook to be able to tell “where” we are inside those events…

    thanks for reading….

    - Stephen

  • Leny

    Thank you Ashley for your post, cool demo :)
    Does anybody know why on IE6 it doesn’t work?

  • Igor

    ERROR!
    text code inside file jquery.iphone-switch.js:

    image = jQuery(”);
    Pay attention to the end – there is an extra div-tag! It must be removed, otherwise, you will not see the switch in IE-browsers.
    Thanks.

    • http://www.papermashup.com Ashley

      @igor thanks for pointing that out, i’ve updated the code ;)

  • Jason

    I figured it out, I added the following code after the script tag:

    $(document).ready(function(){
    $(‘#ajax’).load(‘/alpha’);

    And you’ll also need to add the following at the end:

    });

    • http://www.papermashup.com Ashley

      @Jason good to see you found a solution :)

  • Jason

    So is there a way to have it load the on.html at page load?

  • http://www.mee.la Sufian Hassan

    Hey why dont you make it so you can drag the button lest anf right that way it will be easer then just clicking it because im used to seeing it on my iphone to drag it but here i have to click it.

  • Ben

    Cool, lots of people are copying the iPhone GUI these days.

    On a side note, could you make your RSS feed display full posts so I don’t have to come out of Google Reader. It kind if makes the point of an RSS feed useless.

    • http://www.papermashup.com Ashley

      @ben thanks for the feedback, I’ve been having major problems with my feed and have had to hackit a bit but i’ll take a look at doing that.