Development

jQuery Mobile Tutorial: Creating a Restaurant Picker Web App

March 8th, 2012

With an increase in the number, diversity and complexity of smartphones, more and more companies want to have their own mobile app, but creating a native app can be pretty expensive. It requires special skills, as well as special coding tools, and then there is also the need to build an app per platform (Android, iOs, BlackBerry, Windows Phone, etc).

All of this figures in to a higher price tag for the app development. Another solution for developers is then to create something called web-apps: HTML CSS apps, which users can access from their browsers. They are cross-platform, and cross device.

Restaurant Picker : creating a JqueryMobile web app from scratch and styling it.

The jQuery framework has been around the web for a while now, but the jQuery base technology was basically designed for browser apps. jQuery Mobile is a framework based on jQuery that enables web designers to create web-apps that are optimized for use on a mobile device (Smartphone and tablets). The framework is touch optimized, uses responsive layout so that elements will automatically adapt on different device sizes, and supports a range of different platforms and devices.

In this jQuery Mobile tutorial, we will create a nice demo app from scratch, to show some of the things that can be easily done using this powerful tool.

Before we start, you might want to download the files, or see a demo, or flash the qrcode for a direct demo on your mobile :

qrcode for the demo

The Concept of the Mini App: Restaurant Picker

We will create an application that will enable the user to choose a restaurant based on what they want to eat tonight, the town where they want to eat and other user’s ratings of the restaurants. The jQuery Mobile mini app we’re creating will be called “Restaurant Picker”.

Please note that this is only the front development, you will of course need a server and a database if you want to create a real app. Also note that jQuery Mobile uses Ajax navigation, so you’ll need to put the files either on a local server (xampp, mamp, etc) or on a real server to make the demo work properly.

Wireframing Our Application.

In order to see where we are going, we will first draw some wireframes to see what each screen of the app will look like.

Home Screen : Choose a Plate

Homescreen: choose a plate

On the first screen we will put the logo of our application. We will then give the user a choice between different plates. Each choice comes with an image illustrating the plate, and each is a link that will lead to the second page where the user can choose the town.

Choose a Town

Choose a town wireframe

On the second screen, the user can choose the town where they want to eat. The towns are displayed in a list of clickable items. Beside each town there is a bubble that gives the user the number of restaurants available for the chosen plate in this town.

Since the list of towns can be pretty long, we will provide a filter so that the user can quickly search for a town at the end of the list. The title bar will use the branding of the application, and a “back” button that user can click to go back to the previous step.

When the user clicks on a town, they are lead to the page where they can choose a restaurant.

Choose a Restaurant

Choose a restaurant wireframe

The user can now choose in which restaurant he wants to eat. The application displays a list of restaurant with a little image, the name, and the number of rating stars the previous users gave to this restaurant.

The title bar will use the branding of the application, and a “back” button that user can click to go back to previous step. The user can then click on a specific restaurant, to see the details.

Restaurant Details

Restaurant details wireframe

The restaurant’s details view is composed of three parts: restaurant details, contact details, and the establishment’s user rating.

The restaurant details will display a short description of the restaurant, some plates, a picture and a link to their website if they have one.

The contact details will display the address of the restaurant, and an image of a Google map that will locate the restaurant in the town. A link enables the user to open Google maps (either using the browser or the Google map app if available depending on the device) to locate the restaurant on the map. Another link will dial the restaurant phone number directly on the mobile device so that user can place a reservation.

The last part of this view is a select box, where the user can rate the restaurant.

Building the web-application base

Now that we’ve see the direction that we are heading, we can begin digging a little bit into the code.

Some jQuery Mobile Basics

First let’s take a look at what the header of our first HTML page will look like :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<!DOCTYPE HTML>
 
<HTML>
 
<head>
 
<meta charset="UTF-8">
 
<title>Restaurant Picker</title>
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<link rel="stylesheet" href="jquery.mobile.structure-1.0.1.CSS" />
 
<link rel="stylesheet" href="jquery.mobile-1.0.1.CSS" />
 
<script src="js/jquery-1.7.1.min.js"></script>
 
<script src="js/jquery.mobile-1.0.1.min.js"></script>
 
</head>

The first thing to notice is the “new” HTML5 doctype. jQuery Mobile makes a heavy use of the data- HTML5 attribute to add some elements in the DOM to style the page, so we will need an HTML5 doctype to make it all work nicely.

The second thing to notice is the meta name=viewport tag. We will use this meta tag to gain better control of our viewport. Without this tag, the browser will squeeze our layout in the whole page, and it will look ugly and very tiny. With width=device-width we will use our device width, making the app fit the whole size of the device without being squeezed. The initial-scale property controls the zoom level when the page is first loaded and we will set it to 1, meaning no zoom in or out when page is loaded.

