Include jquery mobile in express js app correctly
I have a problem including jquery js file in my explicit application. I added jquery.js files to / public / javascripts folder and I changed my layout.jade file like this:
!!!5
html
head
title= title
meta(name='viewport', content='width=device-width,initial-scale=1')
link(rel='stylesheet', href='/stylesheets/style.css')
link(rel='stylesheet', href='/stylesheets/jquery.mobile-1.0.1.min.css')
script(type='text/javascript', src='/javascripts/jquery.mobile-1.0.1.min.js')
script(type='text/javascript', src='/javascripts/jquery-1.7.2.min.js')
body!= body
I've also included app.use (express.static (__ dirname + '/ public')); in my app.js.I changed my index.jade as follows to include some mobile jquery tags:
div(data-role='page')
div(data-role='header')
h1= title
div(data-role='content')
ul(data-role='listview',data-inset='true',data-filter='true')
li: a(href='#') Acura
The problem is that I cannot display the webpage correctly. I don't see any jQuery related styles. Does anyone know how I can fix this?
thank,
source to share
You need to include the jQuery core file in front of the jQuery Mobile file as the latter extends it; so if Core doesn't exist when you enable Mobile, errors will be thrown.
You can reference the correct order to include jQuery and jQuery Mobile files here: http://www.jquerymobile.com/download/
You are also using the wrong version of jQuery core (look at the link above for the correct versions):
- jQuery Mobile 1.0.1 supports jQuery Core 1.6.4.
- jQuery Mobile 1.1.0 RC-1 supports jQuery Core 1.7.1. jQuery Mobile does not currently support jQuery Core 1.7.2 (as stated in this blog post ).
Finally, I would add your CSS stylesheet after jQuery Mobile to make it easier to override jQuery Mobile CSS.
source to share