Search code examples
javascriptphpjqueryhtmlcordova

Loading php content into Phonegap

I am working with Phonegap and Dreamweaver to setup a small application but I am facing a problem as I am a new in Phonegap.

I have an HTML5 file and my CSS file also the config.xml form my icon, splash screen etc.

Phonegap reads only the index.html and not the index.php file.

So I made a grab.php file to pull some data from my hosting. Localhost everything works great but when I am build the app it doesn't load the data...

Here is my html file and grab.php file.

<!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" />
<title>Celebrity.Com | Android App</title>
<link rel="stylesheet" type="text/css" href="mobile_css/style.css" media="all" />
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>

<script type="text/javascript">
$(document).ready(function() {
    $(".loa").load("grab.php");
});
</script>

</head>

<body>

<div class="headerHolder"><div class="logo"></div></div>
<div style="width:100%; height:20px; float:left; margin-bottom:1px;"></div>

<div class="loa" style="width:100%; padding-bottom:5px;">

<div style="clear:both;"></div>
</div>

</body>
</html>

And grab.php

<?php
require "connectiondb.php";
$bann = mysql_query ("SELECT * FROM info ORDER BY a_name");
while($bannerl = mysql_fetch_assoc($bann)) {
echo '
<div class="articleHolder">
<div class="imageholder"><img src="'.$bannerl['a_image'].'" width="180" height="120"/></div>
<div class="controlz"><span style="float:left;">'.$bannerl['a_name'].'</span><img style="width:65px; height:65px; float:right;" src="images/details.png" width="65" height="65" border="0"></div>
</div>';
}
?>

I tried to upload the grab.php file to my server and load it from here but I think that the policy doesn't let me to run, load files from other servers.

Solution

  • You need to put your host in a whitelist (http://docs.phonegap.com/en/1.9.0/guide_whitelist_index.md.html)

    Then you have to specify in Phonegap configuration your domain:

    Then you can make ajax requests, but you have to specify the domain, so needs to be something like:

    <script type="text/javascript">
$(document).ready(function() {
    $(".loa").load("http://yourdomain.com/grab.php");
});
</script>