Then we will call our CSS files. In older jQuery Mobile versions the CSS was in one file, but in the newer version they made a distinction between the structure and the actual design (colors, gradients etc) which makes it easier to create custom styles.

We then need to load our jQuery, and jQuery Mobile JavaScript code at the end, since it needs the jQuery library to work.

What You’d Like to Eat: First Page

Now let’s take a look at the HTML code of our first page, in this exercise we will call this page index.HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<body>
 
<div data-role="page" id="home" data-theme="c">
 
<div data-role="content">
 
<div id="branding">
 
<h1>Restaurant Picker </h1>
 
</div>
 
<div class="choice_list">
 
<h1> What would you'd like to eat? </h1>
 
<ul data-role="listview" data-inset="true" >
 
<li><a href="choose_town.HTML" data-transition="slidedown"> <img src="sushis.jpg"/> <h3> Some Sushis</h3></a></li>
 
<li><a href="choose_town.HTML" data-transition="slidedown"> <img src="pizza.jpg"/> <h3> A Pizza </h3></a></li>
 
<li><a href="choose_town.HTML" data-transition="slidedown"> <img src="kebap.jpg"/> <h3> A Kebap</h3></a></li>
 
<li><a href="choose_town.HTML" data-transition="slidedown"> <img src="burger.jpg"/> <h3> A Burger</h3></a></li>
 
<li><a href="choose_town.HTML" data-transition="slidedown"> <img src="nems.jpg"/> <h3> Some Nems </h3></a></li>
 
<li><a href="choose_town.HTML" data-transition="slidedown"> <img src="tradi.jpg"/> <h3> Something more traditional</h3></a></li>
 
</ul>
 
</div>
 
</div>
 
</div><!-- /page -->
 
</body>
 
</HTML>

jQuery Mobile makes the distinction between HTML documents and pages. A jQuery Mobile app can be composed of one HTML document with multiple pages in it, using the data-role=“page” attribute each page is linked using anchors; or of many documents, each one having its own data-role=”page” linked using “normal” links. In our case, we will go for creating one HTML document per page.

So first we will open our body, and create our page using <div data-role=”page” id=”home” data-theme=”c”>

We will then open a content division, in which we put the branding of the app, and our first title followed by the list of different plates.

To create a jQuery Mobile list, we will put the data-role=”listview” attribute on our <ul> element. data-inset=”true” is here to style the list as an inset list (with rounded corners and padding around it).

Each list element <li> that contains an <a href> link will be automatically converted in a link list item by jQuery Mobile. To add the image, we simply add an image inside our < a href> link, and jQuery Mobile will do the work for us: it will display it on the left part of the list. Pretty easy.

The data-transition=”slidedown” creates the transition between two pages. You can find more transitions in the official documentation.

Here is what our first page looks like:

First page

In Which Town Do You Want To Eat: Second Page

We will name the second page choose_town.HTML . Here is the HTML code, explanation of the tricky parts follows. Note that the header won’t change.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<body>
 
<div id="choisir_ville" data-role="page" data-add-back-btn="true">
 
<div data-role="header">
 
<h1> Restaurant Picker</h1>
 
</div>
 
<div data-role="content">
 
<div class="choice_list">
 
<h1> In which town do you want to eat? </h1>
 
<ul data-role="listview" data-inset="true" data-filter="true" >
 
<li><a href="choose_restaurant.HTML" data-transition="slidedown"> Amiens <span > 3 </span></a> </li>
 
<li><a href="choose_restaurant.HTML" data-transition="slidedown"> Bastia <span > 2 </span></a> </li>
 
<li><a href="choose_restaurant.HTML" data-transition="slidedown"> Belfort <span class="ui-li-count" > 5 </span></a> </li>
 
<li><a href="choose_restaurant.HTML" data-transition="slidedown"> Bordeaux <span class="ui-li-count" > 1</span></a> </li>
 
…
 
</ul>
 
</div>
 
</div>
 
</div><!-- /page -->
 
</body>

We changed the id, so that jQuery Mobile can understand that this is another page. Notice that we used the data-add-back-btn=”true” on the page div, this will enable the Ajax back navigation and automatically add a back button to our title bar.

To create our title bar, we will create a div element, with the data-role=”header”.

To add a filter to our list, we will simply put data-filter=”true” on the ul element defining the list. Note that this is a filter that will filter the items of the list, and is not a search bar.

The last trick will be creating the little bubbles on the right of list elements, and we will do that by creating a span with the class and the numbers in it. And here is how the second page will look:

Second page

Choose a Restaurant: Third Page

We will name this page choose_restaurant.HTML and below is what the HTML code will look like.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<body>
 
<div id="choisir_restau" data-role="page" data-add-back-btn="true">
 
