0

I'm newbie developing a phonegap app. I already checked those posts: jquery.load() not working on phonegap and how to load pages using jquery load() in phonegap and jquery .load() function does not work under phonegap... but nothing seems to help.

I'm developing an app in phonegap with jquery and an external device to run it instead of an emulator. I have 2 html: breakfast.html and tab.html

My folder structure is:

▸ merges/               
▸ platforms/            
▸ plugins/              
▾ www/                  
  ▸ css/                
  ▸ img/                
  ▸ js/                 
  ▸ res/                
  ▸ spec/               
  ▾ static_pages/       
    ▾ layouts/          
        tab.html        
      breakfast.html    
    config.xml          
    icon.png            
    index.html          
    spec.html

My Breakfast.html is

<!DOCTYPE html>                                                                                 
<html>                                                                                          
    <head>                                                                                      
        <meta charset="utf-8" />                                                                
        <meta name="format-detection" content="telephone=no" />                                 
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />          
        <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />               
        <link rel="stylesheet" type="text/css" href="../css/custom_forms.css" />                
        <title>Hello World</title>                                                              
        <script type="text/javascript" src="../phonegap.js"></script>                           
        <script type="text/javascript" src="../js/index.js"></script>                           
        <script type="text/javascript" src="../js/bootstrap.min.js"></script>                   
        <script type="text/javascript" src="../js/jquery-1.10.2.min.js"></script>               
        <script type="text/javascript">                                                         
          app.initialize();                                                                     
        </script>                                                                                            
    </head>                                                                                     
     <body>                                                                                      
       <header class="navbar navbar-fixed-top">
         XXXXXXX                                                                       
       </header>                                                                                 
         <div id="testing"></div>                                                                
         <script>$( "#testing" ).load( "layouts/tab.html #test" );</script>       
       <footer class="navbar" id="footer_bottom">                                                
         XXXXXXXX                                                              
       </footer>                                                                                 
     </body>    
</html>

My tab.html is:

<div id="test" style="width:100%;heigt:90px;background:black;color:white;">
  TESTING JQUERY                                                           
</div>

Regarding to official api.jquery.com/load page what I have to do to insert a part of an html file with an id I have to do next:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>load demo</title>
  <style>
  body {
    font-size: 12px;
    font-family: Arial;
  }
  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>

<b>Footer navigation:</b>
<ol id="result"></ol>

<script>
$( "#result" ).load( "ajax/test.html #container" );
</script>

</body>
</html>

I don't know what I'm doing wrong.

Does anyone faced this issue before and figure it out why?

Thanks in advance.

UPDATE:

Sorry, I'm developing for Android, and the device is a LG optimus 2X with android 4.2.2

Community
  • 1
  • 1
Marc Pursals
  • 762
  • 1
  • 8
  • 23
  • I don't know what platform / device you're using and how your project is configured, but this problem may have something to do with the fact that phonegap applications use `file://` protocol and which is subject to strict security policies (shouldn't be as strict in WebView, but I'm not sure). – pawel Sep 17 '13 at 10:37
  • Sorry, I'm developing for Android, and the device is a LG optimus 2X with android 4.2.2... I'm gonna update the question. – Marc Pursals Sep 17 '13 at 10:40
  • If you were able to solve it, please add an answer to your own question. Or if you don't want to do that, then please delete your question. – kapa Sep 17 '13 at 13:44
  • I was writing it while you were deleting the solved tag ;) But you are wright I was slow. – Marc Pursals Sep 17 '13 at 14:07
  • Don't add "[SOLVED]" to the title, that's not how things work here. Posting self answer is correct, when you can mark it as accepted. (think it's 48 hours) – Shadow The GPT Wizard Sep 17 '13 at 14:14
  • Thank you very much, I'm newbie :oP. – Marc Pursals Sep 17 '13 at 14:31

1 Answers1

0

Thanks to Pawel (and the official http://docs.phonegap.com/en/3.0.0/guide_appdev_whitelist_index.md.html#Domain%20Whitelist%20Guide) I could figure out the solution. As he brilliantly suggest, the problem was with the whitelist domain configuration of my phonegap application. To solve it you have to edit your your_app/www/config.xml file and try to locate:

<access origin="http://127.0.0.1*" />

You must change it to:

<access origin="*" />

That's it. Now it works.

Thanks Pawel to show me the way ;)

Marc Pursals
  • 762
  • 1
  • 8
  • 23