In this quick tutorial we will show you how to add a simple button to your jQuery Mobile app that takes your user to a random page of your app. The pages are drawn from a list of pages that you create. The code for doing this is really quite simple. So lets get to it.

jQuery Mobile: Add a Random Page Button to your Mobile App

The first we need to do is create a list of pages we want our random button to chose from. This will be stored in an array. So lets create this array and populate it with the pages we want our users to be able to go to.

<script type="text/javascript">
   var randomlinks=[];

   randomlinks[0]="Apple_Martini"
   randomlinks[1]="Bellini"
   randomlinks[2]="Ciapiranha"
   randomlinks[3]="Cosmopolitan"
   randomlinks[4]="Kir_Royale"
   randomlinks[5]="Long_Island_Iced_Tea"
   randomlinks[6]="Margarita"
   randomlinks[7]="Mimosa"
   randomlinks[8]="Mint_Julep"
   randomlinks[9]="Mojito"
</script>

randomlinks is the name of our array. For each page we want the button to select from we just add another line to the above code. There is no limit to how many pages you can add to this list as long as for each page you add a line like the ones above and keep the numbers sequential starting with zero. Any break in the numbers may cause a break in your code.

Make sure that when you add a page to the list you leave the hash off the beginning of the page name. This code will eventually put that back on as required down the track. Make sure that the page name is exactly as it appears in your page div declaration.

To complete the code all we need to do is create a function that randomly selects a page from the list and re-directs the user to that page. So lets add that function now.

<script type="text/javascript">
   var randomlinks=[];

   randomlinks[0]="Apple_Martini"
   randomlinks[1]="Bellini"
   randomlinks[2]="Ciapiranha"
   randomlinks[3]="Cosmopolitan"
   randomlinks[4]="Kir_Royale"
   randomlinks[5]="Long_Island_Iced_Tea"
   randomlinks[6]="Margarita"
   randomlinks[7]="Mimosa"
   randomlinks[8]="Mint_Julep"
   randomlinks[9]="Mojito"
 
   function randomlink(){
     var idx = Math.floor(Math.random()*randomlinks.length);
 
     $.mobile.changePage('#' + randomlinks[idx], {transition:'pop'});

   }
</script>

The function randomlink() is the function we will calling on our random page button in a minute. The first line of this function detects how many entries we have in the array and then selects a random entry. The second line tells the app to add a hash(#) to the beginning of the title and then to use the transition “pop” to go to that page. So really quite simple. Now that we have this code (either in the head of your file or at the end of the file.) it is now time for us to make our button call this code.

<a href="javascript:randomlink()" data-theme="b" data-icon="randomdrink" data-iconpos="notext"></a>

This is my button that I am using. Note the link being called is javascript:randomlink(). This is the function we created before. Now when ever someone hit that button a random page from the above list will be called by my app.

Hope you found this simple tutorial helpful and see you again soon.