JSON, jquery, and ajax parsing issue

Question

Here's my java script file:

$('#addSchoolForm').trigger("reset");

//$(document).ready(function()  {
$(function() {
    $("#dialog").dialog({
        autoOpen: false,
        maxWidth:600,
        maxHeight: 350,
        width: 500,
        height: 300,
    });

    $("#addSchool").on("click", function() {
        $("#dialog").dialog("open");
    });

    $("#addSchoolForm").submit(function(e) { 
        e.preventDefault();
        $("#dialog").dialog("close")
        var postData = jQuery(this).serialize();
        $.ajax({
            type: "POST",
            url: "AddSchools.php",
            data: postData,
            success: function(data){
                alert(data); }
        });   
    });

    $("#editSchool").submit(function(e) { 
        e.preventDefault();
        var editData = jQuery(this).serialize();
        $.ajax({
            type: "POST",
            url: "GetSchoolID.php",
            data: editData,
            dataType: 'json',
            success: function(data){


                var schoolID = $.parseJSON(data);
                alert("success");
                alert(schoolID.name);

                //alert(data["json"]);
                //alert(data); 

                //document.addSchoolForm[sname].value = data[0].name;
                //document.addSchoolForm[abbrev].value = data[abbrev];
                //document.addSchoolForm[abbrev].value = data[0].abbrev;
            }

            alert(schoolID.name); 
        });
        //$("#dialog").dialog("open");
    });
})

And here's my get schoolID php file

<?php
$school_id = $_POST['school_id'];


$db = mysqli_connect("localhost", "root", "imagroup123","mytrack");

if(!$db){
    exit("Error in database connection");
    echo("couldn't connect to database");
}
else{
    $q = "SELECT * FROM `School` WHERE `SchoolID`='$school_id'";
    $schoolresults = mysqli_query($db,$q);

    $row = mysqli_fetch_assoc($schoolresults);
    $school["name"] = $row['SchoolLong'];
    $school["abbrev"] = $row['SchoolShort'];

    echo json_encode($school);

    }


?>

When I just tested the php file with jsonlint.com I get a correct json object but it's not getting carried through the javascript file. I'm fairly new to this so I'm pretty suck with this problem. I also want to add the data to a form values and then open the dialog form after.

Which of the two Ajax requests are you asking about? And do the alert()s in your Ajax success handlers show anything? Do you get any errors in the browser's console? — nnnnnn
– nnnnnn, Commented Nov 9, 2013 at 0:31
Since you specified dataType: 'json', you shouldn't call $.parseJSON() -- jQuery does that automatically for you. — Barmar
– Barmar, Commented Nov 9, 2013 at 0:31

Barmar · Accepted Answer · 2013-11-09 00:33:42Z

1

Change:

        success: function(data){
            var schoolID = $.parseJSON(data);

to:

        success: function(schoolID){

because $.ajax automatically calls $.parseJSON() when you specify dataType: 'json'.

answered Nov 9, 2013 at 0:33

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

TimSPQR · Accepted Answer · 2013-11-09 00:34:04Z

0

Here is the php backend structure that I use all the time:

$query = " SELECT * 
           FROM school 
           WHERE SchoolID = $school_id;
$result = mysqli_query($cxn, $query) or die ("could not query database 1");

if (mysqli_num_rows($result) > 0)
{
    $row = mysqli_fetch_array($result);
    $variablestopass = array
    (
           'schoolname' => $row['SchoolLong'],
         'schoolabbrev' => $row['SchoolShort'],
     );
  echo json_encode($variablestopass);}
else
  { echo "Error selection id"; }

And here is some js to call it and read it:

$.ajax({
        type: 'POST',
         url: 'thenameofyourfile.php';
        data: {schoolid: schoolid},
        dataType: 'json'
        })
         .done( function() { alert( "Got it!"" );
                             Do other stuff here
                            })
         .fail(function(jqXHR, textStatus, errorThrown){
          console.log(jqXHR.responseText, textStatus, errorThrown);
    });

answered Nov 9, 2013 at 0:34

TimSPQR

3,0043 gold badges22 silver badges29 bronze badges

3 Comments

user2970834 Over a year ago

I got rid of the parse json call but when I try to output the school name the alert box is empty. I'm doing this by: alert(data.schoolname). Is this wrong?

TimSPQR Over a year ago

I made the ".done" callback above very simple as an example (just an alert). To actually call back the "data" you need to put the name you want for the data into the function(). .done( function(data){ alert(data.varname); ...other commands... });. I'll do a complete one, and give you a link in a few minutes.

TimSPQR Over a year ago

Here is a page that I just made with a snippet of code from one of my projects. It explains each line. sites.google.com/site/timspqr/home/programs/javascript-code/…

Collectives™ on Stack Overflow

JSON, jquery, and ajax parsing issue

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related