aJax使用按钮更新sqlite和php中的特定行

Question

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> 
                        <a href='?remove=".$row['uniqueID']."' class='btn btn-danger btn-small'>
                            <i class='btn-fa fa-only fa fa-remove'> </i>
                        </a>";
            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..
                                   refreshAllTabsWithFade();
                               }
                           });
                        });
                    });

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']."
                            </div> 

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

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 1

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

javascript:

$('.markComplete').submit( function( event ) {
            event.preventDefault();
            event.stopImmediatePropagation();
            $.ajax({ // create an AJAX call...
                data: $(this).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..
                    refreshAllTabs();
                }
            });
            return false;
        });

button:

                                 <form class="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>
                                        </button>

                                </form>

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

-- Update to make it work for multiple buttons that do the same function for different unique ID's.

Answer 2

Well for since you're sending the ajax call using "POST", it seems to me that if(isSet($_GET['complete'])) would evaluate to false. Also if your button is generated dynamically using php then change your click handler to the following:

$('document').on('click', '#markComplete', function (){
     // Your code here
 })

Answer 3

If you have more than one "Mark Complete" button; you need to use classes rather than ID to bind the event.

<button id="test">
  Test 1
</button>
<button id="test">
  Test 2
</button>
<script>
$('#test').click(function (e) {
  console.log('test', e.target);
});
</script>

In this example, only the first button works. jQuery will only return the first element when you specify an ID.

If you use classes to bind the event; both buttons will work:

<button class="test">
  Test 1
</button>
<button class="test">
  Test 2
</button>
<script>
$('.test').click(function (e) {
  console.log('test', e.target);
});
</script>

Answer 4

i think you have an error in your javascript at this line...

var input = input = $(this).text()

try to replace by this..

var input = $(this).text();