Question

现在已经有一段时间了，所以任何反馈都会受到赞赏。

我想要达到的目标是：

单击按钮时，它将自行删除（当前正在工作）
当点击相同的按钮时，我还希望它更新一个div，它会自动/动态地为其分配id-field。单击按钮，我想要更新的div不在同一个div中。 - 这是我需要帮助的地方
显示的信息是从AJAX调用（test.php）获取的，该调用设置为将结果回显到该特定div

代码HTML / PHP代码示例：

echo "<div class='something'><button id='{$orderid}' class='btn btn-danger btn-xs cancel'>Cancel order</button></div>";

<div class="test" id="<?php echo $orderid; ?>">
text to show here is echo'ed from test.php
</div>

jQuery / AJAX调用如下所示：

$(document).on('click', '.cancel', function() {

  var id = this.id
  var divid = $('.test').attr('id');

  $(this).remove();

  $.ajax({
    type: 'post',
    url: 'test.php',
    data: {
      divid:divid
    },
    success: function(response) {
      $('.test').load('testpage.php .test' + divid).html(response);
    }
  });
});

不要担心.test，它只是我设法到达某处的唯一方式，虽然这会影响所有div类，而不是我想要的特定类。

这就是用户的样子（原谅我的ASCII绘图技巧）：

                   status
    ----------------------
    ---------   | 
    | button |  | New
    ---------   |
                |
    ---------   |
    | button |  | Some status
    ---------   |

当您点击该按钮时，状态字段需要更改以反映该行＆＃39;数据库中的状态。例如。让我们说，new旁边的按钮有id 1，当点击按钮时，状态必须改变。

因此，当用户点击按钮时，AJAX会触发包含SQL更新语句的php文件。完成后，按钮需要消失，状态将反映更新语句。

Answer 1

您是否考虑过使用数据属性而不是ID？它可能比使用ID和获取冲突更容易，这是我认为正在发生的事情。祝你好运。

对不起，这很长，但我会这样做。

function LoadData() {
  $.ajax({
    type: "post",
    url: "exe/testProcess.php",
    data: "action=GetAllRecords",
    success: function(data) {

      var container = $("#container");

      // start by clearning the data if anything was there
      container.empty();

      // loop through the records and print out the data and button
      for (var i = 0; i < data.length; i++) {

        var item;
        var button;

        // --------------------------------------------------
        // set up item
        // --------------------------------------------------
        item = "<div class='itemBox' data-id='" + data[i].id + "'>ITEM: " + data[i].item + "<span style='float: right;'>" + data[i].status + "</span></div>";
        // --------------------------------------------------

        // --------------------------------------------------
        // set up button
        // check order status and down show button if canceled
        // --------------------------------------------------
        if (data[i].status != "Canceled") {
          button = "<button class='itemButton' data-id='" + data[i].id + "'>Cancel</button>";
        } else {
          button = "";
        }
        // --------------------------------------------------

        // Append the row
        container.append(item + button);
      }
    },
    error: function(e) {
      console.log(e);
    }
  });
}

function UpdateData(id) {
  $.ajax({
    type: "post",
    url: "exe/testProcess.php",
    data: "action=UpdateRecord&id=" + id,
    success: function(data) {
      LoadData();
    },
    error: function(e) {
      console.log(e);
    }
  });
}

// on button click cancel the order and update
$("body").on("click", ".itemButton", function() {
  var id = $(this).attr("data-id");
  UpdateData(id);
});

// start the inital data load
LoadData();

//-----------------------------------------------------
//-----------------------------------------------------
// exe/testProcess.php
//-----------------------------------------------------
//-----------------------------------------------------
<?php
header("Content-type: application/json; charset=utf-8");
date_default_timezone_set("Asia/Tokyo");
require_once '../master/testdbconnect.php'; // CONNECT TO THE DATABASE

// ----------------------------
// GET POST VAIRIALBES
// ----------------------------
if (isset($_POST['id'])){
	$id = $_POST['id'];
} else {
	$id = "";
}

if (isset($_POST['action'])){
	$action = $_POST['action'];
} else {
	$action = "";
}

// ------------------------------------
// UPDATE RECORDS
// ------------------------------------
function UpdateRecord($id){
	
	// update your sql status here
}


// ------------------------------------
// SELECT ALL RECORDS
// ------------------------------------
function GetAllRecords(){
	
  // sql to pull all you data
	
}

?>

.itemBox {
  width: 60%;
  margin: 5px;
  background: #CCCCCC;
  float: left;
}

.itemButton {
  width: 25%;
  background: #CCCCCC;
  float: left;
}

<div id="container"></div>

Answer 2

我找到了答案，我所要做的就是将=== RUN TestUnimportedFunc this totally is a real function --- PASS: TestUnimportedFunc (0.00s) PASS ok scratch/JeffreyYong-Example 0.001s放入window.location.reload();。

因此：

AJAX call

这将重新加载位置，这对我来说已经足够了，因为它会显示更新的内容。

感谢大家的评论和@Icewine的建议。

jQuery：根据id

2 个答案: