How to use data-toggle with Ajax and PHP

Question

I am using Bootstrap (which is heavily modified) and love the use of data-toggle. My current script is pretty straight forward, it's an image upload script. I use the following code to list images from the database:

$stmt = $db->query('SELECT * FROM img_slider ORDER BY id ');
      while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
      echo "<li>
      <div class='thumbnail removable'>
      <div class='remove' id='{$row['id']}' data-toggle='remove'></div>
      <img src='../{$row['path']}'>
      </div>
      </li>"
;}

Notice data-toggle='remove' - This function works great removing images statically, but what say I want to remove the images in the database? I understand the best method would be to utilise Ajax. Here is what I mean:

My PHP file delete.php:

$id = $_REQUEST['id'];
$db->beginTransaction();
$st = $db->prepare('DELETE FROM img_slider WHERE id = :id');
$st->execute(array(':id' => $id));
$db->commit();

I am trying to execute this with the following jquery/ajax:

$("a[data-toggle=remove]").click(function() 
{   
    var image_id = $(this).attr('id');

    $.ajax({
        cache: false,
        type: 'POST',
        url: 'actions/delete.php',
        data: 'id='+image_id,
    });
});

Any help would be greatly appreciated! I just don't know how to utilise bootstraps data-toggle with PHP, tried search for the solution, came up empty handed. Here is an image of how the image upload works:

The images echoed in my SELECT

You're on the right track. Is your click event firing and is the ajax page being called? — user1477388
– user1477388, Commented Oct 2, 2013 at 13:44

davidkonrad · Accepted Answer · 2013-10-02 14:02:11Z

2

If it is the selector that is the problem, tt should be

$('div[data-toggle="remove"]').click(function() {

but if it is click on the image you mean

$('div[data-toggle="remove"]').next().click(function() {

Edit. I just tested your question like so :

<div class='thumbnail removable'>
  <div class='remove' id='27' data-toggle='remove'></div>
  <img src='1.gif'>
</div>

$('div[data-toggle="remove"]').next().click(function() {   
    var image_id = $(this).prev().attr('id');
    alert(image_id);
    $.ajax({
        cache: false,
        type: 'POST',
        url: 'actions/delete.php',
        data: 'id='+image_id
    });
});

alerts 27 and and try to XHR with id: 27.

If it is click on the data-toggle <div>

$('div[data-toggle="remove"]').click(function() {   
    var image_id = $(this).attr('id');

edited Oct 2, 2013 at 14:02

answered Oct 2, 2013 at 13:51

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

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

4 Comments

SethCodes Over a year ago

Had no luck there, The images remove, but not from the database. Could it be an issue grabbing the id? Example: id='{$row['id']}'

SethCodes Over a year ago

thanks for you help so far. It is still failing to delete from the database. Statically, everything removes perfectly. It's almost as if it's not sending the ID to delete.php.

davidkonrad Over a year ago

Use $id = $_POST['id']; !! You are explicit on sending post data. If you are in doubt what it actually has sended, and you are using chrome, go to network -> find delete.php and look for formdata in headers.

SethCodes Over a year ago

wonderful! was missing a trailing slash in my connection to database (facepalm). Thanks for you help!

David Nguyen · Accepted Answer · 2013-10-02 13:56:09Z

1

Take a look at jQuery function ON: http://api.jquery.com/on/

The issue is you are binding the click event at load, when you are loading elements in to the page async then they will not events binded. On should bind the events now and in the future.

$("body").on( "click", ".remove", function() {
    // Remove stuff
});

edited Oct 2, 2013 at 13:56

answered Oct 2, 2013 at 13:50

David Nguyen

8,5182 gold badges35 silver badges50 bronze badges

Collectives™ on Stack Overflow

How to use data-toggle with Ajax and PHP

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related