How to delete record using ajax?

Question

I am trying to delete record from database using AJAX. The confirmation window does not appear so that the record can be deleted. here is the code..

<?php
$q = $_GET['q'];
$p = $_GET['p'];
$sql="SELECT * FROM course_details WHERE sem='" . $q . "' AND branch='" . $p . "' ORDER BY course_codes ASC";
$result = mysql_query($sql);        
while($row = mysql_fetch_assoc($result)){
  echo '<tr class="record">';
  echo "<td>" . $row['course_codes'] . "</td>";
  echo "<td>" . $row['course_names'] . "</td>";
  echo "<td>" . $row['course_instructors'] . "</td>";
  echo "<td>" . $row['course_credits'] . "</td>";
  echo '<td><div align="center"><a href="#" id="' . $row['course_id'] . '" class="delbutton" title="Click To Delete">delete</a></div></td>';
  echo '</tr>';
}
echo "</table>";
mysql_close($bd);
?>

Here $p and $q are send by an AJAX script from another page. It is working fine. The records are displayed as expected. Deletion works using AJAX if i do not use AJAX to display records.The script I am using to delete is:

<script src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$(".delbutton").click(function(){
var element = $(this);
var del_id = element.attr("id");
var info = 'id=' + del_id;
if(confirm("Are you sure you want to delete this Record?")){
    $.ajax({
        type: "GET",
        url: "deleteCourse.php",
        data: info,
        success: function(){   
    }
});
    $(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast")
    .animate({ opacity: "hide" }, "slow");
}
return false;
});
});
</script>

deleteCourse.php

if($_GET['id']){
    $id=$_GET['id'];
    $id = mysql_escape_string($id);
}
$del = "DELETE from course_details where course_id = '$id'";

$result = mysql_query($del);

It seems that every day we are tasked with the duty to instruct new developers to escape and validate user input. — Jared
– Jared, Commented Oct 18, 2013 at 9:25
@Jahaan - "Deletion works using AJAX if i do not use AJAX to display records", unfortunately you didn't show just this piece of code. — ErnestV
– ErnestV, Commented Oct 18, 2013 at 9:32
@Lame-up-duck - but @Jazza is still right. And the use of the mysql interface has long been deprecated and should be replaced by PDO, or mysqliat least... — ErnestV
– ErnestV, Commented Oct 18, 2013 at 9:34
@Lame-up-duck: plz don't be angry...He may be suffered by such questions.The fact is that we the new developers can not proceed without your help..so plz keep it up — Jahaan
– Jahaan, Commented Oct 18, 2013 at 9:35

SarathSprakash · Accepted Answer · 2013-10-18 10:33:44Z

3

The problem is because you are creating dynamic elements so you have to use a delagate $(document).on() inorder to bind the click event to the elements. Here is the corrected code

<script type="text/javascript">
        $(function() {
        $(document).on('click','.delbutton',function(){
        var element = $(this);
        var del_id = element.attr("id");
        var info = 'id=' + del_id;
        if(confirm("Are you sure you want to delete this Record?")){
            $.ajax({
                type: "GET",
                url: "deleteCourse.php",
                data: info,
                success: function(){  } 
            });
        }
        return false;
        });
        });
    </script>

and your deletCourse.php

if($_GET['id']){
    $id=$_GET['id'];
    $id = mysql_escape_string($id);
}
$del = "DELETE from course_details where course_id = ".$id."";

$result = mysql_query($del);

Hope this helps, Thank you

edited Oct 18, 2013 at 10:33

answered Oct 18, 2013 at 9:37

SarathSprakash

4,6142 gold badges21 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

SarathSprakash Over a year ago

@Jahaan is the confirm box displaying

Jahaan Over a year ago

:No..thats the problem

SarathSprakash Over a year ago

@Jahaan, I have upadated the code, if its not working, please delete that done() completely and check

SarathSprakash Over a year ago

@Jahaan jus to check whether the ajax call is working am removing the animation after the ajax call , check this code now

Arun Kumar · Accepted Answer · 2013-10-18 16:53:16Z

1

try this one

 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

 <a href="#" id="1" onclick="del(this.id);return false;">delete</a>
 <a href="#" id="2" onclick="del(this.id);return false;">delete</a>
 <a href="#" id="3" onclick="del(this.id);return false;">delete</a>
 <a href="#" id="4" onclick="del(this.id);return false;">delete</a>
 <a href="#" id="5" onclick="del(this.id);return false;">delete</a>

javascript

function del(id)
{
 var info = 'id=' + id;
    if(confirm("Are you sure you want to delete this Record?")){
        var html = $.ajax({
        type: "POST",
        url: "delete.php",
        data: info,
        async: false
        }).responseText;

        if(html == "success")
        {
            $("#delete").html("delete success.");
            return true;

        }
        else
        {
            $("#captchaStatus").html("incorrect. Please try again");

            return false;
        }
    }
}

ajax file

if($_GET['id']){
$id=$_GET['id'];
$id = mysql_escape_string($id);
}
$del = "DELETE from course_details where course_id = '$id'";
$result = mysql_query($del);
if($result)
{
echo "success";
}

edited Oct 18, 2013 at 16:53

answered Oct 18, 2013 at 14:41

Arun Kumar

1,6331 gold badge18 silver badges33 bronze badges

2 Comments

Jahaan Over a year ago

the confirmation box does not appear, also it does not delete data.....shows no error

Jahaan Over a year ago

@ Arun Kumar: this one also does not work..the ajax code i am using is fine.. I am using the same code in different places in my project.But here it does not work..The reason is that the data is populated using php after getting the id send by ajax...you please see the link.. stackoverflow.com/questions/19434125/…

Mustafa Ehsan Alokozay · Accepted Answer · 2013-10-18 12:55:27Z

0

Try this:

<script type="text/javascript" src="jquery.js"></script>

edited Oct 18, 2013 at 12:55

answered Oct 18, 2013 at 9:48

Mustafa Ehsan Alokozay

5,8232 gold badges26 silver badges30 bronze badges

1 Comment

Jahaan Over a year ago

@ user2169355: the script i posted works fine if i use only php without using AJAX to retrieve data from database

suresh · Accepted Answer · 2015-01-18 15:11:49Z

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
function del(id)
{

 var info = 'id=' + id;
    if(confirm("Are you sure you want to delete this Record?")){
        var html = $.ajax({
        type: "GET",
        url: "deletCourse.php",
        data: info,
        async: false ,
         success: function() {
    window.location.reload(true);}
        }).responseText;


    }
}
</script>

<?php
$link=mysql_connect("localhost","root","") or die(mysql_error());
mysql_select_db("cart");
$sql=mysql_query("SELECT * FROM `details`");
echo "<table>";
echo "<tr><th>Name</th><th>NO of Items</th></tr>";
while($row = mysql_fetch_assoc($sql)){
  echo '<tr class="record">';
  echo "<td>" . $row['name'] . "</td>";
  echo "<td>" . $row['num'] . "</td>";

  echo '<td><div align="center"><a href="#"  id="' . $row['id'] . '" onclick="del('.$row['id'].')">delete</a></div></td>';
  echo '</tr>';
}
echo "</table>";
mysql_close($link);
?>

Collectives™ on Stack Overflow

How to delete record using ajax?

4 Answers 4

4 Comments

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related