CODEWITHSUNDEEP
javascriptphpjqueryajax
Anecito Alima Santillan
Anecito Alima Santillan

Reputation: 95

delete record from database without refreshing

I have an code where it is supposed to delete the data without refreshing. the delete process works but i have to refresh to to remove the data. heres my code please help me

Ajax: 

$(function () {
  $(".trash").click(function () {
    var del_id = $(this).attr("id");
    var info = 'id=' + del_id;
    if (confirm("Sure you want to delete this post? This cannot be undone later.")) {
      $.ajax({
        type: "POST",
        url: "delete.php", //URL to the delete php script
        data: info,
        success: function () {}
      });
      $(this).parents(".record").animate("fast").animate({
        opacity: "hide"
      }, "slow");
    }
    return false;
  });
});

Here's my html: 

<td style="padding-left: 23px">
    <img class="photo" data-toggle="modal" data-target="#gallery<?php echo $photo; ?>"  src="<?php echo $r1['photo'];  ?>" />

    <div class="hotel">
        <button class="trash" id="<?php echo $r1['photo_id']; ?>" > <span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
    </div>
</td>

If I hover the button to the image the .trash button will appear and if I click it the image must be deleted. help me please.

Upvotes: 1

Views: 4400

Answers (4)

Rafiqul Islam
Rafiqul Islam

Reputation: 961

Try This:

function delete_value(id)
    {
      if(confirm('Are you sure you want to delete this?'))
      {
        // ajax delete data from database
          $.ajax({
            url : "<?php echo site_url('yoururl/del')?>/"+id,
            type: "POST",
            success: function(data)
            {
				      $("tr[id="+id+"]").remove();
            },
            error: function (jqXHR, textStatus, errorThrown)
            {
                alert('Error deleting data');
            }
        });

      }
    }
<button class="btn btn-danger" onclick="delete_value(<?php echo $row->id;?>)"><i class="glyphicon glyphicon-remove"></i></button>

<!--- add tr id --->
<tr id="<?php echo $row->id; ?>">

Upvotes: 0

Vipin Sahu
Vipin Sahu

Reputation: 3

No need to add extra attribute for ID in table row(TR).

$('.glyphicon-remove').on('click',function() { 
  $(this).closest( 'tr').remove();
  return false;
});

Upvotes: 0

Francisco Villegas
Francisco Villegas

Reputation: 3

Your code works, maybe do you need show the complete html, or at least the classes ".record" to analyze the "error"

Upvotes: 0

KnowGe
KnowGe

Reputation: 305

You can give a data image id attr to parent tr,

<tr data-image-id="<?php echo $r1['photo_id']; ?>">

After successful delete process (in your ajax success function) you can run code below. 

$("tr[data-image-id="+del_id+"]").remove();

Upvotes: 2

Related Questions