AJAX update database on click within the while loop

Question

I am developing a plugin for WordPress system for some custom media review purpose. I have setup most of the things but few more.

Currently I stuck on the part to update database on click ( onlink ) to update table value using AJAX. Refer below code. It has while loop and I want to use AJAX within the loop to update media status. I am not sure is this the right way or there is another simple way to make it happen. Any suggestion would be appreciated.

Code:

<?php
$media_item = mysql_query($media_sql);

if ($media_item) {

echo '<ul class="rm-media-list">'; 

    while ($media = mysql_fetch_array($media_item)) {

        $m_uid = $media['user_id'];
        $m_uname = $media['user_login'];

        $media_class = new q2a_review_media;
        $thumb_path = $media_class->rm_thumbnail_url($pid,$m_uid);
        $media_url = $media_class->rm_media_url($pid,$m_uid);
        $mediaid = $media['id'];
        $image_name = $media['image_name'];                                

        echo '<li>';
        echo '<span class="rm-media-user"><a href="'.admin_url( 'user-edit.php?user_id=' . $m_uid, 'http' ).'">',$m_uname,'</a></span>';
        echo '<a href="'.$media_url.$image_name.'" rel="lightbox['.$pid.']" title="Post: '.$pid.' |  '.$ptitle.' | Image: '.$image_name.' | by: '.$m_uname.' " ><img src="'.$thumb_path.$image_name.'" alt="'.$media['image_name'].'" width="56" class="rm-thumbs-list" /></a>';
        echo '<span class="rm-action-links"><a href="#" id="approve-'.$mediaid.'" >Approve</a> | <a href="#" id="delete-'.$mediaid.'" >Delete</a></span>';                            
        echo '</li>';
    }

} else {

    echo 'No media found';

}

echo '</ul>';                        
?>

Database Table: enter image description here

My Plugin Page Output enter image description here

In above image you can see link called Approve | Delete Here I want to make interaction with database using ajax. When admin click on Approve it will update value from 0 to 1 in status column and when Delete than it will delete the row and images from the directory. Hope I posted enough data to understand. If not please let me know I will try to add some more information.

Million thanks.... :)

What have you tried to make the AJAX request work? I'm not seeing any ajax logic within the loop. — Mateus Schneiders
– Mateus Schneiders, Commented Feb 24, 2013 at 10:55
I don't even know how to start within the loop. I am to seeking full working code but need some start up path with some explanation than I can start to work on. I have check couple of videos but none of them showing how to use within the loop and without form only for links — Code Lover
– Code Lover, Commented Feb 24, 2013 at 10:58

karancan · Accepted Answer · 2013-02-24 23:06:32Z

2

Firstly, your statement echo '</ul>'; needs to be in the if part of the loop.

Your AJAX code doesn't have to be inside the while loop. Here is how you can manipulate your code to make an AJAX request.

Let's first modify your <a> tag slightly:

<a href="#" class="approve-button" id="'.$mediaid.'">Approve</a>

This change allows you to have a group of buttons with class="approve-button" and id="the id of the item you want to approve"

Now, we can use some JavaScript to make an AJAX request. For convenience, I will use jQuery to make this request:

<script type="text/javascript">

//Attach an onclick handler to each of your buttons that are meant to "approve"
$('.approve-button').click(function(){

   //Get the ID of the button that was clicked on
   var id_of_item_to_approve = $(this).attr("id");

   Make an AJAX request
   $.ajax({
      url: "some-page.php", //This is the page where you will handle your SQL insert
      type: "post",
      data: "id=" + id_of_item_to_approve, //The data your sending to some-page.php
      success: function(){
          console.log("AJAX request was successfull");
      },
      error:function(){
          console.log("AJAX request was a failure");
      }   
    });

});

</script>

As far as some-page.php goes, this is what you need to do:

Have your SQL statements that will make the changes to he database
To access the ID attached to the approve button that was clicked, you can use the $_POST array since the AJAX request was of type "post". Specifically, this is where your ID is stored: $_POST['id']

FYI: To import jQuery on your page, you can use:

<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>

answered Feb 24, 2013 at 23:06

karancan

2,1625 gold badges24 silver badges36 bronze badges

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

3 Comments

Code Lover Over a year ago

This is working for non WordPress system but not with WordPress. I mean things fine but when ajax calling the page it is not considering the code

karancan Over a year ago

Not sure what the problem could be. I've never used Wordpress

Code Lover Over a year ago

No problem still selecting your answer as it works for normal ajax call. Thanks a lot.

Collectives™ on Stack Overflow

AJAX update database on click within the while loop

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related