Reputation: 1802

jquery ajax pass variable from link

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.

Upvotes: 0

Answers (3)

ylerjen

Reputation: 4259

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>

Upvotes: 0

mplungjan

Reputation: 178422

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

Upvotes: 1