Passing a variable from jquery to URL

Question

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

<?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.

$('.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. 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>
            </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>

Answer 1

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.

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