根据Div点击更新数据库

时间:2016-12-03 17:17:24

标签: javascript php ajax

所以基本上这个小盒子部分显示最近的上传和一些红色的待处理状态和绿色的上传状态。现在,当我点击第一个红色框时,它会将所有红色刻度更新为绿色,以便完成。

如何点击一个红色框,它只会将表格行更新为绿色?

每次上传都会在数据库中自动生成一个ID。

以下是方框图片:https://i.gyazo.com/af895f24a2f002df588ca1863f7216fa.png

我必须手动将表状态编辑为绿色以便更改它,或者我单击1并更新全部。我希望它只能在照片中显示的特定点击。

以下是另一个示例,但使用.gif进行更好的演示: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');
      }

4 个答案:

答案 0 :(得分:1)

您可以通过AJAX,发送ID或识别DIV的任何地方来实现,代码将是这样的:

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

并在您的服务器端

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

要更改颜色,请查看https://jsfiddle.net/k0ye49oh/

答案 1 :(得分:0)

你应该使用AJAX(尽管它也适用于来回重定向......)。 做这样的事情:

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

要使其仅更新特定行,您必须传递该行的ID。您的更新查询只会将表中的所有行更新为"绿色"。您可以将ID作为参数传递,如果您通过以下方式发布,则使用$id = $_POST["id"]在PHP中读取它:

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

您可以在PHP中阅读和更新,如:

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

另一句话:考虑为此使用预准备语句。像这样的SQL查询不是好的风格。你宁愿想要这样的东西:

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

您还可以在ajax查询的基础上构建更改行颜色而不重新加载,执行以下操作:

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

但是,看到你只有一个按钮(#updateStatus)来更新所有行,我认为你的方法存在一些问题。如果每行都有按钮,则ID会有冲突。

要获得rowno和正确的按钮引用,您可以像这样定义按钮:

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

构建表时,必须将行号放在1的位置。 然后你可以像这样做javascript部分:

$(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');
            }
        });       
  });
});

经过测试并使用HTML

<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>

答案 2 :(得分:0)

您需要将SQL查询更新为以下内容。当前查询会将状态的每一行设置为&#39;绿色&#39;在上传表格中。

JTextArea

需要从你的javascript函数调用发送somevalue,比如

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

并在php页面上将var用作$ _GET [&#39; var&#39;]。

答案 3 :(得分:0)

好吧,经过一番思考后我才明白这一点。

我考虑过更改html以使div标记为:Hello1Hello2。这是一些HTML:

<html>
  <div id = "Hello1">

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

  </div>
</html>

您可以为每个可点击的框添加内容。

  

我建议使用Jose Rojas的Javascript。

这是一些PHP来相应地更新它们。

以我的示例为例,您只需使用$_GET全局值而不是$_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');
    }
  }
?>

如果您有任何问题,请随时发表评论,我会回复。