AJAX POST成功div上傳幾秒后消失

Question

我在 AJAX 成功發布后遇到問題，更新后的 div 會在幾分鍾后消失

下面依次是jquery/PHP/POST數據。

單擊按鈕 Function：

function Delete_ID(clickBtnValue,clickBtnID,clickBtnName) {
  var my_data = {"passvalue": clickBtnValue, "passid":clickBtnID, "passname":clickBtnName};
  $.ajax({
    type: 'POST',
    url: '../Programs/Programs.php',
    data: my_data,
    success: function (data) {
      $('#ProgramsTable').load("../Programs/ProgramChange.php");
      $('#update-div').html(data);
    }
  });
}

PHP DIV顯示：

$list_programs = DB_Get_Program_List();
if (!is_null($list_programs)) {
  $html = '<br><div id="ProgramsTable"><div class="TABLE">';
  for ($ii=0; $ii < count($list_programs); $ii++) {
    $html .= <<<HTML
    <div class="CELL">
      <form method="post" action>{$list_programs[$ii]["Program_Name"]}
        <button onclick="Delete_ID('Delete','{$list_programs[$ii]["Name_Hash"]}', '{$list_programs[$ii]["Program_Name"]}')" class="button">Delete</button>
        <button onclick="Delete_ID('Edit','{$list_programs[$ii]["Name_Hash"]}', '{$list_programs[$ii]["Program_Name"]}')" class="button">Edit</button>
      </form>
    </div>
    HTML;
  }
}
echo $html;
echo "</div></div><div id='update-div'></div>";

在 Programs.php 中發布：

if (!empty($_POST)) {
    if ($_POST['passvalue'] == "Delete"){
      DB_Delete_Program_list($_POST['passid']);
      echo $_POST['passname'] . " has been deleted";
    }
    if ($_POST['passvalue'] == "Edit"){
      echo '  <div class="form_div"><form class="Edit_form" method="post">';
      echo '     <div style="margin-top:5px"><input type="text" style="height:20px;" id="'.$_POST['passid'].'" value="'.$_POST['passname'].'" size="40" maxlength="253"></div>';
      echo '    <div style="margin-top:10px"></div>';
      echo '    <div ><input class="form_submit" type="Submit" name="Edit_button"></div>';
      echo '  </form></div>';
    }
    return true;
}

當我按刪除時，它會顯示例如“程序1已被刪除”然后消失當我按編輯時，新的表格表格和顯示然后消失

這是我的問題的屏幕記錄

我需要更改什么才能使我的 div 數據“表”刷新為最新的 SQL 數據，同時還保留成功文本消息？

DSICLAIMER是的，我知道 EDIT POST 選項不是它應該的樣子，因為我只是在測試成功消息返回。 是的，有 SQL 緩解措施

Answer 1

我相信發生的事情是當您單擊按鈕時，您在提交表單的同時還觸發了您的Delete_ID功能。 因此，發生的情況是 JS 函數執行並顯示您的 div，但頁面也會重新加載，因此您只能看到它片刻。 您需要做的是在onclick事件生成的event上調用preventDefault() 。

作為切線，為了更容易地將數據傳遞給您的Delete_ID函數，我建議使用數據屬性，而不是將數據作為屬性傳遞給函數本身。

這就是我重做您的代碼的方式。

對於表單按鈕，刪除onclick屬性，並使用data-屬性作為相關屬性。 我還為每個按鈕添加了delete-button和edit-button類以區分它們。

$list_programs = DB_Get_Program_List();
if (!is_null($list_programs)) {
  $html = '<br><div id="ProgramsTable"><div class="TABLE">';
  for ($ii=0; $ii < count($list_programs); $ii++) {
    $html .= <<<HTML
    <div class="CELL">
      <form method="post" action>{$list_programs[$ii]["Program_Name"]}
        <button data-name-hash="{$list_programs[$ii]["Name_Hash"]}"  data-program-name="{$list_programs[$ii]["Program_Name"]}" class="button delete-button">Delete</button>
        <button data-name-hash="{$list_programs[$ii]["Name_Hash"]}"  data-program-name="{$list_programs[$ii]["Program_Name"]}" class="button edit-button">Edit</button>
      </form>
    </div>
    HTML;
  }
}
echo $html;
echo "</div></div><div id='update-div'></div>";

然后在您的 javascript 中，將點擊功能分配給具有匹配類的按鈕。 這允許您訪問該函數中的點擊event 。

$('.delete-button').click(Delete_ID);

現在，更新函數定義以使用單擊event並從數據屬性中提取數據：

