First Time Plugin Coding/ Tutorial Wanted

[Jordan]

Just bear with me, this explanation is going to be a little detailed.

JQuery is a very robust Javascript library, so it will handle a lot of developer mistakes gracefully so it doesn't crash and error out. If you look at the description of the html() method on JQuery's website, you'll see that there are three different definitions:

html()
html( htmlString )
html( function(index, oldhtml) )

The first returns the element's html so you can see it, the second (what you are using) replaces the element's html to whatever you want, and the third allows you to define a function that gets executed on each item the method is called on. Since you were using the second definition, JQuery expects a string of text. However, in Javascript, you can pass any type of variable or object to any function, and it's up to the programmer to make sure that what you passed is acceptable. In this case, rather than passing a string, you passed a JQuery object. The reason it still worked is because the JQuery developers actually coded the html( htmlString ) method to handle the case where a JQuery object gets passed instead and have it converted to html. They did some extra work.

Now, the reason why stat_str didn't appear is because the JQuery developers did some extra work for you again. You created an invalid JQuery object, because you can't create a JQuery object with a random string. If you pass a string to a JQuery object, it needs to be an html element or some type of selector. The <br /> is an html element that it was able to parse and understand, but the stat_str was just a random string. It wasn't an html element so it ignored it for you, rather than give an error.

Hope that makes sense, but if not, let me know.

Also, one quick note about JQuery that I'd like to mention since I showed you html( function(index, oldhtml) ) above: You actually don't have to call each(). Your code could actually be shortened to this:

function display_stats()
{
    $(".mini-profile div.info").append($("<span></span>").html("<br />Hello World"));
}

$(document).ready(function() {
    display_stats();
});

The thing to realize is that when you use a selector like $(".mini-profile div.info"), it contains all of the elements that match that description on the page, and any method you call on it will effect all of those elements. We use each() if we want to treat some of the element's differently. In your case, you are treating them all the same by adding "<br />Hello World", so you actually don't need to use each(). The  html( function(index, oldhtml) ) method is just like each() but more specific for html scenarios. The function you pass to it will be called on each item that was selected, and it basically allows you to do different things to each of the selected elements. If you wanted to do the same thing to all the elements, then you would just use html( htmlString ).

[Aedo]

That makes a lot of good sense. thanks for taking the time to fill me in.

Onto JSON and key questions.

So what I'm looking to do for the next goalpost is to create five ring values plus an xp value that can be tracked per user. These are the actual RPG stats that we're looking to use. I then want to store and get those values at will. For now, I'm mostly concerned with the XP stat as that will be the one that varies the most, as it will go up with each post a user makes. and then later when we make our XP store, it will go up and down while people are shopping and buying stats. So I want to grab the XP value, change it, and then put it back in the JSON object. At least I think that's what I'm looking to do rather than set the whole thing up as a basic array.

If I'm not mistaken, I should be able to create a JSON object and then parse it easily enough. Let's say that I've used the following:

var rings= {
"Earth":""
"Air":""
"Water":""
"Fire":""
"Void":""
"XP":""
};

var user_rings = JSON.parse(rings);
Then I can do crazy things for no good reason such as:

alert(user_rings.Air);
And that should alert me back the (currently empty) value for the Air ring stat. Then I ought to be able to put it into a key using the proboards.plugin.key.set method. As I understand it, if i have named my key "rings_key" I will want to:

proboards.plugin.key.set("rings_key","user_rings");
 
and this will put the JSON object into the rings key to be stored per user and then taken out whenever I want to change those values. I think my question is, having done all this, how do I access those stored values individually? Is that a thing? Can I just use the .get method on individual pieces of the JSON object and then reset them? I'm not entirely sure where to go from this point.

[Tim Camara]

For objects, if you have multiple values, they need to be separated with a comma:

var rings = {
"Earth":"",
"Air":"",
"Water":"",
"Fire":"",
"Void":"",
"XP":""
};
After your object is created, you don't need to parse it, since it's already a JavaScript object.  You can just start accessing things right away:

var rings = {
"Earth":"",
"Air":"",
"Water":"",
"Fire":"",
"Void":"",
"XP":""
};

rings.Air = 'test';
alert(rings.Air); // will alert 'test'
If you want to store this to a key, the best way to do so is to follow the new developer API:

var rings = {
"Earth":"",
"Air":"",
"Water":"",
"Fire":"",
"Void":"",
"XP":""
};

rings.Air = 'test';
alert(rings.Air); // will alert 'test'

pb.plugin.key('YOUR_KEY_NAME_HERE').set({ object_id: YOUR_OBJECT_ID_HERE, value: rings });
In this example, we're setting a (non-super-forum) key.  The object_id is used to be able to set multiple values for a single key.  For something like this, you'd probably use something like the user_id of the person whose stats these are.  

Edit: to retrieve objects from the key we just created, you can do something like this:

var stored_rings = pb.plugin.key('YOUR_KEY_NAME_HERE').get(YOUR_SAME_OBJECT_ID_HERE);
// stored rings will now contain the same thing as rings did previously
// so now we can do this:
alert(stored.rings.Air); // will alert the 'Air' value of our key

[Aedo]

So let's presume I am using a super user key. do I still need to define the object_id? Doesn't it just default to the current user, or did I misread that somewhere else entirely? If I do want to define the current user (Which I think I do) how would I go about doing that?

Once I get that worked out I should be able to tell all the displayed rings to pull from 'stored_rings'. From there, is it possible to change individual values within the key or do I need to rewrite the whole thing every time there's an update. I'm thinking in particular that I would like to update the XP value whenever someone posts.

Peter's monetary system uses something like this.

subtract: function(e, t, n) {
   var r = t ? "b" : "m";
   this.data[r] -= this.format(e), n || yootil.key.set("pixeldepth_money", this.data, null, true)
},
add: function(e, t, n) {
   var r = t ? "b" : "m";
   this.data[r] += this.format(e), n || yootil.key.set("pixeldepth_money", this.data, null, true)
}
I presume I could do something similar.

function up_xp(){
   var r = rings.xp; //or something similar?
   this.data[r] += xp_per_post;
   pb.plugin.key("xpr_stat_line").set(????????) //I presume this.data goes in those question marks somewhere.
}

[Wormopolis]

object_id is going to depend on the type of key. user and super user keys would reference by the user id number. post keys are by post id. thread keys by thread id. etc...