.ajax() isn't posting to php database query

Question

This has been an ongoing issue for me. You all have already helped so much. However, I am stuck again. I cannot get my .ajax() to run. For some reason the .click() won't even work without if(field != text) above my .ajax() call, but I digress.

My question is: Why is my ajax() not functioning properly and if this gets fixed will the table is have displayed update after the query is sent to the database without a page refresh?

Here is my script:

<script type="text/javascript">
    $(document).ready(function()
    {
        $(".edit_td").click(function()
        {
            $(this).children(".text").hide();
            $(this).children(".editbox").show();

        }).children('.editbox').change(function()
            {
                var id=$(this).closest('tr').attr('id');
                var field=$(this).data('field');
                var text=$(this).val();

                var dataString = 'id= '+ id +'&field= '+ field +'&text= '+ text;
                alert("made variables");

                if(field != text)
                {
                    alert("in if");
                    $.ajax({
                    type: "POST",
                    url: "table_edit_ajax.php",
                    data: dataString,
                    cache: false,
                    success: function(html)
                    {
                        $("#first_"+ID).html(first);
                        $("#last_"+ID).html(last);
                    }
                    });
                }
                else
                {
                    alert('Enter something.');
                }
            });

        // Edit input box click action
        $(".editbox").mouseup(function() 
        {
            return false
        });

        // Outside click action
        $(document).mouseup(function()
        {
            $(".editbox").hide();
            $(".text").show();
        });

    });
    </script>

Here is my table_edit_ajax.php

<?php
   //connect to DB
   $con = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME);

   echo 'in table_edit';

   $id = mysqli_escape_String($_POST['id']);
   $table = "owners";
   $field = mysqli_escape_String($_POST['field']);
   $text = mysqli_escape_String($_POST['text']);
   $query = "UPDATE ".$table." SET ".$field."='".$text."' WHERE ".$table."_id = '".$id."'";
   mysqli_query($query);

   //close connection
   mysqli_close($con);

?>

Answer 1

The first argument to all mysqli functions is the connection, statement, or result object.

$id = mysqli_escape_String($con, $_POST['id']);
$table = "owners";
$field = $_POST['field'];
$text = mysqli_escape_String($con, $_POST['text']);
$query = "UPDATE ".$table." SET ".$field."='".$text."' WHERE ".$table."_id = '".$id."'";
mysqli_query($con, $query);

$field shouldn't be escaped, since it's not a string value. Therefore, you need to validate it carefully, to prevent SQL injection. Perhaps instead of allowing the client to submit the field name to update, have them submit an integer, which you look up in an array to convert to a field name.

In your AJAX call, you may have a problem due to not encoding your parameters properly. Change the dataString assignment to:

var dataString = { id: id, field: field, text: text };

Then jQuery will encode it for you.

Answer 2

you are sending a data string

 var dataString = 'id= '+ id +'&field= '+ field +'&text= '+ text;

and retrieving it through $_POST.

first check what is in $_POST and use $_GET instead of $_POST

and change post in ajax to get

and what is first and last in success callback??