[英]Passing a variable from jquery to URL
So I'm having trouble passing a value to a bootstrap modal. 所以我很难将值传递给引导程序模式。 I think it has to do with not refreshing the page and I hope someone can help me. 我认为这与不刷新页面有关,希望有人能帮助我。
I'm generating a table, from data returned from a database, where the last column has three buttons. 我正在根据数据库返回的数据生成一个表,其中最后一列具有三个按钮。 Each of those buttons opens a modal wiindow where I want to retrieve, update or delete a full entry from the database. 这些按钮中的每个按钮都会打开一个模式窗口,我想在其中从数据库中检索,更新或删除完整条目。
Where is the table generation. 表生成在哪里。 Each row is of the class .clickableRow 每行属于.clickableRow类
<?php
foreach ($studentsTable as $row) {
echo '<tr class="clickableRow" data-id="'. $row['id'] . '">';
echo '<td class="column-id" scope="row">' . $row['id'] . '</td>';
echo '<td>' . $row['name'] . '</td>';
echo '<td>' . $row['email'] . '</td>';
echo '<td class="column-action">'
. "<button type='button' class='btn btn-info btn-sm mr-1' data-toggle='modal' data-target='#modal-detailsStudent'>Ver</button>"
. '<button type="button" class="btn btn-info btn-sm mr-1" data-toggle="modal" data-target="#modal-updateStudent">Editar</button>'
. '<button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#modal-deleteStudent">Apagar</button>'
.'</td>';
echo '</tr>';
}
?>
After generating and displaying the table if I click the row I can update the httpquery with the following scripts. 生成并显示表格后,如果单击该行,则可以使用以下脚本更新httpquery。
$('.clickableRow').on('click', function() {
console.log($(this))
//console.log($(this).attr('data-id'))
changeUrlParam('id', $(this).attr('data-id'))
})
function getURLParameter(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
}
function changeUrlParam (param, value) {
var currentURL = window.location.href+'&';
var change = new RegExp('('+param+')=(.*)&', 'g');
var newURL = currentURL.replace(change, '$1='+value+'&');
if (getURLParameter(param) !== null){
try {
window.history.replaceState('', '', newURL.slice(0, - 1) );
} catch (e) {
console.log(e);
}
} else {
var currURL = window.location.href;
if (currURL.indexOf("?") !== -1){
window.history.replaceState('', '', currentURL.slice(0, - 1) + '&' + param + '=' + value);
} else {
window.history.replaceState('', '', currentURL.slice(0, - 1) + '?' + param + '=' + value);
}
}
}
BUT... after I click in one of the buttons the console always shows the same id being outputed. 但是...单击按钮之一后,控制台始终显示正在输出的相同ID。 Modal following 模态跟随
<div class="modal fade" id="modal-detailsStudent" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Nome do Aluno</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<input type="hidden" name="hiddenValue" id="hiddenValue" value="" />
<h5> <?php var_dump($_GET['id']); ?> </h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
This is due to your click call, it will always refer to the first element with that class. 这是由于您的单击调用,它将始终引用该类的第一个元素。 What you want it to look like is: 您希望它看起来像是:
jQuery('.clickableRow').on('click', function() {
console.log($(this))
//console.log($(this).attr('data-id'))
changeUrlParam('id', $(this).attr('data-id'))
});
This way the click event will bind to all HTML elements with this class. 这样click事件将绑定到此类的所有HTML元素。
Example: https://codepen.io/anon/pen/eeKLwM?editors=1111 示例: https : //codepen.io/anon/pen/eeKLwM?editors = 1111
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.