submitting a form in a dialog without postback with jquery/ajax/php

Question

Ok so I'm trying to submit address information without the page refreshing (or posting back). I keep getting an "unexpected end of input" and I'm not sure what I'm doing wrong here. This is all new to me so sorry if there are noob mistakes!

UPDATED Updated PHP, see below. Still getting unexpected end of input error with the following changes.

jQuery code:

        $( "#ChangeAddressDialog" ).dialog({
            width:500,
            modal:true,
            closeOnEscape:true,
            buttons: [ 
                { text: "Ok", type: "submit", click: function() { 
                        $.ajax({
                            url: "classes/add-address.php",
                            timeout: 30000,
                            type: "POST",
                            data: $("#main_form").serialize(),
                            dataType: 'json',
                            error: function(SMLHttpRequest, textStatus, errorThrown){
                                alert("An error has occurred making the request. " + errorThrown);
                            },
                            success: function(data){
                                //do stuff here on success such as modal info
                                //$("#main_form").submit();
                                alert('Address change information has been successfully submitted.');
                                $(this).dialog("close");
                            }
                        });
                    }
                },
                { text: "Close", click: function() { $(this).dialog( "close" ); } } ]
        });
    });

PHP code: UPDATED

<?php
require_once('../config.php');

$sqlCheck = ''; 
$parcel_id = isset($_POST['ParcelId']) ? $_POST['ParcelId'] : null;
$address1 = isset($_POST['Address1']) ? $_POST['Address1'] : null;
$address2 = isset($_POST['Address2']) ? $_POST['Address2'] : null;
$city = isset($_POST['City']) ? $_POST['City'] : null;
$state = isset($_POST['State']) ? $_POST['State'] : null;
$zip = isset($_POST['Zip']) ? $_POST['Zip'] : null;
$country = isset($_POST['Country']) ? $_POST['Country'] : null;

$db = new ezSQL_mysql(DB_USER, DB_PASSWORD, DB_NAME, DB_HOST);
$result = $db->query("INSERT INTO change_of_address (parcel_id, address_1, address_2, City, State, Zip, Country) VALUES ('" . $parcel_id . "','" . $address1 . "','" . $address2 . "','" . $city . "','" . $state . "','" . $zip . "','" . $country . "')");
if ($result == 1) {
    echo true;
} else {
    echo false;
}



?>

EDIT: For S.Pols

<script>
    $(document).ready(function() {
        $('#column-chooser').hide();
        $('#CommentsDialog').hide();
        $('#ChangeAddressDialog').hide();
        $('#HelpDialog').hide();
        $('#ExportDialog').hide();
        $("#SearchButton").click(function() { window.location.href = '/?s=' + $("#search").val(); });   
        $('#searchTable tr').click(function(){
            var parcel_id = $(this).attr('id');
            $('#ParcelId').val(parcel_id);
            $.ajax({
                url: "classes/get-apn.php?id=" + parcel_id,
                type: "GET",
                data: { parcel_id : parcel_id },
                dataType: 'json',
                error: function(SMLHttpRequest, textStatus, errorThrown){
                    alert("An error has occurred making the request: " + errorThrown);
                },
                success: function(data){
                    //do stuff here on success
                    $('#ParcelNumber').html(data[0]["apn"]);
                    //$('#ViewComments').html('Veiw ' + count + ' Comments');
                }
            });
        });

    });//end document ready function

    /*$('#dataTable').DataTable({
        "searching": false,
        "lengthChange": false,
        "scrollY": "300px",
        "scrollCollapse": true,
        "paging": false,
        "info": false
    });*/
    $( "#AddComment" )
        .button()
        .click(function( event ) {
        e.preventDefault();
    });
    $('#ShowColumnChooser').click(function() {
        //show/hide div
        $('#column-chooser').slideToggle('slow');
    });
    $('#Help').click(function() {
        //help dialog box
        $( "#HelpDialog" ).dialog({
            width: 500,
            modal:true,
            closeOnEscape:true,
            buttons: [ { text: "Close", click: function() { $(this).dialog( "close" ); } } ]
        });
    });
    $('#Export').click(function() {
        //export options dialog
        $( "#ExportDialog" ).dialog({
            width: 500,
            modal:true,
            closeOnEscape:true,
            buttons: [ { text: "Close", click: function() { $(this).dialog( "close" ); } } ]
        });
    });
    $('#ViewComments').click(function() {
        //view/add comments dialog
        $( "#CommentsDialog" ).dialog({
            height:300,
            width: 500,
            modal:true,
            closeOnEscape:true,
            buttons: [ { text: "Close", click: function() { $(this).dialog( "close" ); } } ]
        });
        $("#InsertComment").focus();
    });//end view comments click function

    $('#ChangeOfAddress').click(function() {
        //change of address dialog
        $('#change_of_address_form').val('1');
        $( "#ChangeAddressDialog" ).dialog({
            width:500,
            modal:true,
            closeOnEscape:true,
            buttons: [ 
                { text: "Ok", type: "submit", click: function() { 
                        $.ajax({
                            url: "classes/add-address.php",
                            type: "POST",
                            data: $("#main_form").serialize(),
                            dataType: 'json',
                            error: function(SMLHttpRequest, textStatus, errorThrown){
                                alert("An error has occurred making the request: " + errorThrown)
                            },
                            success: function(result){
                                //do stuff here on success such as modal info
                                $("#main_form").submit();
                                $(this).dialog("close");
                            }
                        })
                    } 
                },
                { text: "Close", click: function() { $(this).dialog( "close" ); } } ]
        });
    });
    $(function() {
        $('#datepicker1,#datepicker2,#datepicker3,#datepicker4').datepicker({
            showOn: 'both',
            buttonImage: 'images/calendar.png',
            buttonImageOnly: true,
            buttonText: 'Select Date'
        });
    });
</script>

Answer 1

You are not echoing content from your php script.

$result = $db->query( ... );

I'm not familiar with ezSQL_mysql but it should be returning an object or an array, you should then echo it, something like:

if ($result){
    echo 'true'; // or 1, or '{"success': 'ok'}
}else{
    echo 'false'; // or 0, or '"success': 'error'}
}

or

header('Content-Type: application/json');
echo json_encode($result);  // if $result is an associative array

Try calling the php script from your browser and play with the responses that better suit your needs. Given that you will be using the response in javascript, json responses are the best you can use. Be sure to tell php to output the response as json instead of text using header('Content-Type: application/json');

In the js side you can use console.log in both functions to see what the server is returning

success: function(data){
    console.log(data);
    // do your stuff here
}