Xavier Miranda Xavier Miranda - 3 years ago 274
Javascript Question

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

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>'
echo '</tr>';

After generating and displaying the table if I click the row I can update the httpquery with the following scripts.

$('.clickableRow').on('click', function() {
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) {
} 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. 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">&times;</span>
<div class="modal-body">
<input type="hidden" name="hiddenValue" id="hiddenValue" value="" />
<h5> <?php var_dump($_GET['id']); ?> </h5>
<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>

Answer Source

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() {
    changeUrlParam('id', $(this).attr('data-id'))

This way the click event will bind to all HTML elements with this class.

Example: https://codepen.io/anon/pen/eeKLwM?editors=1111

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download