CODEWITHSUNDEEP
javascriptphp
user3386898
user3386898

Reputation: 25

On click action not working properly

My javascript function 

   function ConfirmDelete()
      {
            if (confirm("Delete Account?"))
             var id= $(this).attr('data-id');
             alert(id);
                 location.href='config-project-delete.php?id='+id;
      }

onclick event trigger

<?php
echo "<span  onclick=\"ConfirmDelete()\" data-id={$row['project_id']}  class='button-content'>
<i class='glyph-icon icon-trash-o float-left'></i>
Delete
</span>
</div>
</a>
</li>"; ?>

I cant able to get the data-id.It keep saying undefined.Any help would be appreciated.

Upvotes: 0

Views: 121

Answers (4)

David
David

Reputation: 4361

Although Nick Coons answer is an easier way to do this (pass the variable to the function), to get the results you first asked about using the data attribute method, you have to pass event to the function to get the proper node. http://jsfiddle.net/2t4hK/

function ConfirmDelete(e) {
    var target = $(e.target);
    if (confirm("Delete Account?")) {
        var id = target.attr('data-id');
        alert(id);
        //location.href='config-project-delete.php?id='+id;
    }
}

<span onclick="ConfirmDelete(event)" data-id="1"  class="button-content">Delete</span>

<?php
   echo '<span onclick="ConfirmDelete(event)" data-id="'.$row['project_id'].'" class="button-content">';
   echo '<i class="glyph-icon icon-trash-o float-left"></i>Delete</span>';
?>

Also, in your code, I suggest you wrap the value for data-id inside of quotes.

Upvotes: 0

Nick Coons
Nick Coons

Reputation: 3692

In your example, this doesn't refer to the element where you called the function, but rather refers to the owner of the function (which, as you've defined it, looks like it's in the global scope). So you'd have to call the function with the parameter of the value you want, then use it within the function, as such:

<?php
echo "<span  onclick=\"ConfirmDelete(\$(this).attr('data-id'))\" data-id={$row['project_id']}  class='button-content'>
...

(The $ is escaped because you're echoing it with PHP).

And then your function would look something like this:

function ConfirmDelete(data_id)
  {
        if (confirm("Delete Account?"))
         var id= data_id;
         alert(id);
             location.href='config-project-delete.php?id='+id;
  }

If you aren't using the data-id attribute anywhere else and only for this purpose, you can simplify the HTML side as well by passing the value directly:

<?php
echo "<span  onclick=\"ConfirmDelete('{$row['project_id']}')\" class='button-content'>
...

Note that I haven't tested any of this code, and when mixing HTML, JS, and PHP, it can be easy to screw this up (at least for me), so tweak the above as needed.

Upvotes: 1

Robin
Robin

Reputation: 1216

You have to pass the triggering object to your function.

   function ConfirmDelete(triggering_object)
      {
            if (confirm("Delete Account?")) {
                var id= $(triggering_object).attr('data-id');
                alert(id);
                location.href='config-project-delete.php?id='+id;
            }
      }

And add the 'this' to your object:

echo "<span  onclick=\"ConfirmDelete(this);\" data-id={$row['project_id']}  class='button-content'>";

Upvotes: 0

Dexter
Dexter

Reputation: 1796

try this

<span onclick="javascript:deleteConfirm('<?php echo 'config-project-delete.php?id='.$row['project_id'] ?>');" deleteConfirm class='button-content'>

javascript

function deleteConfirm(url)
 {
    if(confirm('Do you want to Delete this record ?'))
    {
        window.location.href=url;
    }
 }

Upvotes: 0

Related Questions