Home/ Questions/Q 8625889
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T07:53:13+00:00

I am new to jQuery Mobile and i am trying to implement the sample

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0