Question

I am building a website that uses jQuery/AJAX to send data to a php page, and from there insert it into a database. For some reason, the code isn’t inserted and I get no response at all.

my javascript:

    function insert_data(){
    var title = debate_title.value;
    var subtitle = debate_sub.value;
    var sides = debate_sides.value;

    $(function() {
        $.ajaxSetup({
            error: function(jqXHR, exception) {
                if (jqXHR.status === 0) {
                    window.location.replace('errors/noConnection.html');
                } else if (jqXHR.status == 404) {
                    window.location.replace('errors/noConnection.html');
                } else if (jqXHR.status == 500) {
                    window.location.replace('errors/noConnection.html');
                } else if (exception === 'parsererror') {
                    window.location.replace('errors/noConnection.html');
                } else if (exception === 'timeout') {
                    window.location.replace('errors/noConnection.html');
                } else if (exception === 'abort') {
                    window.location.replace('errors/noConnection.html');
                } else {
                    window.location.replace('errors/noConnection.html');
                }
            }
        });
    });

    $.ajax({
        type: "POST",
        url: "post_debate.php",
        data: { post_title: title, post_sub: subtitle, post_sides: sidesm, ajax: 1 },
        dataType: "json",
        timeout: 5000, // in milliseconds
        success: function(data) {
            if(data!==null){
                window.location.replace('show_debate.php?id=' + data);
            }else{
                window.location.replace('errors/noConnection.html');
            }
        }
    });
}

My PHP code (post_debate.php):

    <?php

    require('connect.php');

    $title = $_POST['post_title'];

    $subtitle = $_POST['post_sub'];

    $sides = $_POST['post_sides'];

    $ajax = $_POST['ajax'];

    $date = new DateTime();
    $timeStamp = $date->getTimeStamp();

    if($ajax==1){
        $query = mysql_query("INSERT INTO debates VALUES('','$title','$subtitle','$sides','0','0','$timeStamp')");
        $get_data = mysql_query("SELECT id FROM debates WHERE title='$title', subtitle='$subtitle', sides='$sides', timestamp='$timeStamp'");
        while($id=mysql_fetch_array($get_data)){
            $final_id = $id['id'];
        }
        exit($final_id);
    }else{
        die("404 SERVER ERROR");
    }

?>

Thanks!

---

EDIT – NOT SOLVED YET

My new PHP code:

<?php
header("content-type: application/json");

require('connect.php');

$title = $_POST['post_title'];

$subtitle = $_POST['post_sub'];

$sides = $_POST['post_sides'];

$ajax = $_POST['ajax'];

$date = new DateTime();
$timeStamp = $date->getTimeStamp();

if($ajax==1){
    $query = mysql_query("INSERT INTO debates VALUES('','$title','$subtitle','$sides','0','0','$timeStamp')");
    $get_data = mysql_query("SELECT id FROM debates WHERE title='$title', subtitle='$subtitle', sides='$sides', timestamp='$timeStamp'");
    while($id=mysql_fetch_array($get_data)){
        $final_id = $id['id'];
    }
    print (json_encode(array("Id"=>$final_id)));
}else{
    die("404 SERVER ERROR");
}

?>

my new Javascript .ajax:

    $.ajax({
    type: "POST",
    url: "post_debate.php",
    data: { post_title: title, post_sub: subtitle, post_sides: sides, ajax: 1 },
    dataType: "json",
    timeout: 5000, // in milliseconds
    success: function(data) {
        if(data!==null){
            window.location.replace('show_debate.php?id=' + data['Id']);
        }else{
            window.location.replace('errors/noConnection.html');
        }
    }
});

Answer 1

Your code is expecting JSON as a response…

dataType: "json",

(Documentation Here)

But you’re returning a non-json value without an appropriate content-type header.

Try changing your PHP script from

   exit($final_id);

to (untested)

header("content-type: application/json");
print (json_encode(array(
        "Id"=>$final_id
    )));

Also, put a breakpoint on your success callback in your Javascript code (using Firebug or a similar tool) and examine what data contains. It should now be an associative array so you can do

window.location.replace('show_debate.php?id=' + data['Id']);

Improvement:

Instead of doing a SELECT to get the recently inserted Id, use mysql_insert_id(). Something like this…

$query = mysql_query("INSERT INTO debates VALUES('','$title','$subtitle','$sides','0','0','$timeStamp')");
$final_id = mysql_insert_id();
print (json_encode(array("Id"=>$final_id)));

Also, an alternate way to test what your PHP is returning if you can’t see the response in your development tool is to browse to the page directly (You’d have to change all your $_POST to $_REQUEST)