A question about Keys

[shawnatdgk]

I've never wrote a code with a "key".
I decided to try.
I am trying to create: if a member clicks a button, their name displays in a div for all members to see.
I've found out how to get the code to display the members name who clicks the button, but only visible for that user. 
I'm wanting it to be visible for everybody. 
I chose to use a Super User key. 

Any information would be appreciated?
Thanks 



<button onclick = "join()">Join</button>
<div class="names_div">
<div class="names">Josh</div>
<div class="names">Ben</div>
<div class="names">Chris</div>
<div class="names">Tim</div>
</div>
$(function () {
var my_key = pb.plugin.key("post_count");
function join() {
my_key.set({
value: "yes"
})
}
currentUser= pb.data("user").name;
key_value= my_key.get();  
names= $(".names_div");
if(key_value) {
names.append(currentUser);
}
})

[Chris]

Jul 25, 2023 0:14:48 GMT -8 shawnatdgk said:

I've never wrote a code with a "key".
I decided to try.
I am trying to create: if a member clicks a button, their name displays in a div for all members to see.
I've found out how to get the code to display the members name who clicks the button, but only visible for that user. 
I'm wanting it to be visible for everybody. 
I chose to use a Super User key. 

Any information would be appreciated?
Thanks 



<button onclick = "join()">Join</button>
<div class="names_div">
<div class="names">Josh</div>
<div class="names">Ben</div>
<div class="names">Chris</div>
<div class="names">Tim</div>
</div>
$(function () {
var my_key = pb.plugin.key("post_count");
function join() {
my_key.set({
value: "yes"
})
}
currentUser= pb.data("user").name;
key_value= my_key.get();  
names= $(".names_div");
if(key_value) {
names.append(currentUser);
}
})

Here are a few issues with the code you may want to address

1. I will assume you've already read the pinned topic containing the Creating Proboards v5 Plugins... PDF primer. One of the callouts in that PDF warns that keys that do not yet exist or have any values in them will still return a functional object with all the methods to set, get, etc., so using that returned object as a truthy test in a conditional would not work since an empty object ({}) will always be truthy.
   
   if(key_value) {

names.append(currentUser);

}
   You end up appending the current user's name to the names list, and in addition, nothing is ever saved to the key so when the page reloads there is no value there that can then be persisted. You would save the current user to the key when button is clicked then on page reload grab the value(s) that were saved to the key and append that (not the current user) to the list
   

   
   

   
   

   
   
   

2. The onclick on that HTML button references a function named join(), which is, in fact, defined within an anonymous function, so it would be scoped only to its anonymous parent function. It would not be available as a function on the global windows object where the onclick would expect to find that function. Clicking that button would give you an error that no join() function exists. [1]
   
   You could add the event handler to the button using the native addEventlistener or jQuery's on or bind method to then take advantage of using the scoped function as the handler yet keep that function protected and not shivering in global space
   
   ...
$('#my_button').on('click',join);
const currentUser= pb.data("user").name;
...

   
   
   

3. The currentUser variable being used in that anonymous function uses no var, let or const keyword so by default is defined as a global variable on the window object thus susceptible to being overwritten by any other code running in the environment that decides to use that same name for their variable as well. You will end up with a hard-to-trace bug that might seem to work perfectly fine on one forum but bugs out on another forum.

   
   

[shawnatdgk]

You're the man Chris! Thank you for always spreading your knowledge!

[shawnatdgk]

Okay I guess I didn't understand as I thought I did. 
The output is still only visible to the current user, not to everyone. 
What am I missing?


<button id = "joinIt">Join</button>

<div class="names_div">
   <div class="names">Cal</div>
   <div class="names">Josh</div>
   <div class="names">Ben</div>
   <div class="names">Chris</div>
   <div class="names">Tim</div>
</div>




$(document).ready(function(){
var my_key = pb.plugin.key("post_counts");
const currentUser= pb.data("user").name;
$("#joinIt").on("click", join);

function join() {
my_key.set({
value: currentUser
})
}

key_value= my_key.get();  
const names= $(".names_div");
names.append(key_value)
})

I also have the default settings set to Read Only for Everyone

[Chris]

SPOILER: Click to show

[Source]

get ( [object_id] )

Returns the value associated with this plugin key for the passed-in object_id.

Parameters

• [object_id] Number Optional
  The ID of the object.

Returns

String|Number|Array|Object

The value of this plugin key stored under this object_id.

[Source]

set ( options )

Sets the plugin key.

Parameters

• options Object
  Additional options:
  • [object_id] Number Optional
    The ID of the object.
  • value String|Number
    The value to be assigned to this key.
  • [success] Function Optional
    The success callback function.
  • [error] Function Optional
    The error callback function.
  • [complete] Function Optional
    The complete callback function.

Since no object_id is being given in the set call, then object_id defaults to the current user's id when we're dealing with user keys (thread_ids when dealing with thread keys and so on...). When you click the button, the user_id of the current_user will be added to complete the call, and you will end up with

{
264279: "shawnatdgk"
}

being stored in the key

This is also the case for the get call whenever you do not specify an object_id, the current_user's user_id will be used so you end up getting only the current_user data from the key. If you want the data for someone other than the current_user then you must provide an object_id, setting that to the user_id of the member whose data you want to retrieve from the key.

{
264279: "shawnatdgk",
65613: "Chris"
}
my_key.get(65613); // returns "Chris"
my_key.get(264279); // returns "shawnatdgk"

A private user key will reveal data only for the current_user and no one else. A super user key will reveal that data to anybody so user1 can see the data stored for user2 and vice-versa, provided the key permissions are set up correctly.

Generally, you would cycle through each mini-profile or tagged username on the page (or preferably the page metadata to avoid theming issues) to grab the user_id of the member and then query the key for that user's stored data. What you are probably expecting, however, is the ability to cycle through each user in the key itself without having to know the user_id for each entry, and you can do that by bypassing the get method and accessing the key data directly via the proboards.plugin.keys.data reference

const names= $(".names_div");
for(let [user_id, user_data] of Object.entries(proboards.plugin.keys.data['post_counts'])){
names.append(`<div class="names" data-id="${user_id}">${user_data}</div>`)
}

^{The above code uses a for..of loop to iterate over all entries in the key by first converting it to an array of [user_id,user_data] pairs, then appending each entry to the names_div.}

Finally, take note that the key is contextually dependent on what is available on the page. If you have a total of 306 members stored in the key, but you are viewing a thread with only 6 members participating, then only the data for those 6 members will be sent to the browser; you won't get an overloaded key with 306 entries on a page with only 6 members represented^[1].

If you wish to have all the data available without Proboards Proboards "meddling" in the context of your data, then the SUPER FORUM key is your huckleberry. Proboards treats it as one big blob and makes no decisions on the data it contains, so it comes with some overhead since you must handle the data formatting yourself.

[shawnatdgk]

Thanks again Chris!! It works.

Although I must say, I think they made this particular area much too convoluted.