GrumpyCrouton GrumpyCrouton -4 years ago 120
Ajax Question

aJax update a specific row in sqlite and php using a button

I've got a table that lists values inputted by a user, with 2 buttons on the side to remove or to mark completed. On the page the table is visable, there are 3 tabs, we will call these Tab1, Tab2, and Tab3

Each tab has a table (As described above) with information about a specific type of entry.

These buttons are simple

<a href>
links, so when clicked they reload the page. This is a problem because the users view is refreshed and it takes the tabs back to the default tab, and is also an inconvenience when trying to mark several entries.

I would like to make these buttons send Ajax requests to another page to process the data. The only problem is, I am not really sure how to make the ajax call.

This is what I have right now

My buttons

echo "<td class='td-actions'>";
echo " <a href='?complete=".$row['uniqueID']."' class='btn btn-success btn-small'>
<i class='btn-fa fa-only fa fa-check'> </i>
<a href='?remove=".$row['uniqueID']."' class='btn btn-danger btn-small'>
<i class='btn-fa fa-only fa fa-remove'> </i>
echo "</td>";

There is one called Complete, and one called Remove.

When either of these are pressed, it currently reloads the page which triggers a few php if statements.

if(isSet($_GET['remove'])) {
$sql = "DELETE from rl_logged where uniqueID='".$_GET['remove']."';";
$ret = $db->exec($sql);
echo "<meta http-equiv='refresh' content='0;index.php' />";

if(isSet($_GET['complete'])) {
$sql = "UPDATE rl_logged set complete=1 where uniqueID='".$_GET['complete']."';";
$ret = $db->exec($sql);
echo "<meta http-equiv='refresh' content='0;index.php' />";

These are relatively simple functions. My problem is that I do not know javascript very well.

Any help would be much appreciated.

the javascript that I have come up with is this

$(document).ready(function() {
$('#markComplete').click(function() {
var input = input = $(this).text()
$.ajax({ // create an AJAX call...
data: {
onionID: input,
type: 'POST', // GET or POST from the form
url: 'pages/ajax/markCompleteRL.php', // the file to call from the form
success: function(response) { // on success..

using this button

<div name='markComplete' id='markComplete' class='btn btn-success btn-small'>
<i class='btn-fa fa-only fa fa-check'></i>".$row['uniqueID']."

But, while inspecting with firebug, this seemed to work ONCE, but now the button doesn't do anything.

enter image description here

I tried again this morning, the button presses and the first time it sends this post, then the button doesn't do it again - even on page reload.

Answer Source

I was able to get it to work with the following:


$('#markComplete').submit( function( event ) {
            $.ajax({ // create an AJAX call...
                data: $('#markComplete').serialize(), // serialize the form
                type: "POST", // GET or POST from the form
                url: "pages/ajax/repairlogMarks.php", // the file to call from the form
                success: function(response) { // on success..
            return false;


                                 <form id="markComplete">

                                        <input type="text" style="display:none;" class="form-control" name="uniqueid" value='<?=$row['uniqueID'];?>'>
                                        <input type="text" style="display:none;" class="form-control" name="markcomp" value='1'>
                                        <button type="submit" class="btn btn-success">
                                            <i class="btn-fa fa-only fa fa-check"></i>


Basically, I made the button into a form which I knew how to create an ajax request for.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download