With reference to This link , I am trying to delete rows dynamically from a table. Here's my Javascript function:

function deleteBox(id){

alert ("Inside Method");
if (confirm("Are you sure you want to delete this record?"))
{
  var dataString = 'id='+ id;
  $("#flash_"+id).show();
  $("#flash_"+id).fadeIn(400).html('<img src="img/loading.gif" /> ');
  $.ajax({
  type: "POST",
  url: "delete.php",
  data: dataString,
  cache: false,
  success: function(result){
           if(result){
                $("#flash_"+id).hide();
                // if data delete successfully
                if(result=='success'){
                     //Check random no, for animated type of effect
                     var randNum=Math.floor((Math.random()*100)+1);
                     if(randNum % 2==0){
                        // Delete with slide up effect
                        $("#list_"+id).slideUp(1000);
                     }else{
                        // Just hide data
                        $("#list_"+id).hide(500);
                     }

                }else{
                     var errorMessage=result.substring(position+2);
                     alert(errorMessage);
                }
          }
  }
  });
}
}

However, calling it from Echo in Php, doesn't seem to invoke it. Here's my PHP code:

echo "<td align=\"center\">" . $id."</td>";
echo "<td><a href = 'javascript:deleteBox($id)'>Delete</a></td>";

Please correct me wherever I'm goin wrong. An early help would be highly appreciated.

With reference to This link , I am trying to delete rows dynamically from a table. Here's my Javascript function:

function deleteBox(id){

alert ("Inside Method");
if (confirm("Are you sure you want to delete this record?"))
{
  var dataString = 'id='+ id;
  $("#flash_"+id).show();
  $("#flash_"+id).fadeIn(400).html('<img src="img/loading.gif" /> ');
  $.ajax({
  type: "POST",
  url: "delete.php",
  data: dataString,
  cache: false,
  success: function(result){
           if(result){
                $("#flash_"+id).hide();
                // if data delete successfully
                if(result=='success'){
                     //Check random no, for animated type of effect
                     var randNum=Math.floor((Math.random()*100)+1);
                     if(randNum % 2==0){
                        // Delete with slide up effect
                        $("#list_"+id).slideUp(1000);
                     }else{
                        // Just hide data
                        $("#list_"+id).hide(500);
                     }

                }else{
                     var errorMessage=result.substring(position+2);
                     alert(errorMessage);
                }
          }
  }
  });
}
}

However, calling it from Echo in Php, doesn't seem to invoke it. Here's my PHP code:

echo "<td align=\"center\">" . $id."</td>";
echo "<td><a href = 'javascript:deleteBox($id)'>Delete</a></td>";

Please correct me wherever I'm goin wrong. An early help would be highly appreciated.

• javascript
• php
• jquery
• ajax

• Please make a fiddle. – MikeWu Commented Jul 26, 2014 at 7:47
• it wont be invoked till you click the anchor tag, and if $id is text containing quotes it is going to mess up with the html markup – Patrick Evans Commented Jul 26, 2014 at 7:49
• www.jsfiddle doesn't allow to make PHP fiddles.. I'm very new to this stuff so appologize for being stupid :( – Ingila Ejaz Commented Jul 26, 2014 at 7:50
• @PatrickEvans so how do I call it then? $id is just a simple integer e.g 202, 183 etc. – Ingila Ejaz Commented Jul 26, 2014 at 7:51
• When do you wish to have it being called, not in click event? – Niklas Commented Jul 26, 2014 at 7:53

3 Answers 3

<td><a href = 'javascript:deleteBox($id)'>Delete</a></td>

to

echo "<td><a onClick='deleteBox(" . $id . ");'>Delete</a></td>"; 

In my opinion, thats how I would do it..

Edited and shortened the jscript;

function deleteBox(idDelete){

alert ("Inside Method");
if (confirm("Are you sure you want to delete this record?"))
{
  $("#flash_" + idDelete).show();
  $("#flash_" + idDelete).fadeIn(400).html('<img src="img/loading.gif" /> ');

  $.post('delete.php', {'id': idDelete}, function(result) {
            if(result){
                $("#flash_" + idDelete).hide();
                // if data delete successfully
                if(result=='success'){
                     //Check random no, for animated type of effect
                     var randNum=Math.floor((Math.random()*100)+1);
                     if(randNum % 2==0){
                        // Delete with slide up effect
                        $("#list_" + idDelete).slideUp(1000);
                     }else{
                        // Just hide data
                        $("#list_" + idDelete).hide(500);
                     }

                }else{
                     var errorMessage=result.substring(position+2);
                     alert(errorMessage);
                }
          }
  });  
} 

in your delete.php:

$_POST['id'] 

to retrieve the ID.

Check this, Hope this helps. Instead of id, static values are given

<td align="center">1</td>
<td><a href='#' onclick='deleteBox(1)'>Delete</a></td>

echo "<td><a href='#' onclick='deleteBox(1)'>Delete</a></td>";

jsfiddle

I am updating the answer, check whether alert is working.

<script>
function deleteBox(a){
    alert(a);
}   
</script>

<?php
  echo "<a href='#' onclick='deleteBox(1)'>Delete</a>";
?>

Since you're using jQuery, I wouldn't do the call to the function in the href. Try something like this:

Javascript:

$(function() {
$('.delete').click(function() {

var id = $(this).attr('data-id');

alert ("Inside Method");
if (confirm("Are you sure you want to delete this record?"))
{
  var dataString = 'id='+ id;
  $("#flash_"+id).show();
  $("#flash_"+id).fadeIn(400).html('<img src="img/loading.gif" /> ');
  $.ajax({
  type: "POST",
  url: "delete.php",
  data: dataString,
  cache: false,
  success: function(result){
           if(result){
                $("#flash_"+id).hide();
                // if data delete successfully
                if(result=='success'){
                     //Check random no, for animated type of effect
                     var randNum=Math.floor((Math.random()*100)+1);
                     if(randNum % 2==0){
                        // Delete with slide up effect
                        $("#list_"+id).slideUp(1000);
                     }else{
                        // Just hide data
                        $("#list_"+id).hide(500);
                     }

                }else{
                     var errorMessage=result.substring(position+2);
                     alert(errorMessage);
                }
          }
  }
  });
});
});

PHP/HTML:

echo "<td align=\"center\">" . $id."</td>";
echo "<td><a class='delete' data-id='" . $id . "'>Delete</a></td>";