2016-12-03 78 views
0

所以基本上这个小盒子部分显示最近上传和一些状态是红色的挂起和绿色上传。现在我做到了这一点,当我点击第一个红色框时,它会将所有红色勾号更新为绿色以完成。更新数据库基于Div点击

我该如何做到这一点,当我点击一个红色框时,它只会将表格行更新为绿色?

每次上传都会在数据库中自动生成一个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'); 
     } 
+0

使用一个ID每格。现在你引用所有这些,你想让我发表一个完整的例子吗? – McStuffins

+0

@McStuffins是的,我知道即时选择所有这些,但我无法弄清楚我将如何为每一个单独做。我的头脑中有这个概念,但是代码丢失了。我会很感激,如果你做 –

+0

你在后端使用了一些PHP框架吗? –

回答

0

您应该使用AJAX为(尽管它也适用于来回重定向...)。 做这样的事情,而不是:

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

对于它仅更新特定行,你必须通过在该行的ID。您的更新查询只会将表中的所有行更新为“绿色”。您可以通过ID作为参数,并阅读它在PHP与$id = $_POST["id"]如果你张贴者:

$.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> 
+0

我试图让它工作,使用你给的例子。 –

+0

您可能需要提供页面的HTML以使其更具体。每行的每个按钮应带有行的ID。你可以这样做:设置一个'.updateStatus'类而不是一个id updateStatus,然后用'$(“。updateStatus”)。click(...);'指定click处理程序。此外,按钮元素可以包含一个数据标签以携带行ID,然后可以在点击处理程序中将其读为$(this).data('id')'。我会将它添加到我的答案中,这里太冗长了;-) –

+0

谢谢。我无法让它工作,但最有可能的原因是我的方法很糟糕。我觉得你真的想要帮助。我通过php echo'ing html输出整个上传部分。我认为我做错了什么与它有关。 –

0

您需要您的SQL查询更新喜欢的东西下面。当前查询将在上传表中将状态的每一行设置为“绿色”。

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

这someValue中需要从你的JavaScript函数调用,送的东西一样

updatestatus.php?var=somevalue 

和使用var为$ _GET [ '变种'] PHP页面上。

+0

$( “#updateStatus”)点击(函数(){$ 阿贾克斯({ 网址: “连接/ updateStatus.php” });} 。 ); –

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/

0

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

我想过把html改成标有这样的div:Hello1Hello2。这里是一些HTML:

<html> 
    <div id = "Hello1"> 

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

    </div> 
</html> 

你会把每个可点击的框的内容,你有。

我推荐使用Jose Rojas的Javascript。

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

随着我的例子,你只需使用的$_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'); 
    } 
    } 
?> 

$_GET全球价值,而不是如果您有任何疑问,请随时发表评论,我会作出回应。

+0

基于查看您的代码,我的整个方法是不正确的。我使用PHP的完整代码对Lupinity进行了回复。 –

+0

当我回家时,我会添加更多的代码,现在我要离开了。 – McStuffins

+0

我很感激帮助,虽然我已经得到它的工作。 –