Reputation: 868

unexpected token < AJAX jquery

I'm having trouble with my AJAX. When I send a request through AJAX, first I get back a 200 (okay) from xhr.status. But then, I get back

syntaxerror: unexpected token <.

Could it be that it is part of an html tag? My header is application/json. So what could be the problem? Here are all my files:

HTML

       <?
 require_once('../includes/helpers.php'); //just setting up

 session_start();


 //Google Maps API key: AIzaSyDUE08r9kD1p5QsqOzmI6_EcoUNCJntf5I

 render('header', array('title' => 'BART index'));  
        ?>


      <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDUE08r9kD1p5QsqOzmI6_EcoUNCJntf5I&sensor=false"></script>
      <script type="text/javascript">

       function initialize() { //start the map. code from google maps tutorial.
        var mapOptions = {
          center: new google.maps.LatLng(37.7750, -122.4183),
          zoom: 11,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
      }
      </script>

         <script type="text/javascript">

         $(document).ready(function() {
       $("#submit").click(function() {

            console.log($("#route").val());
            $.ajax ({
                type: "GET",
                responseType: "json",
                url: "stations.php",
                data: {
                    route: $("#route").val()
                },
                success: function(data) {
                    console.log(data);
                    var i = 1;
                    var routePathCoords = [];
                    var pathColor = data.color; 
                    console.log(data.stations);
                    $.each(data.stations, function() {
                        routePathCoords.push(new google.maps.LatLng(data.lat[i], data.longit[i]));
                        i++;
                    });

                    function initialize() { //start the map. code from google maps tutorial.
                            var mapOptions = {
                              center: new google.maps.LatLng(37.7750, -122.4183),
                              zoom: 11,
                              mapTypeId: google.maps.MapTypeId.ROADMAP
                            };

                            var map = new google.maps.Map(document.getElementById("map_canvas"),
                                mapOptions);
                          }

            },
            error:function (xhr, ajaxOptions, thrownError){
                    console.log(ajaxOptions);
                    alert(xhr.status);
                    alert(thrownError);
                }    
        });
        return false;
    });
    });

     </script>

    <? 
    render('header2'); 
    ?>

      <form id="form" class="form-inline">

    <input type="hidden"><select type="text" name="route" id="route">
        <option name="route">Pittsburg/Bay Point - SFIA/Millbrae</option>
        <option name="route">Fremont - Richmond</option>
        <option name="route">Fremont - Daly City</option>
        <option name="route">Richmond - Daly City/Millbrae</option>
        <option name="route">Dublin/Pleasanton - Daly City</option>
    </select>

    <input type="submit" value="Route" class="btn" id="submit">

      </form>



      <div id="map_canvas" style="width:500px; height:500px"></div>

   <? 
    render('footer'); 
   ?>

PHP

 <?
    require_once("../includes/helpers.php");
    session_start();

    $dbh = connect_db('mysql:host=localhost;dbname=project2', '*****', '*****');

    //defining class Route
    class Route {
        public $stations = array();
        public $color;
        public $lat = array();
        public $longit = array();
    }

    header("Content-type: application/json");

    $route = htmlspecialchars($_GET['route']); //getting desired route

    //find route within database
    $query = $dbh->query("SELECT color, lat, longit, station FROM stations WHERE route='$route'");

    var_dump($query);

    if ($query->rowCount() > 0) { //does query exist?
        $route = new Route();

        foreach ($query as $row) { //getting all variable names

            $route->color = $row['color']; //then setting them to object variables

            foreach ($query as $value) {

                array_push($route->stations, $value['station']); //adding on for each station to the array
                array_push($route->lat, $value['lat']); //adding latitude
                array_push($route->longit, $value['longit']); //and longitude
            }


            break;
        }
    }

    json_encode($route);

 ?>

I apologize in advance for the bad spacing. Thanks for your help

Upvotes: 3