Include jquery mobile in express js app correctly

Question

I have problem in including jquery js file in my express application. I added jquery.js files to /public/javascripts folder and I changed my layout.jade file to be as follows:

!!!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 also included app.use(express.static(__dirname + '/public')); in my app.js.I changed my index.jade as follows to include some jquery mobile 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 can't get the web page render correctly. I can't see any jquery related styles.Does any body know how can I fix that?

thanks,

Answer 1

You need to include the jQuery Core file before the jQuery Mobile file because the latter extends the former; so if the Core does not exist when you include Mobile, errors will ensue.

You can reference the correct order to include the jQuery and jQuery Mobile files here: http://www.jquerymobile.com/download/

You are also using the wrong jQuery Core version (look at the above link for proper 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 currently does not support jQuery Core 1.7.2 (as stated in this blog post).

And finally, I would include your custom CSS stylesheet after the jQuery Mobile one to make overriding the jQuery Mobile CSS easier.