skip to Main Content

For Future Readers, this was my first question and the answer has been found (read comments and replies below):

First of all, i’ve searched in Stackoverflow and i didn’t found an answer for a similar problem.

i would like to link a html Button (among many buttons) with a JQuery function. The function shall execute AJAX method like so :

HTML Code in a separated file index.php:

<button id="submitbtn" type="button" class="btn btn-success">UPDATE</button>

JQuery Function :

    $('#submitbtn').on('click', function(){
        var id = $(this).data('id');

        $.ajax({
            url: 'includes/updatequery.php',
            type: 'POST',
            data: {id:id},
            success: function(data){
                if (data) {
                console.log("updated");
                } else {
                    $('#error').load("custom/static/error.html");
                }
            },
            error: function(jqXHR, textStatus, errorThrown){
                $('#error').html("oops" + errorThrown);
            }
        });
    });    

Here is the PHP file that should be called by AJAX Method :

<?php
include("src/db.php");
$query = "UPDATE mytable SET job='completed' WHERE id=id";
mysqli_query($conn, $query);
  
?>

The problem is that i CANNOT link the ID of the clicked button (because there are many buttons) to the ID of the Database Entry in order to update the Data in the Database according to this specific button.


Now i would like to have the results updated LIVE after updating the Database.

This is the PHP code that output menu items (items stored in the same Database table as before) and in front of every menu item, a badge should be displayed (with a value within it : "completed" or "not completed") :

<?php 
            foreach($data as $d) {
              $id = $d['id'];
              $mystatus = $d['status'];
            ?>
              <li class="nav-item">
                <a class="nav-link clickable blueMenuItem" id="nav-location" data-id="<?php echo $d['id']; ?>">
                  <i class="nav-icon fas <?php echo $d['icon']; ?>"></i>
                  <p><?php
                    echo $d["title"];
                    if ($d['type'] == "job") { ?>
                      <span id="updatedicon" class="right badge <?php if($mystatus == "completed"){echo "badge-success";} else {echo "badge-danger";}?>"><?php setJob($con, $id)?></span><?php
                    } ?>
                  </p>
                </a>
              </li><?php
            }
          ?>

Here is the PHP file where the setJob method is defined :

<?php

function setJob($con, $idd) {

$sql = "SELECT status FROM mytable WHERE id=$id";
$result = mysqli_query($con, $sql); 
while ($row = mysqli_fetch_assoc($result)) { 
    foreach ($row as $row => $value) { 
        echo $value; 
   }
}
} 
?>

Any suggestions?

Thanks

2

Answers


  1. Use the data-id attribute to add the id:

    <button id="submitbtn" data-id="<id>" type="button" class="btn btn-success">UPDATE</button>
    

    https://www.w3schools.com/tags/att_global_data.asp

    By default, jQuery ajax uses a Content-Type of application/x-www-form-urlencoded; charset=UTF-8. This means in PHP the POST values can be accessed using $_POST. If using a Content-Type of application/json, you will need to do this.

    include("src/db.php");
    
    $id = $_POST['id']; // make sure to sanitize this value
    
    $query = "UPDATE mytable SET job='completed' WHERE id=$id";
    
    mysqli_query($conn, $query);
    

    The above example only demonstrates how to reference the id value from the POST. However, this is not secure as-is. Make sure to sanitize the value as well as protect yourself from SQL Injection using prepared statements. Prepared Statements allow you to bind variables to SQL queries which are sent separately to the database server and can not interfere with the query itself.

    Login or Signup to reply.
  2. Updated HTML – added data-id="" to button and replace with id

    <button id="submitbtn" data-id="<id>" type="button" class="btn btn-success">UPDATE</button>
    

    Updated jQuery – use attr to get the id of row/record by using data-id attribute

      $('#submitbtn').on('click', function(){
        var id = $(this).attr('data-id');
    
        $.ajax({
            url: 'includes/updatequery.php',
            type: 'POST',
            data: {id:id},
            success: function(data){
                if (data) {
                console.log("updated");
                } else {
                    $('#error').load("custom/static/error.html");
                }
            },
            error: function(jqXHR, textStatus, errorThrown){
                $('#error').html("oops" + errorThrown);
            }
        });
    });    
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search