asked on

Could you point a way to enable/ disable an "Like" icon depending on the user had clicked on it before or not - considering on an available collection of data?

Hi Experts

Could you point a way to enable/ disable an "Like" icon depending on the user had clicked on it before or not - considering on an available collection of data?

Giving this actual Laravel running view code:

	<div class='row'>


	{{ csrf_field() }}
    <input type="hidden" id="hdnCurtiu" value="{{$curtiu}}">

        <div class="col-md-12 col-sm-12">

                <section class="row">
               
                        @foreach($vitrinesX->chunk(3) as $row)
                        
                            @foreach($row as $vitrine)
                            
                            
                              @php $hasUserVoted = $vitrine->liked_by->contains($vitrine->id);
                              
                                    info($vitrine->linked_by);
                               @endphp
                          
                               <div class="col-sm-12 col-md-4">
                               
                               
                                    <div class="box-noticias">
                                       	<a href="javascript:void(0);" onclick='hotsite.vitrine.abrirVitrine({{$vitrine->id}});' >
                	    				{{$vitrine->titulo}}
                	    			    </a>                    
                                    </div> 
                                    
                                   	<p id="like" class="likes" onclick="hotsite.vitrine.salvarEscolha({{ $vitrine->id }}, 1)">
    				                    <i class="fa fa-thumbs-up"></i> <span id="qtdeCurtiu_{{ $vitrine->id }}">{{ $vitrine->qtdeCurtiu }}</span>
    				               	</p> 
                     
                               </div>     
                              
                            @endforeach
                            
                        @endforeach
                          
                                                  
                </section>
			</div>

	</div>

Open in new window

The data received for this:

How to enable the "Like" icon just for the users that haven't voted yet ?

The collection liked_by as showed above presents the id(s) that had voted yet, so if the user_id of the session belongs to this collection the Like icon must to be disabled.

Thanks in advance!

leakim971

so they can't dislike ?

$(".class of the like button div anchor or any element").on("click", function(event) {
     if( !$(this).hasClass("some class when user already liked") ) { // https://api.jquery.com/hasClass/
         event.preventDefault();
     }
});

Open in new window

Eduardo Fuerte

ASKER

Hi

Yes, he can't dislike.

Chris Stanyon

Hey again Eduardo :)

You're on the right track. Each of your $vitrine objects contains a list of UserIds that have like that particular item (liked_by). To make use of that, you'll need to know the 'current' user id, and then check that against the liked_by list.

@php $hasUserVoted = $vitrine->liked_by->contains($currentUserId); @endphp

Open in new window

I can't see in your code where you have access to the current user ID, but you need to pass that into the contains() method. Once you do that, $hasUserVoted will return true if the current user is in the list, and false if they're not.

You can then use that to enable / disable to the buttons. In your code, you seem to be using a <p> (paragraph) as the like button which seems a little odd. Normally, you'd use an <a> tag or a <button>. By using a <p>, you can't easily disable it. I guess you could choose not to add the javascript but that seems a little weird. For a button, something like this:

<button {{ $hasUserVoted ?: 'disabled' }}>Like</button>

Open in new window

Eduardo Fuerte

ASKER

Hi Chris, hapelly again!

I'm checking...

Eduardo Fuerte

ASKER

Just this:

 @php 
	$currentUserId = auth()->user()->id;
	// dd($currentUserId); => 3
	$hasUserVoted = $vitrine->liked_by->contains($currentUserId); 
	//dd($hasUserVoted); => true
@endphp

Open in new window

But just on my case I have to disable the class likes, ok?

<p id="like" class="likes" onclick="hotsite.vitrine.salvarEscolha({{ $vitrine->id }}, 1)">
	<i class="fa fa-thumbs-up"></i> <span id="qtdeCurtiu_{{ $vitrine->id }}">{{ $vitrine->qtdeCurtiu }}</span>
</p>

Open in new window

That case a jQuery function must to be used based on a PHP variable?

Chris Stanyon

OK.

The problem is that with a button, you can add a disabled property to stop it being clicked:

<button disabled>You can't click this</button>

You can't add the disabled property to a paragraph. Is there any reason why you're using a Paragraph as a clickable button. Doesn't really make sense to do that. There are ways around it, but it doesn't seem logical to do it this way.

Eduardo Fuerte

ASKER

I just received it as a legate code...

But the important here is to present the like icon to be clicked and the number of clicks received. I really don't know how to construct a button here to replace the paragraph...preserving the same functionalities.

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Eduardo Fuerte

ASKER

It runs....congratulations!

But just one thing else is needed. Another challenge,

If the user has the right of click the "Like" as the page loads and decides to click several times the likes goes increasing (just one vote is computed) so something else is needed to avoid it. Maybe it's a matter of adjust javascript....

So it will be another question.

Eduardo Fuerte

ASKER

Chris

Thank you for another help!

Today was a busy day!!!

Chris Stanyon

Hi,

You have a couple of options depending on how your Javascript is configured. The most robust way of doing it is to post the Like to the server for processing (AJAX) and then return the number of Likes from there. This way, it doesn't matter how many times it's clicked because your server code will only allow a given user to vote on an image once.

Chris Stanyon

Today was a busy day!!!

Indeed it was :)

Eduardo Fuerte

ASKER

Extremelly gratefull!!!

Chris Stanyon

You're welcome

Could you point a way to enable/ disable an &quot;Like&quot; icon depending on the user had clicked on it before or not - considering on an available collection of data?

Could you point a way to enable/ disable an "Like" icon depending on the user had clicked on it before or not - considering on an available collection of data?