CODEWITHSUNDEEP
cordovajquery-mobile
Shahid Iqbal
Shahid Iqbal

Reputation: 2058

jQuery Mobile css and javascript are not linked to my code

I am new to jQuery Mobile and i am trying to implement the sample jQuery Mobile application from a tutorial.

Here is my code:

<html>
    <head>
        <meta charset="utf-8"/> 
            <title>Title</title>  
        <meta name="viewport" content="width=device-width, initial-scale=1"/> 

                <link rel="stylesheet" type="text/css" href="jquery.mobile.css" />       
                <script type="text/javascript" src="jquery.js"></script>
                <script type="text/javascript" src="jquery.mobile.js"></script>           
    </head>  
    <body> 

        <div  data-role="page">                                                       
            <div  data-role="header">                                                 
                <h1>Page Header</h1>  
            </div>  

            <div  data-role="content" >                                                 
                <p>Hello jQuery Mobile!</p>  
            </div>  

            <div  data-role="footer">                                                 
                <h4>Page Footer</h4>  
            </div>  
        </div> 

    </body>
</html>

All the referenced files are included in my project. But the problem is my output is a simple html page without any js or css rule applied.

I want my output like jQuery Mobile sample app.

Please help me.

Upvotes: 2

Views: 4521

Answers (2)

Littm
Littm

Reputation: 4947

Use one of the following solutions:

Solution 1:

This 1st solution consists in including your jQuery Mobile's CSS / JS files locally (= in your folder www)

1 - Include your HTML file index.html inside your folder www.

2 - Dowload the three CSS, JS files from the respective links:

3 - Copy the CSS files to www/css/ and the JS files into www/js/, while making sure that the references in XCode are done successfully.

You can do the following to achieve the above:

  1. Right click on your folder www/css/ or www/js/ in XCode,
    New File... -> iOS / Other -> Empty -> Next.
    Then, enter the file to copy (for example: jquery.mobile.structure-1.2.0.min.css).

  2. Copy & Paste the content of the file (ex: jquery.mobile.structure-1.2.0.min.css) you downloaded into the new file that you created above, in XCode.

  3. Repeat the steps 1 and 2 for all the CSS / JS files you downloaded (jquery.mobile.structure-1.2.0.min.css, jquery.mobile-1.2.0.min.css, jquery-1.8.1.min.js, and jquery.mobile-1.2.0.min.js).

Once your files are copied, you should have the following directory structure:

  • www
    • index.html
    • css
      • jquery.mobile.structure-1.2.0.min.css
      • jquery.mobile-1.2.0.min.css
    • js
      • jquery-1.8.1.min.js
      • http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js

4 - Now, considering the path of your jQuery Mobile's CSS / JS files, you can add their references in the header of your HTML file index.html.

Full example of index.html:

<html>
    <head>
        <meta name='viewport' content='minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no'/>

        <link rel="stylesheet" href="./css/jquery.mobile.structure-1.2.0.min.css" />
        <link rel="stylesheet" href="./css/jquery.mobile-1.2.0.min.css" />
        <script src="./js/jquery-1.8.1.min.js"></script>
        <script src="./js/jquery.mobile-1.2.0.min.js"></script>
    </head>  
    <body> 

        <div  data-role="page">                                                       
            <div  data-role="header">                                                 
                <h1>Page Header</h1>  
            </div>  

            <div  data-role="content" >                                                 
                <p>Hello jQuery Mobile!</p>  
            </div>  

            <div  data-role="footer">                                                 
                <h4>Page Footer</h4>  
            </div>  
        </div> 

    </body>
</html>

Solution 2:

This 2nd solution consists in getting the jQuery Mobile's CSS / JS files from the external server at http://code.jquery.com .

The problem with Phonegap is that you need to add specific whitelist exceptions for allowing the retrieval of external data.

For more information about this whitelist, I suggest you to check the online doc (this one is for Phonegap / Cordova version 2.1, you may check the appropriate link according to your version of Phonegap / Cordova): http://docs.phonegap.com/en/2.1.0/guide_whitelist_index.md.html#Domain%20Whitelist%20Guide

Since you're using XCode (and you're developping for iOS), you have to following these steps in order to add http://code.jquery.com to your whitelist exception:

  • Open the file Resources/Cordova.plist in XCode.

  • Right click on the line ExternalHosts, and select Add row.

  • Set the String value of the new created line to code.jquery.com.

  • Save your modified file and close it.

Now, your can include the references of your external CSS / JS files in the header of you HTML index.html:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

Full example of index.html:

<html>
    <head>
        <meta name='viewport' content='minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no'/>

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

    </head>  
    <body> 

        <div  data-role="page">                                                       
            <div  data-role="header">                                                 
                <h1>Page Header</h1>  
            </div>  

            <div  data-role="content" >                                                 
                <p>Hello jQuery Mobile!</p>  
            </div>  

            <div  data-role="footer">                                                 
                <h4>Page Footer</h4>  
            </div>  
        </div> 

    </body>
</html>

Upvotes: 4

P0DD3R5
P0DD3R5

Reputation: 336

Have u checked using firebug in firefox to make sure that the actual javascript libraries are getting loaded? Where you are referencing the files, is this pointing to the correct location?

Simple i know, but could have been overlooked :)

Upvotes: 0

Related Questions