Mar 08 2012

jQuery Mobile Tutorial: Creating a Restaurant Picker Web App

Advertisement

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.

About the Author

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

Homepage

Comments and Discussions
  • Subco, 08 March 2012

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

  • JG, 08 March 2012

    Nice article, especially part 2.

  • OJR, 08 March 2012

    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

  • Luca, 08 March 2012

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

  • Webrunner, 08 March 2012

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

  • Yoan De Macedo, 08 March 2012

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

  • Rafa, 08 March 2012

    Very good tut, Thanks!

  • Yorgos, 08 March 2012

    Very comprehensible tutorial. Thanks Stéphanie!

  • Patrice, 08 March 2012

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

    • steve, 10 September 2013

      How did you adapt it to wordpress :)

  • Stéphanie, 08 March 2012

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

  • Ankit Bagaria, 09 March 2012

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

  • waqas, 09 March 2012

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

  • Neil, 10 March 2012

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

    Thanks

    • Stéphanie, 11 March 2012

      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 :)

  • Juarez P. A. Filho, 11 March 2012

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

  • vidya, 15 March 2012

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

  • JHN, 15 March 2012

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

  • André Klein, 17 March 2012

    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, 22 March 2012

      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 :)

  • gh0st, 20 March 2012

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

  • Russ Ray, 24 March 2012

    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, 25 March 2012

      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 :)

  • vasu, 29 March 2012

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

  • Terrance Lezcano, 06 April 2012

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

  • Paul, 10 April 2012

    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.

  • Maykel Barcala, 25 April 2012

    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

  • Ejay Lai (Canada), 11 May 2012

    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…

  • rakri, 14 May 2012

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

  • Rachelle, 18 May 2012

    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, 04 June 2012

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

  • Michel, 19 May 2012

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

  • Luis Aguayo, 19 May 2012

    Great tutorial and nice looking.

    I have included the github link

  • dcz.switcher, 20 May 2012

    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, 04 June 2012

      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

  • suraj, 29 May 2012

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

  • matej, 03 June 2012

    Stéph you’re awesome….tnx

  • sham mo, 20 June 2012

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

  • Julian, 20 June 2012

    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) ?

  • Yadi, 29 June 2012

    Awsome…..

  • khushboo, 17 July 2012

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

  • Michele, 21 July 2012

    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!

  • Peter, 24 July 2012

    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.

  • Peter, 24 July 2012

    What software have you used for the mobile wireframe?

  • prithvi, 27 July 2012

    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

  • asasa, 30 July 2012

    awesome!!!

  • Buddy Logan, 01 August 2012

    Yeah … you’re cool! :0)
    Thanks

  • Laura, 13 August 2012

    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)?

  • Laura, 13 August 2012

    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.

  • Abiodun, 24 August 2012

    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.

  • Malky, 27 August 2012

    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

  • frafri, 10 September 2012

    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.

  • sweetu, 11 September 2012

    really cool site..

  • Han, 13 September 2012

    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?

  • Stephanie, 19 September 2012

    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, 21 September 2012

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

    • Asif, 22 December 2012

      Hi Stéphanie,

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

  • Scott, 02 October 2012

    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

  • Fernando, 04 October 2012

    Great JOB.. excellent

  • Peter, 04 October 2012

    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…

  • moe, 05 October 2012

    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

  • Sebastian, 07 October 2012

    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

  • Sebastian, 07 October 2012

    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

  • OldMan, 11 October 2012

    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!

  • farid, 12 October 2012

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

  • Nimsrules, 12 October 2012

    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!

  • Peter, 29 October 2012

    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/

  • Mohammad, 28 November 2012

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

    Thanks

  • Birane, 30 November 2012

    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!

  • Matt, 02 December 2012

    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

  • Amit, 09 December 2012

    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.

  • Edward, 11 December 2012

    JQuery rocks! Thanks for sharing.

  • Shawn, 18 December 2012

    Brilliant thanks..

  • Nakul Sharma, 26 December 2012

    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!

  • Hussam, 23 January 2013

    very interesting and clear tutorial
    thank you

    do you work as freelance?

  • Robin, 01 February 2013

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

  • Fresher_06, 11 February 2013

    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.

  • Faraz Ahmad, 19 February 2013

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

  • Brian, 17 March 2013

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

  • VJ, 04 April 2013

    Truly impressive and help tutorial for developers…

    Thanks..

  • NewDev, 05 April 2013

    Very good ,useful and helpful tuto!
    thans you.

  • Ajay, 10 April 2013

    Hey..Great Tutorial !! Thank you !!

  • Steven, 10 April 2013

    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?

  • Jose, 11 May 2013

    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?

  • Mich, 15 May 2013

    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

  • Yaiza Bailen, 20 May 2013

    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!

  • Mayuraysh, 03 June 2013

    One of the best example i have seen yet,

  • kurroman, 10 July 2013

    Thx from Spain.

    Great job from first line to last :)

  • AK, 27 July 2013

    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

  • Srinivas Reddy, 21 August 2013

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

  • Steve, 05 September 2013

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

  • Manish, 11 September 2013

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

  • Dhiraj, 14 December 2013

    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 .

  • Max, 15 January 2014

    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?

  • Stéphanie, 11 March 2012

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

search form
 
image description image description