jquery ajax pass variable from link

Question

I'm trying to pass a variable from my link to ajax, but I cannot do so.

This is the code I'm working on:

<script type="text/javascript">
    $(function(){
    $(".btn-show-modal").click(function(e){
      e.preventDefault();
      $("#dialog-example").modal('show');
    });

    $("#btn-delete").click(function(e) {
      var id = $(this).attr('data-id');
      $.ajax({
        type:"POST",
        data: { id : id },
        url:"delete-project.php",
        success:function(result){
          $("#dialog-example").modal('hide');
        }
      });


    });

    });
</script>

<table class="table table-bordered">
    <tr>
        <td>Project Code</td>
        <td>Description</td>
    </tr>
<?php
    $stmt2 = $conn->prepare( "SELECT project_code, description FROM tblprojects" );
    $stmt2->execute();

    for($i=0; $row2 = $stmt2->fetch(); $i++){
        $project = $row2['project_code'];
    $desc = $row2['description'];?>

    <tr class="record" id="record-">
        <td>
            <a href="project-detail.php?code=<?php echo $project; ?>"><?php echo $project; ?></a>
        </td>
        <td><?php echo $desc; ?></td>
        <td>
            <a href="update-project.php?code=<?php echo $project; ?>" title="Update record">
                <i class="icon-edit icon-white"></i>
            </a>
        </td>
        <td>
            <a href="#" data-id="<?php echo $project; ?>" id="<?php echo $project; ?>" class="btn-show-modal" data-toggle="modal" title="Delete record">
                <i class="icon-trash icon-white"></i>
            </a>
        </td>

        <div class="modal hide fade" id="dialog-example">
            <div class="modal-header">
                <h5>Confirm Delete</h5>
            </div>

            <div class="modal-body">
                <p class="modaltext">Are you sure you want to delete this record?</p>
            </div>    
            <div class="modal-footer">
                <a href="#" data-dismiss="modal" class="btn btn-info">No<a>
                <a data-id="<?php echo $project; ?>"  class="btn btn-danger" id="btn-delete">Yes<a>
            </div>
        </div>
    </tr>
    <?php 
    } 
    ?>
</table>

I have a table where it has a delete column, if it is clicked a confirmation modal will appear that has 2 options yes or no. If yes is clicked, I need to delete that record and dismiss the modal, display the result without refreshing the page. How can I do that? I tried using ajax, I don't know if I am using it correctly. Your help will greatly appreciated. Thanks.

score 1 · Answer 1 · edited May 23 '17 at 11:49

1

IDs must be unique Change to class instead and use $(this).data("id")

You also likely want to hide the deleted data from the page too

<a data-id="<?php echo $project; ?>" 
class="btn btn-danger btn-delete">Yes<a>


$(".btn-delete").on("click",function(e) {
  e.preventDefault(); // cancel the link
  var id = $(this).data('id');
  $.ajax({
    type:"POST",
    data: { id : id },
    url:"delete-project.php",
    success:function(result){
      $(this).closest("tr").remove(); // remove the row from view
      $("#dialog-example").modal('hide');
    }
  });
});

Lastly I suggest you have only ONE dialog on the page and pass the ID to delete and ID or the row to it

Passing data to a jQuery UI Dialog

edited May 23 '17 at 11:49

Community

1
1

answered Mar 07 '14 at 09:43

mplungjan

169,008
28
173
236

Anything in the console? Also add e.preventDefault() – mplungjan Mar 07 '14 at 09:51
It pops up the modal for delete confirmation – neknek mouh Mar 07 '14 at 09:57
yes but it's not removing the row :( I need to refresh the page to see the new records – neknek mouh Mar 07 '14 at 10:25
It should. I cannot help you without seeing an example – mplungjan Mar 07 '14 at 10:28
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/49223/discussion-between-neknek-mouh-and-mplungjan) – neknek mouh Mar 07 '14 at 10:29

score 1 · Answer 2 · answered Mar 07 '14 at 09:45

1

IDs must be unique in your DOM. You have multiple links with id="btn-delete". That is the reason your code is not working

Change it to class, as below

In your markup:

<a data-id="<?php echo $project; ?>" class="btn btn-danger btn-delete">Yes<a>

