Discussion on Reaction Button jQuery Plugin Makes Everything Reactable

Hi James, thank you.

Customization

To change the reaction types in the plugin you should open the file reactable/assets/js/reactable-1.6.0.js and edit the lines in the following image. In your case, you should delete lines other than like and love. You don’t need to make changes elsewhere. The system still has other reactions. However, if these do not appear in the interface, they cannot be used. Therefore, it is treated as if it does not exist.

Plugin’ Workflow

1. Dozens of Reactable plugins can run on a page.
2. The page loads.
3. Reactable is activated.
4. The plug-in is installed on all items.
5. No item has previous statistics.
6. The plugin collects the ID numbers of all items on the page.
7. These ID numbers are sent to the server collectively with the user session information.
8. The server only collects statistics with the ID number requested from it.
9. If the user who sent the request has already reacted, this information is added to the items.
10. Finally the collected information is sent back to the plugin.
11. The plugin distributes these statistics to related items on the page.
12. The plugin goes back to step 6 every 5 seconds.

Thank you, is it possible to have a refresh of the number on push not on the pull.

Ideally, I do not want for plugin to ping the server I want to update numbers manually (we want to call the server)

Also when the page refreshes is it possible to pre-set numbers or reactions?

And also how to mark that a user has alrady reacted?

thank you

Yes, you can add the previous number of reactions to the items while creating the page. Just write this information in html. Native PHP sdk has helpful tools for this. There is an example of this in the file reactable/native-php-sdk/Reactable/demo.php. And of course you have to disable plugin’ update abilitiy by providing false for update property in this method. (like “update” => false )

But with that plugin won’t update item at all. You can’t update it’s numbers manually.

So yes you can pre-set reaction numbers with native sdk. With that you don’t have to worry about querying the database and preparing valid html markup. SDK will handle this for you.

This plugin’ php side doesn’t touch your users. It’s only keep a user_id in the its own database tables. That means many-to-one relation. You can query this relation with your own sql queries to get which user has reacted to which item.

thank you 2 more questions:

1. Let me clarify my question, we know in our database that user XYZ liked post with ID, how to display that on the page refresh, how to pre set in HTML on page load that the user has liked post (what to put in HTML?)

2. So it is not possible to amend number of likes via code? To simplify imagine I have the plugin attached to an image, and there is a button below, I want on click on that button to raise number of like on the image, is this possible?

1. You can use data-choice attribute in html markup like that; <div href="#" class="reactable" data-toggle="reactable" data-choice="love" data-id="ID-1" data-value="angry" data-service-uri="Reactable/action.php" data-update="yes" data-volume="100" data-mobile-direction="left" data-sound="asset/sound/plup-effect.mp3"> <div class="summary" /> <span class="feelings" /> <a href="reactable/action?id=ID-1&reaction=like&subject-type=null" class="label">Like</a> </div>

2. Yes, the plugin works like this. Suppose you turned off automatic updating. Still, when the button is clicked, a request goes to the server. The reaction is recorded. The current reaction statistics are sent back to the client. The plugin reflects these statistics to the interface. The button view is updated as reacted. Since automatic updating is turned off, updated information cannot be seen unless the button is clicked. But the button still works.

1. Amazing this is exactly what I was looking for, thank you.

2. I think we still have a misunderstanding here, imagine a Facebook post with 30 comments, and each comment has your plugin attached to.

there are 50 people on the page, if someone posts a new comment all other users will get that comment using pusher.com service we use (basically each our page has a listener, we broadcast information that a new comment is posted, all 50 clients catch that information and using JS on the client we insert a new message to the page). We will use the same way of broadcasting reactions, so on the server, we will know that comment with id 123 has a new reaction, we will store that in the database and push it to all clients, what I’m looking for is JS way of updating the counter, something like

var item = $( '#item-1' ).reactable( 'id-1' ); item.feelings.angry=5 item.choice="angry" <- to set that user has select angry

Yes, and item.intro() will re-draw the interface.

Amazing, thank you! Will have a go and let you know if I have any other question

Cheers

You’re welcome. Yes, please let me know. Good luck!

Hi Ismail

We need your help again. We have the page finally up and running, storing votes…

On page refresh, we render the page (so we preload data on the server)

I think the image shows the best

https://www.dropbox.com/s/q71fkvlw58j36tf/example.png?dl=0

As you can see for the first comment we have one vote Love, but the plugin shows 11?

