CODEWITHSUNDEEP
javascriptphpajax
Osu Community
Osu Community

Reputation: 47

Update DB based on Div clicked

So basically this little box section displays like recent uploads and a little status that is red for pending and green for uploaded. Right now I made it so when I click on the first red box it will update all the red ticks to green for completed.

How can I make it so that when I click on a single red box, it will only update that tables row to green?

Each upload has an id automatically generated in the Database.

Here is a picture of the box: https://i.gyazo.com/af895f24a2f002df588ca1863f7216fa.png

I have to manually edit the table status to green in order for it to change or I click on 1 and it updates all. I want it to only be on the specific one clicked like displayed in the photo.

Here is another example of it but using a .gif for better demonstration: https://i.gyazo.com/3e974f1a536ba37e71fcb60fc7f19c54.gif

Javascript:

$("#updateStatus").click(function(){
         window.location.href = 'connections/updateStatus.php';
       });

PHP:

public function redtoGreen(){
            $query2 = "UPDATE uploads SET status = 'green'";
            $this->conn->query($query2);
            header('Location: '.'../index.php');
      }

Upvotes: 0

Views: 196

Answers (4)

Lupinity Labs
Lupinity Labs

Reputation: 2474

You should use AJAX for that (although it works with redirecting back and forth too...). Do something like this instead:

$("#updateStatus").click(function(){
  $.ajax({
    url: "connections/updateStatus.php"
  });
});

For it to update only a specific row, you have to pass on the ID of the row. Your update query will just update all rows in the table to "green". You can pass the ID on as a parameter and read it in PHP with $id = $_POST["id"] if you posted it by:

$.ajax({url: "connections/updateStatus.php", method: "POST", data: { id: 4 }});

You can read and update it in PHP like:

public function redtoGreen(){
            $id = intval($_POST["id"]);
            $query2 = "UPDATE uploads SET status = 'green' WHERE id = $id";
            $this->conn->query($query2);
}

Another remark: consider using prepared statements for this. SQL queries like this are not good style. You'd rather want something like:

public function redtoGreen(){
            $id = $_POST["id"];
            $stmt = $db->prepare ("UPDATE uploads SET status = 'green' WHERE id = ?");
            $stmt->execute($id);
}

You can also build on the ajax query to change the row color without reloading, doing something like:

$.ajax({ 
    url: "connections/updateStatus.php", 
    method: "POST", 
    data: { id: rowno },
    success: function (result) {
      $("#myrow-" + rowno).css('background-color', 'green');
    }
});

However, seeing that you only have one button (#updateStatus) to update ALL rows I think you have several issues with your approach here. If you have the buttons on each row, you have conflicting IDs.

To get both the rowno and the correct button references, you can define your buttons like this:

<button class="updateStatus" data-rowno="1"></button>

When building the table, you will have to put the row number where the 1 is. Then you can do the javascript part like this:

$(document).ready(function () {
  $(".updateStatus").click(function () {
      var el = $(this);
      var rowno = el.data("rowno");
        $.ajax({ 
            url: "connections/updateStatus.php", 
            method: "POST", 
            data: { id: rowno },
            success: function (result) {
              $(el).parent().css('background-color', 'green');
            }
        });       
  });
});

Tested and works with HTML like

<table>
    <tr><td style="background-color:red;">Blah <button class="updateStatus" data-rowno="1">Update</button></td></tr>
    <tr><td style="background-color:red;">Blah <button class="updateStatus" data-rowno="2">Update</button></td></tr>
    <tr><td style="background-color:red;">Blah <button class="updateStatus" data-rowno="3">Update</button></td></tr>
    <tr><td style="background-color:red;">Blah <button class="updateStatus" data-rowno="4">Update</button></td></tr>
    <tr><td style="background-color:red;">Blah <button class="updateStatus" data-rowno="5">Update</button></td></tr>
</table>

Upvotes: 0

Teddy Codes
Teddy Codes

Reputation: 489

Alright, so after some thinking I figured this out.

I thought about changing the html to have divs labeled like this: Hello1 and Hello2. Here is some HTML:

<html>
  <div id = "Hello1">

  </div>
  <div id = "Hello2">

  </div>
</html>

You would put the content for each clickable box that you have.

I recommend using Jose Rojas's Javascript.

Here is some PHP to update them accordingly.

With my example, you would just using the $_GET global value instead of a $_POST

<?php
  $div = $_GET['div'];
  redToGreen($div);
  function redToGreen($div) {
    $query = "UPDATE uploads SET status = 'green' WHERE div = '{$div}'";
    try {
      $stmt = $this->conn->prepare($query);
      $stmt->execute();
      header('Location: ../index.php');
    } catch (PDOException $e) {
      header('Location: ../pages-500.html');
    }
  }
?>

If you have any questions, feel free to comment, and I will respond.

Upvotes: 0

Jose Rojas
Jose Rojas

Reputation: 3530

You can achieve through AJAX, sending the ID or wherever you identify your DIV, the code will be something like this:

$("#updateStatus").click(function(){
 var id = $(this).attr('id');
 $.ajax({
    method: 'GET',
    url: "connections/updateStatus.php?id="+id
  });
});

and at your server side 

public function redtoGreen(){
        $id = $_GET['id'];
        $query2 = "UPDATE uploads SET status = 'green'";
        $this->conn->query($query2);
        header('Location: '.'../index.php');
  }

to change of color, take a look https://jsfiddle.net/k0ye49oh/

Upvotes: 1

SubZero_566
SubZero_566

Reputation: 41

You need to update your SQL query to something like below. The current query will set every row for status to 'green' in the uploads table.

UPDATE uploads SET status = 'green' WHERE somecolumn = somevalue

That somevalue needs to be sent from your javascript function call, something like

updatestatus.php?var=somevalue

and use the var as $_GET['var'] on the php page.

Upvotes: 0

Related Questions