And in your jQuery:

$(".btn-delete").click(...);

answered Mar 07 '14 at 09:45

varun1505

800
2
8
16

I tried doing this, however I cannot delete the record/row? – neknek mouh Mar 07 '14 at 09:48
You mean "display the result without refreshing the page" ? – varun1505 Mar 07 '14 at 09:50
Yes I cannot display the new records – neknek mouh Mar 07 '14 at 09:58
yes that's it I want to view the new results afterwards – neknek mouh Mar 07 '14 at 10:02

ylerjen · Answer 3 · 2014-03-07T12:15:17.913

You're just hiding the modal when the delete success event is executed. You have to remove the line from the table too. You can remove it like this :

$(this).parents('tr').remove();

UPDATE :

The following code was tested and is working. If you still have error, you should open firebug and report the error message. You have some basic syntax problem or errors in your code, I corrected some in this solution, but you should look at tutorials or documentations to learn basic and good practice to provide a good structured code.

Just replace the html table lines (tr) below with your php loop to generate the lines.

<!-- place your modal out of a table. In a table you have tr and td, no div. 
By the way you just need 1 modal for all rows -->
<div class="modal hide fade" id="dialog-example">
        <div class="modal-header">
          <h5>Confirm Delete</h5>
        </div>

        <div class="modal-body">
          <p class="modaltext">Are you sure you want to delete this record?</p>
        </div>    

        <div class="modal-footer">
            <a href="#" data-dismiss="modal" class="btn btn-info">No</a>
            <a href="#" data-id="<?php echo $project; ?>" class="btn btn-danger" id="btn-delete">Yes</a>
        </div>
</div>




<table class="table table-bordered">
  <tr>
      <th>Project Code</th>
      <th>Description</th>
      <th>Actions</th>
  </tr>
  <tr class="record" id="record-1">
      <td>
          <a href="project-detail.php?code=<?php echo $project; ?>">project1</a>
      </td>
      <td>description</td>
      <td>
          <a href="update-project.php?code=proj1" title="Update record">
              <i class="icon-edit icon-white"></i>
         </a>
         <a href="#" data-id="proj1"  id="proj1"  class="btn-show-modal" data-toggle="modal" title="Delete record">
             <i class="icon-trash icon-white"></i>
         </a>
      </td>      
  </tr>
  <tr class="record" id="record-2">
      <td>
          <a href="project-detail.php?code=proj2">project2</a>
      </td>
      <td>description</td>
      <td>
          <a href="update-project.php?code=proj2" title="Update record">
             <i class="icon-edit icon-white"></i>
         </a>
         <a href="#" data-id="proj2"  id="proj2"  class="btn-show-modal" data-toggle="modal" title="Delete record">
             <i class="icon-trash icon-white"></i>
         </a>
      </td>      
  </tr>
</table>

<script>
$(function(){
    $(".btn-show-modal").click(function(e){
      e.preventDefault();
      var btnDelete = $("#btn-delete");
        //show the modal
      $("#dialog-example").modal('show');
        //save the id to delete if confirmed
        var id=$(this).attr('data-id');
      btnDelete.data('toRemove', id); 
      return false;
    });

//action when clicking YES
    $("#btn-delete").click(function(e) {
      var id =  $("#btn-delete").data('toRemove');
        alert(id);
      $.ajax({
        type:"POST",
        data: { id : id },
        url:"delete-project.php",
        success:function(result){
          //hide the modal
          var modal = $("#dialog-example");
          modal.modal('hide');
          var btnDelete = $("#btn-delete");
          //remove the saved id
          var id= btnDelete.data('toRemove');
          //remove the row dynamically
          $("#"+id).closest('tr').remove();
        },
        error:function( jqXHR, textStatus  ) {
          alert( "Request has failed! ; " + jqXHR.status + " / "+textStatus);
        }
      });
    });
  });
</script>

It should be added before or after the $("#dialog-example").modal('hide'); line — ylerjen, Mar 07 '14 at 09:56
I re-updated my answer with a solution. Use Firebug or similar to debug the code and to have more detailled errors to explain — ylerjen, Mar 07 '14 at 12:17

jquery ajax pass variable from link

3 Answers3