The second one has 2 votes Love (1) and Upset (1) but the plugin shows 12? Also when I hover on the number either 11 or 12 it doesn’t show to summary popup

I guess we are missing something here

Can you please advise? thank you

The first letters of the reaction names are capital. That might be a problem. Before running some test on my setup i want to say it.

Did you used html markup and javascript for initializing the plugin together? If so that might be another problem.

A good catch, here it is how it looks like with lowercase

https://www.dropbox.com/s/fzibyxg4t7o74um/untitled2.png?dl=0

Now I have numbers but still wrong one, not sure from where it’s picking up just HTML markup. this is the only line of code where we call

<script src=”/js/reactable/reactable-1.6.0.js”></script>

Worth mentioning we have about 100 of:

Also on more question is it possible to have different action to server when user removes a reaction (de like a comment) or changes from one reaction to another (e.g. like to love)

My message was cut off, we have about 100 of

<span data-toggle="reactable" class="reactable" id="chat-58681" /> but each span has a unique id

Is there any 8 times reacted item exists on your system ever?

No, here it is from the database Reactions PostId 1 58445 1 58447 1 58561 1 58563 2 58596 1 58674 1 58676 1 58677 2 58678 3 58681

This could be a problem with Pusher. Speaking more specifically, maybe it’s about caching (browser etc.) I have run out of options that I can offer.

Let me at least answer your other question. Yes, you can send a request to an address that changes according to the reaction. To do this, find the method named ping in the core code (reactable.1.6.0.js). This method always works every time an icon is clicked. Each time, the http method to be used is calculated here. You can write a function that takes the http method and generates a page address accordingly.

Hm, I do not think it’s the pusher.

I have created an isolated page for you, a simple HTML page, just your plugin and a bit of our code, can you please have a look https://www.dropbox.com/s/l0zeq1k0fw7kusp/demo.zip?dl=0

If you search for a comment “James was here” you will see it has only Love:1 but it shows 11

can you please advise?

thank you a million

You forget these numbers there. 84,85-86-87 These lines must be zero.

Ah I see, thank you!

No problem. If you have any other problems, please feel free to contact. Good luck.

A new day and a new question

We really struggle with a user changing reaction (e.g from love to Haha), is it possible when data-choice is populated to disable the pop up which shows up when a user hovers over summary icons?

Hello.

You can replace that function to this this.onFeelingsMouseover = function() { $( root ).trigger( 'feelingsHover' ); if( ! this.choice ) root.showAllFeelingsSummary(); }

With that you can disable opaque black backgrounded reaction summary popup for reacted users.

If you want to disable main reactions popup, replace line 298 to

if( root.isOpen || this.choice )

I think these codes are gonna disable the popups.

Man you are amazing! Hopefully the last question, when I do not have anyone liked a post beforehand, when I click on on a reaction it looks like this: https://www.dropbox.com/s/vb2p94x4lv9f520/Untitled.png?dl=0

It doesn’t show up summary and feelings, any idea why?

Well, that might be because of Pusher. Plugin needs total reaction statistics when the “intro” method executed. If Pusher doesn’t send anything back, the plugin won’t have anything to draw.

When you refresh the page does those stuff shows up?

yes it does, what actually our post method should pass back in order to have the plugin correctly re drown?

You firstly open that page https://biliyon.net/reactable/ and give one of them a reaction.

After that open that url in your browser https://biliyon.net/reactable/Reactable/feeder.php?items=ID-12%3A0%2CID-1%3A0%2CID-2%3A0&types=null this page.

And ofcourse your server have to handle that items=item-ID:{TypeIndex},item-ID:{TypeIndex}&types=type1,type2 query mechanism. As you know type and ID values are in the reactions table.

Your server should return this syntax somehow.

Ismail your plugin is amazing, I’ve digged in and it so well documented, I’m really, really impressed. We’ve managed to modified to our needs and it works great!

thank you so much on all your assistance.

For sure the last question

If I want to interact with the reactable object outside of your source file, how to do that?

If we have a span like this <span data-toggle="reactable" class="reactable" id="chat-58678" data-id="58678" data-value="like" data-method="auto" data-service-uri="/pusher/9435/PushReaction" data-mobile-direction="left" />

var item = $( ’#chat-58678’).reactable(); instances the object from scratch and it basically looses all the votes and the selection.

Is it possible to get the current instance of the object and do something like item.options.feelings.like += 1;