我有一个PHP foreach循环遍历数据库中的记录。 foreach会添加一个新的表格行,显示数据库中的联系人,例如名称,地址等。我使用的是href链接来触发ajax / jquery脚本,该脚本会将该项添加到乘员列表中。该脚本位于foreach循环中,因此我可以访问要发送的数据。
我的问题是第一行工作正常,然后其他任何记录都不会触发脚本。我在想这可能是因为脚本无法使用相同的ID触发吗?所以我将联系人ID添加到href中。
<a id="addCrewLink'.$contact->person_id.'" href="/pages/voyages/crewlists/add.php?item='.$contact->person_id.'&type=crew" class="btn btn-sm btn-outline-primary">crew</a>
这没有用。我认为我需要将脚本移出foreach循环,这既是因为它位于我要更新的表之上,又因为使表充满脚本可能是一种不好的做法!
我可以使用链接来传递参数,然后使用一个脚本来获取链接吗?
$(document).ready(function() {
$("#addCrewLink<?php echo $contact->person_id;?>").click(function(e) {
e.preventDefault();
var personID = '<?php echo $contact->person_id;?>';
var voyageID = '<?php echo Input::get('voyage'); ?>';
var passageID = '<?php echo Input::get('passage'); ?>';
var role = '<?php echo $contact->role;?>';
$.ajax({
type: "POST",
url: "/pages/voyages/crewlists/add.php",
dataType: 'json',
data:{ person: personID, embarkingAs: role, voyage: voyageID, passage: passageID },
'success': function(data) {
if(data['success']) {
//refresh the tables
$("#crewTable").load(location.href + " #crewTable");
//$("#passengerTable").load(location.href + " #passengerTable");
//send the user a success message
resetToastPosition();
$.toast({
heading: 'Success',
text: 'Waypoint added successfully',
textColor: 'white',
showHideTransition: 'slide',
hideAfter : 7000,
icon: 'success',
loaderBg: '#f96868',
position: 'top-center'
})
} else {
var i;
for (i = 0; i < data['message'].length; i++) {
//scroll to the top
window.scrollTo({ top: 0, behavior: 'smooth' });
this.error(this.xhr, data['message'][i]);
}
}
},
'error': function(jqXHR, textStatus, errorThrown) {
//send the user a fail message
resetToastPosition();
$.toast({
heading: 'Error',
text: textStatus,
textColor: 'white',
showHideTransition: 'slide',
hideAfter : 7000,
icon: 'error',
bgColor: '#f96868',
position: 'top-center',
loaderBg: '#405189'
})
}
})
});
});
非常感谢您提供的所有帮助!
致谢
马特
答案 0 :(得分:1)
快到了。我的建议是进行以下更改:
add-crew-link
类最终显示如下:
<a class="add-crew-link" data-id="1" href="..." class="btn btn-sm btn-outline-primary">crew</a>
<a class="add-crew-link" data-id="2" href="..." class="btn btn-sm btn-outline-primary">crew</a>
<a class="add-crew-link" data-id="3" href="..." class="btn btn-sm btn-outline-primary">crew</a>
<a class="add-crew-link" data-id="4" href="..." class="btn btn-sm btn-outline-primary">crew</a>
注意:根据需要添加其他data-
属性。例如data-name
或data-age
等。
更改点击处理程序以定位所有add-crew-link
锚点:
$('.add-crew-link').click(function(e) {
在点击处理程序功能开始时获取所需的id
和其他数据属性:
var personID = $(this).data('id');
当然,请确保该函数不再位于PHP循环内。