Update MySQL using AJAX and PHP

Question

I'll go slow, not for your sake..for mine. I'm real new at trying to to do this. What I'm trying to do is update live a MySQL DB from an HTML table. This is how each is built.

 echo ("<td id=\"callsign:$row[recordID]\" contenteditable=\"true\" 
                onClick=\"showEdit(this)\"
                onBlur=\"saveToDatabase(this,'callsign',$row[recordID])\" 
                style='text-transform:uppercase'>
                $row[callsign]</td>");

This is how it renders.

 <td id="callsign:6" contenteditable="true" onclick="showEdit(this)" onblur="saveToDatabase(this,'callsign',6)" style="text-transform: uppercase; background-color: rgb(253, 253, 253); background-position: initial initial; background-repeat: initial initial;">
                KA0SXY</td>

Here is the function that gets called.

 function saveToDatabase(editableObj,column,id) {

        $(editableObj).css("background","#FFF url(loaderIcon.gif) no-repeat right");
            $.ajax({
                url: "saveedit.php",
                type: "POST",
                data:'column='+column+'&editval='+editableObj.innerHTML+'&id='+id,
                success: function(data){
                    $(editableObj).css("background","#FDFDFD");
                }  
            });
      }

And here is the PHP.

 <?php
require_once "dbConnectDtls.php";

    $result = mysql_query("UPDATE NetLog set " . $_POST["column"] . " = '".$_POST["editval"]."' WHERE  recordID=".$_POST["id"]);
    echo $result;

 ?>

When I tab from this cell to the next the only thing that gets executed is the .gif. The MySQL does not get updated, what am I doing wrong?

Thanks in advance for not treating me like a dummy, but helping me learn.

Followup to suggestions:

I'm afraid I'm making no headway on this. Is anyone willing to actually write a working example that I can follow?

try logging data in the success function to see what is returned by saveedit.php. In the developer tools of your browser, what is the return code of the ajax request (ie, 200 or 500)? Does saveedit.php work properly if you hit it directly (ie, by posting a form to it)? Does the background change to #FDFDFD when you run saveToDatabase or does it stay the same? — chiliNUT
– chiliNUT, Commented Jun 1, 2015 at 0:41
How do I do that..log data in the success function? Take a look here kcmecc.org/graphics/RaspPi maybe you can see what my issue is. — Keith D Kaiser
– Keith D Kaiser, Commented Jun 1, 2015 at 0:56

lalengua · Accepted Answer · 2015-06-01 00:58:49Z

1

For a newcomer there are many things you should take care in your script:

First you have to avoid the insertion of $_POST values directly into a query as it may lead to sql injection problems.
You should use PDO or MySQLi to perform the query for the same paranoidal reasons.
You should be consistent. Why use .innerhtml when you are using JQuery? You could use $(editableObj).html()
You don't show any javascript errors: Are you viewing the console? Try right clicking in the body of the page and selecting "inspect element" Then click on the "console" tab of the frame that appears.
Also you are not printing the "data" variable that gets returned to see if is the expected result in server. You could do it with:

console.log(data);

Other than that everything looks good in your script ;)

answered Jun 1, 2015 at 0:58

lalengua

5294 silver badges16 bronze badges

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

2 Comments

Keith D Kaiser Over a year ago

I didn't even realize I was mixing my metaphors (#3 & #2) above. I usually do use PDO but guess I thought AJAX took care of things. I'm learning. Yes, I've dumped the data using the console.log(data) its not connecting to the MySQL server. Not sure why because I use the same code in a number of other places. I'm looking for a reason now.

lalengua Over a year ago

You should remember that the name AJAX comes from Asynchronous. That means that the call you are doing to PHP doesn't stop the rest of your script to finish but the ajax part keeps waiting until it gets an answer from the server or a timeout so it does not concern anything with what the server gets. It gets what you throw to it. Also the sql injection could be made directly to the server and not thru your ajax script. You should console.log(data); for both data variables you have. They are called the same but the first is the query and the second the response.

Collectives™ on Stack Overflow

Update MySQL using AJAX and PHP

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related