Pass PHP/MYSQL values to ajax on click

[rx3mer]

Hi guys,

 

I am trying to delete DB row without page refresh. I am aware of how to delete by passing URL values and I am trying to do the same thing, but with AJAX.

 

		 $data = mysql_query("SELECT * FROM playlistsongs WHERE PlayList = '$playlistsongid'") or die(mysql_error()); 
		 while($info = mysql_fetch_array( $data )) { ?>

		<?php 
			<table border="1px">
		 	<tr>
				<td style="width: 100px;"><?php echo "<b>PlaylistSongID:</b> ".$info['PlaylistSongID'];?></td>
				<td style="width: 100px;"><?php echo "<b>PlayList:</b> ".$info['PlayList'];?></td>
				<td style="width: 100px;"><?php echo "<b>UserID:</b> ".$info['UserID'];?></td>
				<td style="width: 100px;"><?php echo "<b>SongUrl:</b> ".$info['SongUrl'];?></td>
				<td style="width: 100px;"><?php echo "<b>Status:</b> ".$info['Status'];?></td>
				<td style="width: 100px;"><?php echo "<b>DateCreated:</b> ".$info['DateCreated'];?></td>
				<td style="width: 100px;"><?php echo "<b>DateModified:</b> ".$info['DateModified'];?></td>
				<td style="width: 100px;"><?php echo "<b>Artist:</b> ".$info['Artist'];?></td>
				<td style="width: 100px;"><?php echo "<b>Title:</b> ".$info['Title'];?></td>
				<td style="width: 100px;"><a data-customer-id="345" class="button remove">Remove</a></td>
				</td>
			</tr>
		</table>

And this is my AJAX request:

function DeletePlayListItem(){

  $.ajax({
   'url': 'processing/delete-playlist-items.php',
   'async': false,
    data: "PlaylistSongID=" + PlaylistSongVarID + "&UserID=" +  UserVarID + "&Status=", 
    success: function (response) {

        var posturl='http://localhost/xampp/websites/Djapp/processing/delete-playlist-items.php'
        
        $.getJSON(posturl,function(data){
          $.each(data.members, function(i,userdetails){
            takeuserid = (userdetails.UserID);
            title = (userdetails.Title);
            vote1 = (userdetails.Vote1);
          });
        });
    }
  });

}

So my question is, how do I pass the values to the AJAX on click/select?

Thank you for your time!

 

 

[gristoi]

you need to listen to the click event of the remove button. something like this:

$('.remove').click(function(e){
  e.preventDefault();
  var me = $(this);
  var customer-id = me.data('customer-id');
  $.ajax({
   'url': 'processing/delete-playlist-items.php',
   'async': false,
    data: {
       customer-id: customer-id

     }, 
    success: function (response) {
 
        // use something like  me.getParent('td').fadeOut(); or something similar to remove the row
    }
  });

});

it would be a lot easier for the scope of the event if you added the data attributes you want to send to the anchor, then you can implement what i put there for you . hope it helps

Edited March 20, 2014 by gristoi

[rx3mer]

I don't think that you understand my question, or I just don't understand your answer. I know how to make the function run on click. The problem I am having is that I don't know how to pass the values to the ajax as data.

 

Any ideas?

[gristoi]

i understand you're question. user clicks remove -> the ajax calls sends data to back end -> record gets removed -> you get ajax response back -> remove the row from the page. Is this correct?

[rx3mer]

Yeah that it. I will think about it, give it a try and I'll come back with an update.

 

Thanks for your time!

[rx3mer]

gristoi it worked after some testing. Basically what I was getting wrong was the id name on my div element.

 

<div class="delete_class delete" ID="<?php echo $info['PlaylistSongID']; ?>">Delete</div>

 

Thank you very much!