AJAX form refreshes page

Question

Просматривали какое-то время и не могли найти правильный ответ на эту проблему. У меня есть «финансовый» трекер, у которого есть несколько скрытых div, которые используют jQuery, когда кнопка показывает, что нажата кнопка div. У меня есть Asset Tracker, который запрашивает базу данных и после проверки обновляет базу данных новыми значениями в соседних входных строках, где установлен флажок. Я пытаюсь установить флажок, чтобы отправить данные, не заставляя страницу перезагружаться, и div снова отключится.

В разделе формы я попытался удалить 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

Не имеет никакого отношения к 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))); 
    } 
    }); 

}); 

Answer 2

Ваш JavaScript:

$("#AssetUpdateForm") 

... работает на форме с id="AssetUpdateForm".

Ваш PHP говорит:

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

, которые в HTML условиях становится:

id='AssetUpdateForm[something]' 

Даже если переменная пуста, вы по-прежнему есть квадратные скобки, так что ID не будет соответствовать и обработчик событий JavaScript никогда не будет привязан к этому элементу.

Вам необходимо использовать реальное удостоверение личности или, так как он может измениться, добавьте в форму class и используйте .class-selector в JavaScript.

---

NB: Ваш HTML-код недействителен. У конкретной проблемы, которую у вас есть, есть возможность вызвать те же симптомы, о которых вы говорите, так что просто исправления проблемы выше может быть недостаточно. Используйте a validator и напишите правильный HTML.