<div data-role="header">
 
<h1> Restaurant Picker</h1>
 
</div>
 
<div data-role="content">
 
<div class="choice_list">
 
<h1> Please choose a restaurant.</h1>
 
<ul data-role="listview" data-inset="true" >
 
<li><a href="restaurant.HTML" data-transition="slidedown"> <img src="restau01_mini.jpg"/> <h2> Le Mouffetard</h2> <p> 4 stars </p></a></li>
 
<li><a href="restaurant.HTML" data-transition="slidedown"> <img src="restau02_mini.jpg "/> <h2> Chocolate bar </h2> <p> 4 stars </p> </a></li>
 
<li><a href="restaurant.HTML" data-transition="slidedown"> <img src="restau03_mini.jpg "/> <h2> Restaurant Diona</h2> <p> 1 star </p> </a></li>
 
<li><a href="restaurant.HTML" data-transition="slidedown"> <img src="restau04_mini.jpg "/> <h2> Tai Shan</h2> <p> 3 stars </p> </a></li>
 
<li><a href="restaurant.HTML" data-transition="slidedown"> <img src=" restau05_mini.jpg"/> <h2> Arcade</h2> <p> 2 stars </p> </a></li>
 
</ul>
 
</div>
 
</div>
 
</div><!-- /page -->
 
</body>

This page is pretty similar to the first one, except for the title bar and the notation of the customer. We already saw how to create a title bar in previous section. For the customer rating, we add a p element with two classes: .classement is mutual to all the elements and will enable us to style this element with little stars, and then we use the class .one, .two, .three and .four to make the distinction between how many stars the customers gave to the restaurant. We will later in the article see how to style this in a nice way, but for the moment, we’ll leave it plain text.

Here is our third page:

Third page

Restaurant Details: Fourth Page

This page called restaurant.HTML is the trickiest of all, mainly because it has lots of elements on it. We will split the code in three parts: the restaurant description, the contact details, and the user rating. Here is our full HTML code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<body>
<div id="restau" data-role="page" data-add-back-btn="true">
 
	<div data-role="header">
		<h1> Restaurant Picker</h1>
	</div> 
 
	<div data-role="content">
	<div class="ui-grid-a" id="restau_infos">
		<div class="ui-block-a">
		<h1> Le Mouffetard</h1>
		<p><strong>  Restaurant bar in the center of Strasbourg</strong></p>
		<p> On the menu: </p>
			<ul>
				<li> Milkshake with chocolat</li>
				<li> Planchettes </li>
				<li> Leek pie </li>
			</ul>
		</div>
		<div class="ui-block-b">
		<p><img src="restau01.jpg" alt="jeannette photo"/></p>
		<p><a href="http://www.google.fr" rel="external" data-role="button"> See our website</a></p>
		</div>
	</div><!-- /grid-a -->
	<hr/>
 
	<div class="ui-grid-a" id="contact_infos">
		<div class="ui-block-a">
		<h2> Contact us</h2>
		<p>30 Rue des Tonneliers</p>
		<p> 67000 Strasbourg	</p>
		</div>
		<div class="ui-block-b">
		<img src="01_maps.jpg" alt="plan jeanette"/>
		</div>
	</div><!-- /grid-a -->
	<div id="contact_buttons">
		<a href="http://maps.google.fr/maps?q=jeannette+et+les+cycleux&hl=fr&sll=46.75984,1.738281&sspn=10.221882,18.764648&hq=jeannette+et+les+cycleux&t=m&z=13&iwloc=A" data-role="button" data-icon="maps"> Find us on Google Maps </a>
		<a href="tel:0388161072"  data-role="button" data-icon="tel"> Call us </a>
	</div>
	<hr/>
 
	<div id="notation">
	<form>
	<label for="select-choice-0" class="select"><h2> User rating </h2></label>
		<select name="note_utilisateur" id="note_utilisateur" data-native-menu="false" data-theme="c" >
		   <option value="one" class="one"> Not good at all </option>
		   <option value="two" class="two">Average </option>
		   <option value="three" class="three">Pretty good </option>
		   <option value="four" class="four"> Excellent </option>
		</select>
	</form>
	</div>
	</div>
 
</div><!-- /page -->
</body>

Last page

For the restaurant details, we used the build in two column elements of jQuery Mobile. To create a two column block, we create a block with two child blocks. To create a nice button for the website, we added the data-role=”button” to the a href element, and a rel=”external” so that jQuery Mobile knows that Ajax should not used to open this link, but that this is an external link.

For the contact details, we once again used the two column trick. What’s to emphasize here are the buttons. The data-icon=”maps” and data-icon=”tel” will enable us to add custom icons to those buttons.

The interesting part about adding a GoogleMap link, is that some mobiles will be able to detect it, and will ask the user if they want to open them using the browser; if the Google maps app is installed on the device. The other interesting part is the href=tel:0388161072 protocol. This won’t work on a classic browser, but Smartphones will be able to open this link in the phone dial box, to directly call the number.

The last part is the user rating. For this we will use a simple select menu. The data-native-menu=”false” enables us to style the select using jQuery Mobile, so that we will be able to add some nice stars here too. Here again you will notice that we added the one, two, three, four class for further styling.

And here we have a fully functional jQuery Mobile webapp. But this app looks very “JqueryMobile-like”, so we now have to give it a little more styling to make it look nicer.

Next up on Page Two: Adding Some Style

The tutorial is not quite finished yet! There is more to learn over on page two.

Stéphanie Walter is a Graphic and Web Designer who loves is a Pixels and CSS. She enjoys working on UI and UX design for Mobile and Web Apps. She considers CSS as a design tool to create great interactive websites and likes to share her daily knowledge and experiment with CSS3

Tags:

95 comments for „jQuery Mobile Tutorial: Creating a Restaurant Picker Web App
  1. Subco on March 8th, 2012 at 11:41 am

    Great Tut and beautiful web app design. Thanx very much.

  2. JG on March 8th, 2012 at 2:50 pm

    Nice article, especially part 2.

  3. OJR on March 8th, 2012 at 3:51 pm

    I was working on a restaurant app for a hackathon, it will be fun to implement this, this is the link to the app http://food.zapslide.com

  4. Luca on March 8th, 2012 at 4:05 pm

    Well done Stéphanie!
    It’s really useful and easy to understand.
    Thanks!

  5. Webrunner on March 8th, 2012 at 4:23 pm

    Merci Stéphanie pour ce superbe tuto, exactement ce qu’il me fallait pour attaquer mon premier site jQuery mobile. Thanks!

  6. Yoan De Macedo on March 8th, 2012 at 5:18 pm

    Fun, I’m making such a service (French) : closetofood.com

  7. Rafa on March 8th, 2012 at 6:49 pm

    Very good tut, Thanks!

  8. Yorgos on March 8th, 2012 at 6:59 pm

    Very comprehensible tutorial. Thanks Stéphanie!

  9. Patrice on March 8th, 2012 at 7:06 pm

    Excellent. Easy to adapt to wordpress. Nice Job. Thanks for sharing.

    • steve on September 10th, 2013 at 8:51 pm

      How did you adapt it to wordpress :)

  10. Stéphanie on March 8th, 2012 at 8:39 pm

    Thanks a lot for the feedbacks. I just put the whole app on github so that you can fork it in an easier way :

  11. Ankit Bagaria on March 9th, 2012 at 9:29 am

    amazing work Stephanie helped me a lot.. was needing it.
    and thankyou for putting it on github..

  12. waqas on March 9th, 2012 at 3:42 pm

    must read for those who want to be good in mobile app! great work!

  13. Neil on March 10th, 2012 at 12:27 pm

    Great tutorial! Can you do one to involve steps for the back-end server side?

    Thanks

    • Stéphanie on March 11th, 2012 at 4:20 pm

      Well, the demo was intended to show the front side and CSS styling. For the “server” side it will depend : you could use PHP, but you could also use Python, or even ASP.Net. You could also imagine tu use this on a native app in a webview, storing data in the storage of the Phone and then would have to use JAVA to store data and JavaScript to make interraction. So “server side” would really depend on how and on which kind of device you would use the app.
      Plus I’m a WebDesigner, front developper, HTML and CSS expert, not bad with JavaScript and jQuery, but I’m unfortunately not a server side PHP ninja (except with WordPress but that’s not hardcore PHP).

      I also put the code on github for this purpose : if anybody feels like to create a PHP, Python, JAVA server side code, just feel free to fork in the code. And drop me a mail, I’ll update the master branch to add the server side :)

  14. Juarez P. A. Filho on March 11th, 2012 at 8:44 pm

    Amazing tutorial Stéphanie… I didn’t found the github repo. Please give me the link. Thanks! Keep the amazing job.

  15. vidya on March 15th, 2012 at 9:46 am

    avazing tutorial..helped a lot to know abt html5.I tried the code bt it was not working…

  16. JHN on March 15th, 2012 at 6:38 pm

    Great tutorial, easy to follow. A good introduction to JQuery Mobile.

  17. André Klein on March 17th, 2012 at 11:10 am

    Very nice demo, the Restaurant Picker has one major design flaw however: One should pick the city on the first and the desired plate on the second screen. Why? Because it is very likely that you change your mind on what you want to eat, but it is completely unlikely that you suddenly change the city where you currently are (and where hunger gets you). I mean hypersonic transportation and Star Trek-like beaming hasn’t been invented yet…

    • Stéphanie on March 22nd, 2012 at 10:19 am

      You might be right, but the other way is also true. Imagine that you do this app, not for an entire country, but just a small region. You got a car, you really, like really really, want to eat a huge peace of meat tonight. Since you got a car, you can easily change city, as long as it’s not too far from your current location. So you might want to choose the meal, then the city ^^
      As I said : this is “just” a demo, it was made for my students, to show them what can be done. It has to be adapted to each projet, as I also say : design for the target audience, and take context into account :)

  18. gh0st on March 20th, 2012 at 9:51 pm

    Hye,im a fan of your writings. Greate tutorial, theres so much that i can learn from you.

  19. Russ Ray on March 24th, 2012 at 4:07 pm

    Stephanie,

    Thanks for such a great tutorial. I really liked your wireframe of the application. Was there a special tool you used to draw this out?

    Thanks,

    Russ

    • Stéphanie on March 25th, 2012 at 2:47 pm

      Hum not for this one, I simply created some Illustrator quick wireframing vectors. I also tend to use a lot balsamiq mockups which is a great wireframing tool :)

  20. vasu on March 29th, 2012 at 2:04 pm

    Good tutorial.
    I met one issue here, the “data-add-back-btn” is hiding, while refresh page.

  21. Terrance Lezcano on April 6th, 2012 at 10:23 am

    Dunno if you’re still around, but I was able to create this one:

  22. Paul on April 10th, 2012 at 2:26 pm

    Great job Stephanie,
    I’ve learnt a lot in my quest to develop mobile web apps.
    I will be needing back end server scripting and intend to get a php expert to partner on my project.
    Once again, thanks a lot.

  23. Maykel Barcala on April 25th, 2012 at 5:26 pm

    Hi Stephanie,

    nice web project, you really give a good start point.

    I would like to ask you a question to see if you can help me with any tip, In the restaurant detail page I want to have another button that let share all I have in the screen with some, send this by email. But not sending this view as a link, i would like to send it as a picture, png or jpg, etc.. or as html email? any ideas or place where i can find more of this point?

    Another think is if it’s any way that once you rate the restaurant, the rating remain on place becuase on your sample after you rate the restaurant and go back one page the rate reset to the beginning, any idea about this one too?

    again great job

    Regards

    Maykel

  24. Ejay Lai (Canada) on May 11th, 2012 at 8:45 pm

    Have something in mind fora while and your tutorial really helps make it clear. Very exciting to see this work. It would be nice to have the server end for sure, e.g. PHP + MySQL…

  25. rakri on May 14th, 2012 at 12:40 am

    Merci Stéphanie , c ‘est clair et simple ….
    Est-ce que tu as essayé avec un quelque en mvc ?
    Cordialement

  26. Rachelle on May 18th, 2012 at 2:28 am

    Please do you have the tutorial that uses this as a native app? Really looking for a step by step tutorial on a native app

    • Stéphanie on June 4th, 2012 at 10:32 pm

      No sorry this is pure HTML CSS and JavaScript, I’m not a native developer :)

  27. Michel on May 19th, 2012 at 1:57 am

    Pretty awesome!!! Thanks for sharing your hard work!

  28. Luis Aguayo on May 19th, 2012 at 10:44 pm

    Great tutorial and nice looking.

    I have included the github link

  29. dcz.switcher on May 20th, 2012 at 4:42 pm

    Thanks for the great tuto.

    Just 2 questions :

    1 – on the restaurant page, you listen for pageinit event with “live”, why don’t just use “bind”, I do a test and if “live” is used, the event is call many times.
    in my test, I listen for a click on a button to make ajax call and, the ajax is call one more time each time I show the page (*)

    2 – why keep header tag in secondaries pages, heads won’t be load in the DOM (and that the reason why you put the script tag inside the header-div)
    maybe for test page individually ?

    Thanks again to share your knowledges

    (* sorry if my english is impossible to understand, be sure I do my best ^^)

    • Stéphanie on June 4th, 2012 at 10:36 pm

      1 – on the restaurant page, you listen for pageinit event with “live”, why don’t just use “bind”, I do a test and if “live” is used, the event is call many times. in my test, I listen for a click on a button to make ajax call and, the ajax is call one more time each time I show the page (*)
      => it was done this way in the demos and in the documentation, I read that this it uses live instead of bind, to be able to attach events even when page is not created yet. With bind it seems to that the page and elements has to be already created in dom.
      2 – why keep header tag in secondaries pages, heads won’t be load in the DOM (and that the reason why you put the script tag inside the header-div)
      maybe for test page individually ? => Yes that’s it, for debug reason and so that people in the tut can see each page indivudally

  30. suraj on May 29th, 2012 at 12:35 pm

    This article is simply awsome,which very childish way of explaination,that any body can understand.
    Thanks for sharing ur hard work………..

  31. matej on June 3rd, 2012 at 4:23 pm

    Stéph you’re awesome….tnx

  32. sham mo on June 20th, 2012 at 7:23 pm

    Excellent Stuff Stephanie.. We need more people like you in this world !!

  33. Julian on June 20th, 2012 at 8:28 pm

    Hi , i have a cuestion ; i try to undestand the css code but tell me, you modify the ui original source using de css to create the effect of the button dont by together on the web browser ( padding) ?

  34. Yadi on June 29th, 2012 at 8:34 am

    Awsome…..

  35. khushboo on July 17th, 2012 at 8:01 am

    Plz tel me… there is an error in jquery-1.7.1.min.js file….

  36. Michele on July 21st, 2012 at 4:51 pm

    Very nice tutorial!

    A question for the professionals around here:
    > but creating a native app can be pretty expensive.

    What percentage a solution like this would cost less than a native app?
    How much a app like this would cost (in your country)?
    Thanks!

  37. Peter on July 24th, 2012 at 8:45 am

    Thanks for the post, very good explanation. It will be also nice to have a backend admin with a database so the whole process is dynamic and easy to add restaurants.

  38. Peter on July 24th, 2012 at 8:46 am

    What software have you used for the mobile wireframe?

  39. prithvi on July 27th, 2012 at 11:53 am

    hi,stephaniew you did a grt job and your tutorial is grt.i too learning mobile application(html5) iam a beginner.i hav a small doubt iam going to purchase new tap which one is better for practicising this mobile applications
    i want to see how it works in my tab,thats the reason y i want to buy

  40. asasa on July 30th, 2012 at 5:14 pm

    awesome!!!

  41. Buddy Logan on August 1st, 2012 at 8:08 pm

    Yeah … you’re cool! :0)
    Thanks

  42. Laura on August 13th, 2012 at 8:20 pm

    How can I view the app on my devices as I go along? Is there any way to do that? (like I can do with Snappii apps)?

  43. Laura on August 13th, 2012 at 8:52 pm

    Thanks for responding. I don’t know much about making apps or coding. I just know with Snappii apps, I can see my work on my Ipod as I go along. How could I know what my app looks like when I’m working with iquery mobile? And how can I test it? Thanks.

  44. Abiodun on August 24th, 2012 at 12:46 pm

    I think am just like Stephanie because am not too strong on server side scripting. Can any server side expert create a tutorial on this idea but fetching data from a database or from the cloud i.e restaurant adding new meals, maps marker or location.

  45. Malky on August 27th, 2012 at 5:26 pm

    Hi, really loved this, but having one problem.

    I am using a slider (I had a settings page already before seeing this tutorial), but the slider doesn’t work for some reason?

    I can change the numbers with the box, but cannot move the slider left or right?

    Any ideas?

    Many thanks for this, just love it,

    Malky

  46. frafri on September 10th, 2012 at 6:09 am

    Thanks for the post, very good explanation. It will be also nice to have a backend admin with a database so the whole process is dynamic and easy to add restaurants.

  47. sweetu on September 11th, 2012 at 2:18 pm

    really cool site..

  48. Han on September 13th, 2012 at 11:24 am

    Hello.
    Your sample is great!
    I am wondering one thing. IF choose_town.html doesn’t static restaurant data, the other words, if it use the data from Server DB, How can I write it?

  49. Stephanie on September 19th, 2012 at 8:57 am

    For those asking for server side code: again, this is a tutorial shared with love to the community to show what can be done with jQueryMobile, not a “copy paste and use as it is app”. If you have special developpement needs, I recommand that you contact a developper that will be able to do the work for you :)

    • Neil on September 21st, 2012 at 4:01 am

      Where is the link in github as I can’t locate it and thatnks fo the heads up

    • Asif on December 22nd, 2012 at 3:36 pm

      Hi Stéphanie,

      Awesome UI and Great Tutorial. Thanks for sharing with Community.

  50. Scott on October 2nd, 2012 at 5:54 pm

    Great work you little rock star! I am retrofitting your techniques over an existing Android application and it works as advertised, however, it’s slow as hell! I suspect it has to do with sucking down the js/css/and images from my server. Any idea how those resources might be packaged in the Android APK and made available locally on the phone?

    Peace,
    Scott

  51. Fernando on October 4th, 2012 at 4:01 pm

    Great JOB.. excellent

  52. Peter on October 4th, 2012 at 10:13 pm

    Great job Stephanie….I am 3d cad designer. Web design is my hobby.
    I would use jQuery Templates plugin and I will get data from server separately from the document(JSON data format).
    Example: http://eve-star.co.uk/panel_rings/index.html#slovenia

    Is easy to make changes and user download only part she(he) wants…

  53. moe on October 5th, 2012 at 4:09 am

    thanks for your tutorial,,, but its offline,, can you make online tutorial,, like mysql database.. so i can fill other data..

    overall thanks a lot h_n

  54. Sebastian on October 7th, 2012 at 11:19 pm

    Hello,

    Nice Tutorial. If i wanted to make a live app… How would i get all the restaurants information automatically? would I use Google maps API to connect the restaurants in Real Time?

    Any suggestion on how to bring in the restaurants to the app without having to manually put them in would be great.

    In other words is there a dynamic way to grab all the restaurant information and menu if that information is provided…?

    Thanks,

    Sebastian

  55. Sebastian on October 7th, 2012 at 11:22 pm

    Hello, any way to dynamically grab the restaurant infoamtion…

    Would i use Google Maps API?

    or how would one get this info?

    because it would be impossible to manually put in restaurants,

    I want to know how to create on based off user location to see what is around them…

    Any Ideas?

    Thanks for your time…

    Thanks

  56. OldMan on October 11th, 2012 at 7:38 am

    Hi Stephanie,

    I stumbled upon your app while searching for a jQuery Mobile cascading SELECT drop-down demo, but unfortunately, though useful, it did not serve my purpose. But hey, it will, if you can modify it to use SELECT cascading dropdowns and finish off the app in a single page :

    1. Dropdown to select the food
    2. Dropdown to select the town
    3. Dropdown to select the restaurant

    However, it will be more useful if the town dropdown contained only the list of towns which has the selected food at dropdown 1, and the restaurant dropdown contained only the list of restaurants which have the selected food at dropdown 1 and is located at the selected town at dropdown 2 (true and related cascading)

    Hope you will do it. If not, I would be thankful if you can provide me links to other resources on how to use cascading dropdowns using jQuery Mobile, preferably linked to related database tables (in your example, it would be food, town and restaurant tables).

    Thanks!

  57. farid on October 12th, 2012 at 12:36 am

    Here you’ll find scripts with free demo
    http://55points.blogspot.com/

  58. Nimsrules on October 12th, 2012 at 11:03 am

    Have been assigned to convert a Jewellery e-commerce website into a standalone mobile site instead of using CSS3 Media Queries. This tutorial’s gonna come handy in the process. Thank you!

  59. Peter on October 29th, 2012 at 5:05 pm

    jQuery + jQuery Mobile + jQuery Template Plugin(or Knockout.js) + JSON

    You have small amount of code. User download only what she or he wants and is easy to upgrade web page. On the we convert our web app to native app…

    eve-star.co.uk/rest/

  60. Mohammad on November 28th, 2012 at 10:49 am

    Hi, Thank you for this tutorial , but the links not work , anyone can re-upload again.

    Thanks

  61. Birane on November 30th, 2012 at 4:42 am

    je n’ai jamais vu un plus grand développeur que toi.
    tu m’apprends a coder.
    tu es le meilleur et aussi tu es super gentil c’est plus même
    merci pour tous!

  62. Matt on December 2nd, 2012 at 4:53 pm

    Hi Stephanie,
    I just wanted to thank you for illustrating the capabilities of jquery and the work you put into this – it is a fantastic article. You are very talented.
    – Matt

  63. Amit on December 9th, 2012 at 4:21 pm

    Hi Stéphanie,
    Its ultimate good tutorial.
    But one query, i many times searching but not found exact result.

    Query : what is best way for jquery mobile html page creation ? single html page or multiple html page ?
    i mean multiple pages (data-role=”page”) were in one html file ?
    OR
    we create separate html pages ?
    * i hope you understand my query, please reply me its very helpful for everyone.

  64. Edward on December 11th, 2012 at 10:48 pm

    JQuery rocks! Thanks for sharing.

  65. Shawn on December 18th, 2012 at 4:10 pm

    Brilliant thanks..

  66. Nakul Sharma on December 26th, 2012 at 5:23 pm

    We are using to add the numbers in the buttons but if we have to make it dynamic as in it changes according to the numbers of restaurants present what would you suggest I do…Need your suggestions!

  67. Hussam on January 23rd, 2013 at 12:09 am

    very interesting and clear tutorial
    thank you

    do you work as freelance?

  68. Robin on February 1st, 2013 at 7:08 am

    Awesome tutorial. My first tutorial that I read when i started Jquery Mobile Development.

  69. Fresher_06 on February 11th, 2013 at 2:03 am

    HI Stéphanie,

    Amazing work . really good tutorial for the starters, I Have created a PhoneGap application out of it :)
    Just a query here , do i need to add the below code in all the pages like (choose_town.html,choose_restaurant.html) apart from index.html , or we just need to add this only once in index.html page and rest all the pages will automatically refer to the css/js loaded in index.html page.

  70. Faraz Ahmad on February 19th, 2013 at 6:54 am

    I am Tizen developer in India. This tutorial is really appreciable to start the jQuery Mobile development. Great Work..

  71. Brian on March 17th, 2013 at 7:21 pm

    Pretty awesome tutorial. I was able to understand the code pretty easy with the explanations that you provided. Amazing what jQuery Mobile can do…

  72. VJ on April 4th, 2013 at 3:12 pm

    Truly impressive and help tutorial for developers…

    Thanks..

  73. NewDev on April 5th, 2013 at 10:55 am

    Very good ,useful and helpful tuto!
    thans you.

  74. Ajay on April 10th, 2013 at 4:35 pm

    Hey..Great Tutorial !! Thank you !!

  75. Steven on April 10th, 2013 at 6:03 pm

    Hi Stéphanie,

    Can i use and edit the script to build a app for my own restaurante, or do u have copyright and some licences?

  76. Jose on May 11th, 2013 at 5:56 pm

    Hi Stephanie, i came across your tutorial looking for help on how to integrate the server side. I’ve been learning jquery mobile for a while now but i keep having problems with the server side.

    Im creating a simple app just for practice, i hace a simple login form, then if the login is succesfull it shows a list of data asociated with that user.

    I tried using php and some javascript, but i keep having problems with functions not being called at the right moment, or the page not refreshing to show dynamic data, or buttons not functioning correctly. I’m really frustrated since i cant find any usefull information on how to solve this issues. I see tons of questions on quora about preventing default behavior for forms (for the login section i’m trying to do)

    I still dont know if i should use separate htmls for pages that load dynamic info or should stick to one page structure like your demo.

    What tips can you give me about loading content via php? how to call functions?

  77. Mich on May 15th, 2013 at 6:05 pm

    Hello Stephanie,

    I built a Jquery mobile application where I used only as you did data-transition attribute to link a html page to another one.The issue is that I faced some problems when i reach the page that I am linking to: the format is messed up. However if I add the rel=”external” attribute to the anchor tag I reach the html page I want to go to with a good format. The problem is the last solution for the first problem creates another problem which is the data-transition attribute will be automatically disabled and a blank page shows up between the transition of my two html pages which is undesired.
    So how could I make a transition without showing a blank page while maintaining a good format?

    In the tutorial you didn’t even used the relation attribute though you used html files linked together how did you make that happen?

    Thank you a lot.

    PS: By the way I searched for many solutions like adding functions in a jquery file: $(document).bind(“mobileinit”, function(){
    $.mobile.defaultTransition = ‘none';
    });
    Or changing in the css:
    -webkit-backface-visibility:hidden;

    All these solutions were useless

  78. Yaiza Bailen on May 20th, 2013 at 11:36 am

    Hi!

    Thanks Stéphanie for this great tutorial, amazing work! Since many people asked for it, I have written the server-side code for this application using Django and written a basic tutorial. You can find it here: http://yaizabailen.com/django-tutorial-creating-the-back-end-for-the-restaurant-picker-app/ The code is also in github using the templates done by Stéphanie. Enjoy!

  79. Mayuraysh on June 3rd, 2013 at 1:33 pm

    One of the best example i have seen yet,

  80. kurroman on July 10th, 2013 at 11:28 pm

    Thx from Spain.

    Great job from first line to last :)

  81. AK on July 27th, 2013 at 10:14 am

    Awesome Tutorial Stéphanie! :) Just what I was looking for!
    <3'd your work on your website. Keep it up!
    Will definitely be in touch.

    Cheers,
    AK

  82. Srinivas Reddy on August 21st, 2013 at 12:26 pm

    Thanks a lot. Awesome tutorial. Download link does not work. Please check.

  83. Steve on September 5th, 2013 at 9:40 pm

    Great piece any chance it could be done as a wp plugin :)

  84. Manish on September 11th, 2013 at 2:14 pm

    Hi..Which IDE we can use for JQuery ..?

  85. Dhiraj on December 14th, 2013 at 6:42 pm

    I really like this tutorial very much and help me a lot to understand jquery mobile but after completing it how do i put in app store and in android market .

  86. Max on January 15th, 2014 at 9:48 pm

    Hi Stephanie,
    Great tutorial. I’ve downloaded the files, but when I click on any link, for a example, “Some sushis”, the message “Error loading page appears”. The links in the .html file doesn’t work. Can you tell why?

  87. Stéphanie on March 11th, 2012 at 4:12 pm

    Strange, no 404 for my, maybe DNS problems or so ?