CODEWITHSUNDEEP
javascriptphpjqueryanchor
Gidimotje
Gidimotje

Reputation: 477

Variable from PHP into jQuery to form a link

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?

Upvotes: 2

Views: 691

Answers (2)

gaetanoM
gaetanoM

Reputation: 42054

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>

Upvotes: 1

ConorReidd
ConorReidd

Reputation: 276

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);
    });
});

Upvotes: 1

Related Questions