0

I am trying to fill a dropdown list from a mysql database by using ajax and jquery. The data is should be in json format. But I keep getting syntax error: JSON.parse: unexpected character. Please advise. Thank you for your help.

This is my code in Dreamweaver

 $(document).ready(function(){

$.getJSON("http://localhost:8000/states.php", function(data) {

    $.each(jsondata, function(index, item) {

        $('<option></option>').val(item.state_code).html(item.state).appendTo("select#personalstate");
        }); 
    }); 
});

Database code:

database.php

<?php
$dsn = 'mysql:host=localhost;dbname=elihu';
$username = 'admin';
$password = 'password';
$options = array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION);
try {
    $db = new PDO($dsn, $username, $password, $options);
} catch (PDOException $e) {
    $error_message = $e->getMessage();
    include ('index.php');
    exit();
}
?>

json php file

<?php

require('database.php');

function getStates() {
    global $db;
    $query = 'SELECT * FROM states';

    try {
        $statement = $db->prepare($query);
        $statement->execute();
        $states = $statement->fetchAll(PDO::FETCH_ASSOC);
        $statement->closeCursor();   
        echo json_encode($states);

    } catch (PDOException $e) {
        $error_message = $e->getMessage();
        include ('index.php');
        exit();
    }
}
?>
  • 4
    Could you show the raw JSON from the response? – Fenton Mar 13 '14 at 01:54
  • Side node: you don't need to `prepare()/execute()` a simple query with no input params. You can just call `$result = $db->query('SELECT * FROM states'); $states = $result-fetchAll();` – Michael Berkowski Mar 13 '14 at 01:56
  • To help you with SteveFenton's comment, you can either `alert(data);` or open the developer console in Chrome and look at the `Network` tab to see what the response from the server was. – teynon Mar 13 '14 at 02:01
  • @Tom `console.log(data)` is a **much** better way to debug than an alert, I bet you love getting an alert saying `[object Object]`........ – scrowler Mar 13 '14 at 02:24
  • @scrowler True, I didn't didn't notice the getJSON which I also just realized is the problem with their code. getJSON automatically decodes JSON data. So the extra parseJSON is not necessary and a good reason why they would get a parse error. – teynon Mar 13 '14 at 02:33

1 Answers1

0
$.getJSON("Model/php/states.php", function(data) {
    // No need to parse the json data, it's already been parsed by getJSON
    // jsondata = $.parseJSON(data);
teynon
  • 7,540
  • 10
  • 63
  • 106
  • Even when I removed $.parseJSON(data);, I still get the same error. Any suggestions? Thank you. – user3413326 Mar 13 '14 at 14:19
  • @user3413326 As SteveFenton has stated, you need to post the raw JSON string that is being returned. – teynon Mar 13 '14 at 15:28
  • How would I do this? I have very little experience with json and php. Thank you. – user3413326 Mar 13 '14 at 15:37
  • In Chrome, push `F12` then click the `Network` tab. Fire the json request and watch for the request in the Network tab. Once you see the request, click on it and view the `Response` tab. – teynon Mar 13 '14 at 16:51
  • There were no response from the server because no connection was made. I got the following error: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. I amended the javascript code (see above). But I got the following error after that: net::ERR_CONNECTION_REFUSED. Please advise. Thank you. – user3413326 Mar 14 '14 at 01:38
  • @user3413326 See the answer to this question: http://stackoverflow.com/a/20035319/697477 – teynon Mar 14 '14 at 04:03