Variable from PHP into jQuery to form a link

Question

I have a table with the following PHP code:

<table id="myTable">
        <tr class="header">
            <th>Naam</th>
            <th>Bedrijf</th>
        </tr>
        <?php
        include 'assets/scripts/connect.php';
        $q = mysql_query("SELECT * FROM `users` WHERE `admin`='0' AND `deleted`='0'");
        while ($row = mysql_fetch_assoc($q)) {
                $id = $row['id'];
            ?>
            <tr class="trash" onclick="deletePopUp()" data-id="<?php echo $id; ?>">
             <td><?php echo $row['fname']; ?> <?php echo $row['lname']; ?></td>
             <td><?php echo $row['company']; ?></td>
            </tr>

           <?php
                }
            ?>
</table>

As you can see, I add a data-id for each row that is created by the code in conjunction with the database. The onClick function makes a modal pop up with the request to confirm whether the user really wants to delete this customer. The modal is coded the following way:

<!-- The Modal -->
<div id="myModal" class="modal">

<!-- Modal content -->
<div class="modal-content">
    <div class="modal-top">
        <h1>Weet je het zeker?</h1>
        <span class="close">&times;</span>
    </div>
    <div class="modal-inner">
        <a href="delete-user.php?id=<?php echo $id; ?>" id="delete" class="btn-confirm">Verwijderen</a>
        <a href="#" class="btn-cancel cancel">Annuleren</a>
    </div>

</div>

</div>

The two anchor tags are for the confirmation. So one sould go to the external PHP script to delete the customer according to their ID. I use the GET method for this. But the link on the modal now forms always with the same ID. Do the link is always:

/assets/scripts/delete-user.php?id=2

I would like to have the ID being the same as that of the customer clicked on.

I tried using jQuery to form this link, but I get the same result. This is the jQuery I used:

var id=$('.trash').data('id');
$('#delete').attr('href','/assets/scripts/delete-user.php?id='+id);

But as said, this gives the same result.

How can I get the link on the modal to have a dynamic ID?

Stop using the mysql_* functions. They have been deprecated since v5.5 (Jun 2013) and removed since v7.0 (Dec 2015). Instead use the mysqli_* or PDO functions with prepared statements and bound parameters. — Alex Howansky
– Alex Howansky, Commented Apr 20, 2017 at 18:12
Thanks for the tip, I will adapt it. It doesn't awnser my question as for now though — Gidimotje
– Gidimotje, Commented Apr 20, 2017 at 18:15
Take care.... using a link to delete information is a bad idea, any bots following links will trigger the delete. — Vbudo
– Vbudo, Commented Apr 20, 2017 at 18:19
@Vbudo I understand that, but I am not that concerned about that as this is a admin enviroment, which is protected. Also, I do not actually delete the user, but just change the Boolean in the database connected to the cell deleted. If you know of any better solution, I would gladly hear it from you! — Gidimotje
– Gidimotje, Commented Apr 20, 2017 at 18:22

gaetanoM · Accepted Answer · 2017-04-20 18:30:43Z

Because you added an inline js event handler function I would suggest to use the parameters:

event: the event object
this: the current element

In your case your may write:

<tr class="trash" onclick="deletePopUp(event, this)" data-id="This is An ID">

Therefore, your deletePopUp function will be:

function deletePopUp(e, ele) {
    var id = ele.dataset['id'];  // get current data-id
    $('#delete').attr('href','/assets/scripts/delete-user.php?id='+id);
    $('#myModal').modal('show');
}

The snippet:

function deletePopUp(e, ele) {
  var id = ele.dataset['id'];
  $('#delete').attr('href','/assets/scripts/delete-user.php?id='+id);
  $('#myModal').modal('show');
}


$('#delete').on('click', function(e) {
    e.preventDefault();
    console.log(this.href);
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<table id="myTable">
    <tr class="header">
        <th>Naam</th>
        <th>Bedrijf</th>
    </tr>
    <tr class="trash" onclick="deletePopUp(event, this)" data-id="This is An ID">
        <td>name</td>
        <td>company</td>
    </tr>
</table>
<!-- The Modal -->
<div id="myModal" class="modal">

    <!-- Modal content -->
    <div class="modal-content">
        <div class="modal-top">
            <h1>Weet je het zeker?</h1>
            <span class="close">&times;</span>
        </div>
        <div class="modal-inner">
            <a href="delete-user.php?id=<?php echo $id; ?>" id="delete" class="btn-confirm">Verwijderen</a>
            <a href="#" class="btn-cancel cancel">Annuleren</a>
        </div>

    </div>

</div>

ConorReidd · Accepted Answer · 2017-04-20 18:29:08Z

1

A simpler method to above could be: (I haven't tested this, I assume this does what you need)

$(document).ready(function() {
    $(".trash").click(function() {
        var id = $(this).attr("data-id");
        $("#delete").attr("href","delete-user.php?id="+id);
    });
});

answered Apr 20, 2017 at 18:29

ConorReidd

2765 silver badges27 bronze badges

Collectives™ on Stack Overflow

Variable from PHP into jQuery to form a link

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related