how to load pages using jquery load() in phonegap

Question

I am trying to load html pages in phonegap using jquery.load() function. but it is not working. It does not load the pages which I want to load. Here is my code

jQuery(function () {
var Login = {
    onDeviceReady : function () {
        $('.contents').load('http://localhost:8888/pc/assets/www/pages/login.html');
    }
};

document.addEventListener("deviceready", Login.onDeviceReady, false);
});

here is my html

<header>
    header
</header>
<section class="contents">
    contents
</section>
<footer>
    <ul class="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Photo</a></li>
    </ul>
</footer>

How can I make this work? Please help

Update

cordova.xml file

<?xml version="1.0" encoding="utf-8"?>
<!-- 
   Licensed to the Apache Software Foundation (ASF) under one
   or more contributor license agreements.  See the NOTICE file
   distributed with this work for additional information
   regarding copyright ownership.  The ASF licenses this file
   to you under the Apache License, Version 2.0 (the
   "License"); you may not use this file except in compliance
   with the License.  You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing,
   software distributed under the License is distributed on an
   "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
   KIND, either express or implied.  See the License for the
   specific language governing permissions and limitations
   under the License.
 -->
 <cordova>
    <!--  
    access elements control the Android whitelist.  
    Domains are assumed blocked unless set otherwise
     -->

<access origin="*"/> <!-- allow local pages -->

    <!-- <access origin="https://example.com" /> allow any secure requests to example.com -->
    <!-- <access origin="https://example.com" subdomains="true" /> such as above, but including subdomains, such as www -->
    <!-- <access origin=".*"/> Allow all domains, suggested development use only -->

<log level="DEBUG"/>
<preference name="classicRender" value="true" />
 </cordova>

after adding above to cordova.xml file I add this kind of file path in jquery

 jQuery(function () {
var Login = {
    onDeviceReady : function () {
        $('.contents').load('./login.html');
    }
};

document.addEventListener("deviceready", Login.onDeviceReady, false);
 });

in fact, the thing is, usually when you want to load external data, you need to modify a file (eg: the file is `Cordova.plist` for iOS development) to add an exception. Wait I'll provide more information in my answer mate... — Littm, Sep 18 '12 at 07:28
@Littm I am waiting for you answer. Could you please add your answer how to make it work? — Om3ga, Sep 18 '12 at 07:36
hey mate, I re-edited my answer. I'm not sure if my answer is clear. Let me know if you don't understand something or if my solutions are not working. — Littm, Sep 18 '12 at 07:40
@Littm Could check my update. It is still not working for me. It is still not loading the page. — Om3ga, Sep 18 '12 at 07:49
If you still have issue, I'll try it in my environment and let you know if I succeed — Littm, Sep 18 '12 at 07:52
Is `login.html` in the same folder as your other html page where you call the function `load`? — Littm, Sep 18 '12 at 08:01
hey mate the first solution worked for me. You may need to define correctly your path? --> load(your_login.html_path). Let me know if it's ok for you — Littm, Sep 18 '12 at 08:04
If your html file (not `login.html`, the other one) is in the folder `www`, you may try: `$('.contents').load('./pages/login.html');` — Littm, Sep 18 '12 at 08:15
@Littm Sorry I was in a meeting so couldn't reply. Thanks it works now :) — Om3ga, Sep 18 '12 at 09:17
Yiha! :D don't forget to set `` back to `` for security stuffs mate — Littm, Sep 18 '12 at 09:19

Littm · Accepted Answer · 2012-09-18T08:17:50.657

I noticed that your HTML file login.html is inside your folder www.

So, I think you may try to load the HTML file by using (pay attention to the path of the HTML file!)

$('.contents').load('your_login_html_path/login.html');

instead of:

$('.contents').load('http://localhost:8888/placeeq/assets/www/pages/login.html');

For example: if your html file (not login.html, the other one which calls the method load()) is in the folder www, and if login.html is in www->pages, you'll have:

$('.contents').load('./pages/login.html');

Eg folder structure:

www
- html_calling_load.html
- pages
  - login.html

Hope this helps. Let me know about your results.

how to load pages using jquery load() in phonegap

1 Answers1

Linked