function Delete_ID(event) {
  event.preventDefault(); // Stop the form from submitting so the page doesn't reload

  const clickedBtn = event.target; // This is a reference to the <button> itself. 

  const clickBtnValue = 'Delete'; // You could pass this via data attributes too; I assume you'll probably have a separate Edit_ID function though. 

  // Pull the values from the `data-` attributes on the clicked button
  // Note that JS converts the kebab-case attribute names (eg: data-name-hash) to camelCase with "data" removed (eg: nameHash). 
  const clickBtnID = clickedBtn.dataset.nameHash;
  const clickBtnName = clickedBtn.dataset.programName;

  var my_data = {"passvalue": clickBtnValue, "passid":clickBtnID, "passname":clickBtnName};
  $.ajax({
    type: 'POST',
    url: '../Programs/Programs.php',
    data: my_data,
    success: function (data) {
      $('#ProgramsTable').load("../Programs/ProgramChange.php");
      $('#update-div').html(data);
    }
  });
}

這是一個非常基本的 JSFiddle 示例，它使用具有數據屬性的preventDefault 。

Answer 2

當您按下刪除/編輯按鈕時，您需要防止表單被提交，您可以通過刪除表單標簽來完成

$list_programs = DB_Get_Program_List();
if (!is_null($list_programs)) {
    $html = '<br><div id="ProgramsTable"><div class="TABLE">';
    for ($ii=0; $ii < count($list_programs); $ii++) {
        $html .= <<<HTML
            <div class="CELL">
                {$list_programs[$ii]["Program_Name"]}
                <button onclick="Delete_ID('Delete','{$list_programs[$ii]["Name_Hash"]}', '{$list_programs[$ii]["Program_Name"]}')" class="button">Delete</button>
                <button onclick="Delete_ID('Edit','{$list_programs[$ii]["Name_Hash"]}', '{$list_programs[$ii]["Program_Name"]}')" class="button">Edit</button>
            </div>
        HTML;
    }
}

echo $html;
echo "</div></div><div id='update-div'></div>";

或在按鈕單擊事件上返回 false

$list_programs = DB_Get_Program_List();
if (!is_null($list_programs)) {
    $html = '<br><div id="ProgramsTable"><div class="TABLE">';
    for ($ii=0; $ii < count($list_programs); $ii++) {
        $html .= <<<HTML
            <div class="CELL">
                <form method="post" action>{$list_programs[$ii]["Program_Name"]}
                    <button onclick="Delete_ID('Delete','{$list_programs[$ii]["Name_Hash"]}', '{$list_programs[$ii]["Program_Name"]}'); return !1" class="button">Delete</button>
                    <button onclick="Delete_ID('Edit','{$list_programs[$ii]["Name_Hash"]}', '{$list_programs[$ii]["Program_Name"]}'); return !1" class="button">Edit</button>
                </form>
            </div>
        HTML;
    }
}

echo $html;
echo "</div></div><div id='update-div'></div>";

Answer 3

謝謝“404 Not Found”，這是一個巨大的幫助，但是我仍然有問題

$(document).ready(function() {
  $('.button').click(Delete_ID);
});
function Delete_ID(event) {
  event.preventDefault();
  const clickedBtn = event.target;
  const clickBtnValue = "Delete";
  const clickBtnID = clickedBtn.dataset.nameHash;
  const clickBtnName = clickedBtn.dataset.programName;
  var my_data = {"passvalue": clickBtnValue, "passid":clickBtnID, "passname":clickBtnName};
  $.ajax({
    type: 'POST',
    url: '../Programs/Programs.php',
    data: my_data,
    success: function (data) {
      //$('#ProgramsTable').load("../Programs/ProgramChange.php");
      $('#update-div').html(clickBtnName + " has been deleted");
    }
  });
}

正如你在上面看到的，我不得不注釋掉 $('#ProgramsTable').load("../Programs/ProgramChange.php"); 為了它在我這邊正常工作。 當我刷新 SQL 數據並更新 ProgramsTable div 時，無論單擊第一個按鈕，它都會恢復

AJAX POST成功div上傳幾秒后消失

問題描述

2 個解決方案

解決方案1
0 2021-11-04 02:58:32

解決方案2
0 2021-11-04 04:06:17

解決方案3
0 2021-11-04 22:52:40

AJAX POST成功div上傳幾秒后消失

問題描述

2 個解決方案

解決方案1 0 2021-11-04 02:58:32

解決方案2 0 2021-11-04 04:06:17

解決方案3 0 2021-11-04 22:52:40

解決方案1
0 2021-11-04 02:58:32

解決方案2
0 2021-11-04 04:06:17

解決方案3
0 2021-11-04 22:52:40