Getting data from database on pageload jquery php

Question

can any one help me please

What Im trying to do is a phone app using HTML5, JQUERY, Json and PHP. I cannot use PHP pages in this as I will be packaging it with Phone Gap Cloud Compliler.

I have tried using many scripts and suggestions that I have researched on the internet but cannot seem to get this to work.

On the page I need to retrieve data from the database there are 6 text boxes or divs I wish to populate using a on page ajax request to a PHP processing page that gets the required data and forms it into a Json string, the following scripts will show where I am at presently.

PHP Page:- this works as far as getting the data from the database and from the research I have done succssefully parces it into a Json format

PHP Script **********************************************

<?php

include_once 'db_connect.php';

header("Content-Type: application/json");   //this will tell the browser to send a json object back to client not text/html (as default)


session_start();



$return_arr = array();

$sql = "SELECT * FROM `autumnTerm`";       //query
  $result = mysqli_query($mysqli, $sql);
    while($row = mysqli_fetch_array($result)) {

        $row['term1start'] = date('d-m-y', strtotime($row['term1start']));
        $row['term1finish'] = date('d-m-y', strtotime($row['term1finish']));
        $row['term2start'] = date('d-m-y', strtotime($row['term2start']));      
        $row['term2finish'] = date('d-m-y', strtotime($row['term2finish']));


    $row_array['term1start'] = $row['term1start'];
    $row_array['term1finish'] = $row['term1finish'];
    $row_array['term2start'] = $row['term2start'];
    $row_array['term2finish'] = $row['term2finish'];

    array_push($return_arr,$row_array);     

    }


  echo json_encode($return_arr);
?>

this returns the following json :-

[{"term1start":"01-04-15","term1finish":"02-04-15","term2start":"03-04-15","term2finish":"04-04-15"}]

which I believe to be the right format.

The Jquery:-

<script>

I think I am right in believing that document ready should run the jquery script on page load

$(document).ready(function() {

the processing page address which is associated to a variable

    var url = "http://www.newberylodge.co.uk/webapp/includes/retrieveAutumn.inc.php"; 

The ajax request defining the request elements

$.ajax({
type: "POST",
cache: false,
url: url,
dataType: "json",
      success: function(data) {

         $('#termoneError').text('The page has been successfully loaded');
      },
      error: function() {
         $('#termoneError').text('An error occurred');
      }
});//ajax request   
 });//ready function    
</script>

If anyone would be so kind as to helping me figure this out I would be most greatful, I have been trying to resolve this for over a week now

I havent posted the html trying not to swamp the question with code, but if its needed I will put it up on request

Answer 1

try this:

$.ajax({
type: "GET",
cache: false,
url: url,
 dataType: "json",
  success: function() {
      console.log()
     $('#termoneError').text('The page has been successfully loaded');
  },
  error: function() {
     $('#termoneError').text('An error occurred');
  }
});//ajax request   
 });//ready function    
 </script>

and try to see the console is there any error?

Answer 2

you should try for the error Cross-Origin Request Blocked to put proper header

header('Content-Type: application/json; charset=utf-8');    
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET,POST,OPTIONS');
header('Access-Control-Allow-Credentials: true');

the rest code its ok