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>

I'm really confused. As far as I can tell, all you are doing is replacing the history state, not updating the current page. I'm also assuming the modal was generated when the page loaded which would have been with the original id. Is this correct? — Taplar
– Taplar, Commented Nov 24, 2017 at 16:15
Is there a particular reason you need to use jQuery as PHP, HTML, CSS give you great possibilities without using heavy libraries. — Ivan Venediktov
– Ivan Venediktov, Commented Nov 24, 2017 at 16:18
thers no particular reason for using jQuery. i just didn't want to refresh the page every the user wants to check details of a student @Ivan Venediktov — Xavier Miranda
– Xavier Miranda, Commented Nov 24, 2017 at 16:48

Ivan Venediktov · Accepted Answer · 2017-11-24 17:06:16Z

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

edited Nov 24, 2017 at 17:06

answered Nov 24, 2017 at 16:32

Ivan Venediktov

4242 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Xavier Miranda Over a year ago

this doesn't work also. you mentioned I could simply use PHP and HTML to resolve the issue. How would you tackle it?

Collectives™ on Stack Overflow

Passing a variable from jquery to URL

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related