Question

一直在寻找一段时间，但无法找到解决此问题的正确答案。我有一个＆＃34; finance＆＃34;当显示单击div的按钮时，会出现使用jQuery的几个隐藏div的跟踪器。我有一个资产跟踪器查询数据库，并在检查时使用复选框所在的相邻输入行中的新值更新数据库。我试图让复选框提交数据，而不会导致页面重新加载和div到＆＃34;切换＆＃34;再次关闭。

在表单部分，我尝试删除method='post'，但是当选中该框时，它会重新加载页面并将所有帖子变量添加到URL字符串中。我删除了action='FBook.php'以试图阻止重新加载，但这并没有解决问题。

以下是PHP文件中的相关代码：

if(isset($_POST['AssetSetUpdate'])) { $AssetLastUpdate = $dtNowDate->format('Y-m-d');
foreach($_POST['AssetID'] as $key => $id) { if(isset($_POST['AssetSetUpdate'][$key])) {
$stmt_ATrackUp -> bindParam(':UpDate', $AssetLastUpdate, PDO::PARAM_STR, 10);
$stmt_ATrackUp -> bindParam(':UpNotes', $_POST['AssetNotes'][$key], PDO::PARAM_STR, 50);
$stmt_ATrackUp -> bindParam(':UpThis', $_POST['AssetDescription'][$key], PDO::PARAM_STR, 50);
$stmt_ATrackUp -> bindParam(':UpVal', $_POST['AssetValue'][$key], PDO::PARAM_INT, 3);
$stmt_ATrackUp -> execute(); } else continue; }
echo "<div class='Notice'>" . $PageTitle . " / Assets updated!</div>"; }

（其他代码）

$(document).ready(function() {

$("#AssetUpdateForm").submit(function(e) {
e.preventDefault();
$.ajax({
    type: 'POST',
     url: 'FBook.php',
    data: $(this).serialize(),
     success: function() { alert('form submitted'); },
    });
return false;
});


$('#ShFBAsset').click(function() { $('#FBAsset').toggle('slow'); });

（其他代码）

});

（其他代码）

$AssetCounter = 1;

$stmt_ATrack -> execute(); while ($row_ATrack = $stmt_ATrack -> fetch(PDO::FETCH_ASSOC))

{   

$ChAge = $row_ATrack['Checked']; $cChAge = ''; switch(true)
{
case (strtotime($ChAge) >= strtotime('-7 days')): $cChAge = 'FBCAN'; break;
case (strtotime($ChAge) >= strtotime('-30 days')): $cChAge = 'FBCA1'; break;
case (strtotime($ChAge) >= strtotime('-90 days')): $cChAge = 'FBCA3'; break;
default: $cChAge = 'FBCA6'; break;
}

if(isset($row_ATrack['Serial'])) { $IfDSerial = "<strong>Serial: </strong>" . $row_ATrack['Serial'] . "<br/>"; } else { $IfDSerial = ''; }
if(isset($row_ATrack['UPC'])) { $IfDUPC = "<strong>UPC: </strong>" . $row_ATrack['UPC'] . "<br/>"; } else { $IfDUPC = ''; }
if(isset($row_ATrack['Related'])) { $IfDRelated = "<strong>Related: </strong>" . $row_ATrack['Related'] . "<br/>"; } else { $IfDRelated = ''; }
if(isset($row_ATrack['Location'])) { $IfDLocation = "<strong>Location: </strong>" . $row_ATrack['Location'] . "<br/>"; } else { $IfDLocation = ''; }
if(isset($row_ATrack['TagPhoto'])) { $IfDTagPhoto = "<strong>Tag photo: </strong><a href='Images/INV/" . $row_ATrack['TagPhoto'] . ".JPG'>" . $row_ATrack['TagPhoto'] . "</a><br/>"; } else { $IfDTagPhoto = ''; }

$IfDetails = "<div class='UPop'><img class='th_icon' src='Images/Icons/ic_lst.jpeg'><div class='UPopO'>" . ($IfDSerial) . ($IfDUPC) . ($IfDRelated) . ($IfDLocation) . ($IfDTagPhoto) . "</div></div>";
if($IfDetails == "<div class='UPop'><img class='th_icon' src='Images/Icons/ic_lst.jpeg'><div class='UPopO'></div></div>") { $IfDetails = ''; }

echo "<form id='AssetUpdateForm[" . $AssetCounter . "]' method='post'>";
echo "<tr><input type='hidden' name='AssetID[" . $AssetCounter . "]' value='" . $AssetCounter . "' />";
echo "<td><input type='hidden' name='AssetDescription[" . $AssetCounter . "]' value='" . $row_ATrack['Description'] . "' /><a href='https://www.google.com/#q=eBay+" . $row_ATrack['Description'] . "' target='_new_AssetSearch'>" . $row_ATrack['Description'] . "</a></td>";
echo "<td>" . $row_ATrack['Type'] . " - " . $row_ATrack['Category'] . "</td>";
echo "<td><input type='checkbox' name='AssetSetUpdate[" . $AssetCounter . "]' value='Now' onchange='this.form.submit();' /></td>";
echo "<td><input type='number' name='AssetValue[" . $AssetCounter . "]' value = '" . $row_ATrack['Value'] . "' style='width: 75px;' /></td>";
echo "<td class='" . $cChAge . "'>" . $ChAge . "</td>";
echo "<td><input type='text' name='AssetNotes[" . $AssetCounter . "]' value = '" . $row_ATrack['Notes'] . "' style='width: 140px;' /></td>";
echo "<td>" . $IfDetails . "</td>";
echo "</tr>";
echo "</form>";

$AssetCounter++;

}

Answer 1

您的JavaScript：

$("#AssetUpdateForm")

...正在处理id="AssetUpdateForm"的表单。

你的PHP说：

id='AssetUpdateForm[" . $AssetCounter . "]'

以HTML术语变为：

id='AssetUpdateForm[something]'

即使变量为空，您仍然使用方括号，因此ID不会匹配，并且JavaScript事件处理程序永远不会绑定到该元素。

您需要使用真实身份证，或者因为它似乎可以更改，所以在表单中添加class并在JavaScript中使用.class-selector。

注意：您的HTML无效。您所描述的特定问题有可能导致相同的症状，因此只是修复上述问题可能还不够。使用a validator并编写有效的HTML。

Answer 2

与HTML或PHP无关。事实证明，jQuery AJAX与onclick='this.form.submit();'属性冲突。我删除了并将ajax请求更改为以下内容 - 虽然它仍然存在错误，因为它无法在第二个ajax请求上运行，但它会验证其他一切正常。

$(".Check2Update").on('change', function(e) {
e.preventDefault();
$.ajax({
    type: 'post',
    url: 'FBook.php',
    data: $(this.form).serialize(),
    success: function(html) { 
        console.log('Successfully submitted AJAX!');
        $("#TableAssets").replaceWith($('#TableAssets', $(html)));
    }
    });

});

AJAX表单刷新页面

2 个答案: