Cordova/PhoneGap Rendering Local PHP?

I'm making a web using PhoneGap. I need to use a PHP page, but I want a real fluid website, so I opted for replacing a div with some PHP using JavaScript when loaded. When I launch

Solution 1:

Summary: You are loading both a local and a server version of a PHP page at the same time, and you are having a CORS issue with the server load on PhoneGap.

---

I was able to reproduce your unexpected output here (http://jsfiddle.net/Drakes/gq0my18r/). I took your HTML/PHP code and rendered it as HTML only. This was the output:

    ".$festa[$i]." 
    ".$data[$i]." 
    ".$luogo[$i]." 
"; $i++; } ?>

You might be serving a local copy of your PHP file on your phone, and then fetching a server version, or your server is responding with an unprocessed version of your PHP page somehow.

Now, you said something interesting:

... in other browsers, safari on mac, google chrome on mac and safari on iphone it works correctly, and shows me that code for only a second

This leads me to believe that you are rendering the local HTML version, then somehow requesting the server version. I looked at the links you supplied me in the comments and noticed something striking in your HTML that explains everything.

You have

   <div id="container">
 <script>
    $( "#container" ).load("http://www.bparty.org/APP/eventi.php #container");
</script>  
   </div>

and

   <div id="container">
<script>
    $( "#container" ).load( "eventi.php #container" );
</script>                        
   </div>

on the same page. There is a myriad of trouble happening here. Now you have multiple container divs with the same id, and there is a race condition to load your local PHP version (which can't render locally), and then it is being replaced with the server version which can render PHP. This explains that one-second lag you described in some browsers.

CORS

However, your huge problem with PhoneGap and PHP is that you cannot simply load external pages into your phone app using AJAX because of something called CORS (Cross-origin resource sharing). It's just disallowed. We're getting into hacky-land now, but you can do some magic and make it work. I'm not recommending this outright, but you can make your setup work by adding this to the top of eventi.php:

<?php
 header("Access-Control-Allow-Origin: *");

Also, please, please stop using #container in your fetch URL "http://www.bparty.org/APP/eventi.php #container". Who knows how PhoneGap handles that.

Solution 2:

According to the documentation, Phonegap can only handle files with HTML, CSS, and JavaScript. If you want to use PHP or any other language for your application, you have to handle PHP on your server, and from a mobile app request only static data and JS