0

I have multiple images on the page. Every image has option "add to favorites". Everything work just fine except the message that is showing above image if image is added or not to favorites.

Success/Fail message is showing on top above first image only. I know that I must use unique id for each image but I can't understand how exactly.

Here is the HTML part where I show the images.

echo '
<article class="main-post" id="'.$row['image_id'].'" >
    <div class="article-top">
        <hr />
        <h1><a href="imagePreview.php?image_id='.$row['image_id'].'">'.$row['image_caption'].'</a></h1>
        <div class="counters-line">
           <div class="pull-left">
              <span id="message_favorites"></span>
           </div>
           <div id="'.$row['image_id'].'" class="pull-right">
               <div class="buttons-bar">
                  <div class="buttons">                             
                     <a href="javascript:;" class="bookmarked has-tooltip" data-title="Add to Favorites" id="'.$row['image_id'].'"></a>                                              
                  </div>
               </div>
           </div>
        </div>
        <div class="article-content">                                
           <figure>    
             <a href="imagePreview.php?id='.$row['image_id'].'"><img class="lazy" data-original="upload/'.$row['image_name'].'" alt="'.$row['image_name'].'"/></a>
           </figure>
        </div>
     </div>
</article>';

This snippet is in loop and show images from DB. I have added id="$row['image_id']" to the` so this way each article has now unique ID.

The success message is showing here

<div class="pull-left">
    <span id="message_favorites"></span>
</div>

And this is the ajax function

$(document).ready(function(){
$('.bookmarked', $('.buttons')).click(function(){
    $.post('misc/add_favorites.php', 
    { 
        "image_id": $(this).attr('id'),
    },
    function(data){
        if(data == 0){
            $('#message_favorites').html('<div id="alertFadeOut" style="color: green">Added to favorites!</div>');
             $('#alertFadeOut').fadeOut(3000, function () {
                $('#alertFadeOut').text('');
             }); 
        }
        else {
             $('#message_favorites').html('<div id="alertFadeOut" style="color: green">It's already in favorites!</div>');
             $('#alertFadeOut').fadeOut(3000, function () {
                $('#alertFadeOut').text('');
             }); 
        }
     });
});
});

ajax part send data to add_favorites.php which save image id and user id into DB.

So how exactly I can show this message on the image which is clicked?

UPDATE Ajax

    $(document).ready(function(){
$('.bookmarked', $('.buttons')).click(function(){
    $.post('misc/add_favorites.php', 
    { 
        "image_id": $(this).attr('id'),
    },
    var classes = $(this).attr('class');        //fetch all classes of the clicked item (this is a string)
//alert('The classes: '+classes);
    var classarray = classes.split(' ');        //split the string into it parts seperated by "blank"
    $.each(classarray, function(index, item){       // execute this for every subpart
    //alert(index+' '+item);
    if(index==2)            // since the third (better: use regexp) subpart stores the id-information...
    {
        //alert(item);
            $('#message_favorites').html('<div id="alertFadeOut" style="color: green">Added to favorites!</div>');
             $('#alertFadeOut').fadeOut(3000, function () {
                $('#alertFadeOut').text('');
             });            
    }
        else {
             $('#message_favorites').html('<div id="alertFadeOut" style="color: green">It's already in favorites!</div>');
             $('#alertFadeOut').fadeOut(3000, function () {
                $('#alertFadeOut').text('');
             }); 
        }        
});         
});
});

HTML

    echo '
<article class="main-post" id="'.$row['image_id'].'" >
    <div class="article-top">
        <hr />
        <h1><a href="imagePreview.php?image_id='.$row['image_id'].'">'.$row['image_caption'].'</a></h1>
        <div class="counters-line">
           <div class="pull-left">
              <div id="'.$row['image_id'].'"><span id="message_favorites"></span></div>
           </div>
           <div id="'.$row['image_id'].'" class="pull-right">
               <div class="buttons-bar">
                  <div class="buttons">                             
                     <a href="javascript:;" class="bookmarked has-tooltip '.$row['image_id'].'" data-title="Add to Favorites" id="'.$row['image_id'].'"></a>                                              
                  </div>
               </div>
           </div>
        </div>
        <div class="article-content">                                
           <figure>    
             <a href="imagePreview.php?id='.$row['image_id'].'"><img class="lazy" data-original="upload/'.$row['image_name'].'" alt="'.$row['image_name'].'"/></a>
           </figure>
        </div>
     </div>
</article>';
Jason Paddle
  • 1,095
  • 1
  • 19
  • 37

1 Answers1

1

One solution could be to add the ID-number to the button as well (as class):

<a href="javascript:;" class="bookmarked has-tooltip '.$row['image_id'].'" 
   data-title="Add to Favorites" id="'.$row['image_id'].'">
</a>

Then use the context of the ajax request and the query attr() method to get the list of classes of the button (see http://api.jquery.com/jquery.ajax). With split (see Get class list for element with jQuery) you can then extract the ID and use it to address the correct object...

Example: https://jsfiddle.net/ojk8kdg9/5/

Community
  • 1
  • 1
fjellfly
  • 388
  • 1
  • 13
  • Thank's for the answer. Can you provide with some example in my case because I'm really new in ajax/jquery and don't understand it quite well yet. – Jason Paddle Aug 31 '15 at 09:07
  • I updated my answer - I modified the setting a little bit not using ajax as well as a fixed id (id-2) (used wrong url first, sry, now it's correct!) – fjellfly Aug 31 '15 at 09:33
  • Just one question and I will try it. This `js` part it is part of the my current ajax or this is separated? – Jason Paddle Aug 31 '15 at 10:02
  • This doesn't seems to work as must. It's still showing the message at the first image.. – Jason Paddle Aug 31 '15 at 10:22
  • The "click"-function should trigger the ajax request (i added some comments to the code). Can you post your "new" js-code? – fjellfly Aug 31 '15 at 10:48
  • But why to user this `id-2`? Why not image_id – Jason Paddle Aug 31 '15 at 10:52
  • id-2 is just a example. you should replace this with your image_id delivered by php. I just wrote "id-2" because I didn't care about the ajax part (since it seems that you understand this part and it's working). I just wanted to show you how you can an example of how you can get and use the id to adress the correct element to insert the message in. – fjellfly Aug 31 '15 at 10:55
  • Yes, I've replaced it with `image_id`. I've updated my question with how is looking now. I don't have message at all. And it didn't save into database now. – Jason Paddle Aug 31 '15 at 10:58
  • ok, please take car to use the post-function correctly (see http://api.jquery.com/jquery.post/). the code I suggested has to be placed in the success-function. – fjellfly Aug 31 '15 at 11:04
  • I've got this error now `Uncaught TypeError: Cannot read property 'split' of undefined` – Jason Paddle Aug 31 '15 at 11:18