New to JS and making Plugins

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Mar 31, 2015 22:02:02 GMT -8 Aeon said:

P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓
Yeah, I found the code a few hours ago and tried using the bits of it for showing the miniprofile but I can't figure out how to get it to work and every time I insert it the entire code stops working.

Did you try properly adding the right amount of ending brackets and parenthesis? and adding the div line he had at the bottom? This code might be what you need. Of course you have to put in your own variables based on the user_id
var minis = $("div.mini-profile");

minis.each(function(){

var user_link = $(this).find("a.user-link[href*='user']:first");

if(user_link && user_link.length){

var user_id_match = user_link.attr("href").match(/\/user\/(\d+)\/?/i);

if(user_id_match && user_id_match.length == 2){

var user_id = parseInt(user_id_match[1]);

if(!user_id){

return;

}

var div =$(this).find("div.info")

$(div).prepend('<span>My Info for this user based on user_id</span><br>')

}}});

[Aeon]

P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓
The code itself just breaks the system for some reason, even with different variables put in. And the code doesn't even show up as an option to view in the firefox debugger.

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Apr 1, 2015 7:08:46 GMT -8 Aeon said:

P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓
The code itself just breaks the system for some reason, even with different variables put in. And the code doesn't even show up as an option to view in the firefox debugger.

You are doing all this talking but I see no example 
You got a website link where I can view it in action?

[Aeon]

P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓
magic-circles.proboards.com
The working version of the code is running.

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Apr 1, 2015 8:32:56 GMT -8 Aeon said:

P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓
magic-circles.proboards.com
The working version of the code is running.

Code seems to work fine. Maybe it's where you were putting it

[Aeon]

P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓
Maybe, but I see an issue. On my end there are the appropriate values showing in the mini profile but your screenshot shows them as undefined.

I'm just very confused by why every time I try to get it put in there it makes it not show up in any miniprofile.

[Aeon]

//For pulling the information from the user interface auto forms
var magicstats = pb.plugin.get('magic_stats').settings.member_stats
var userMagic = {}
for(a=0;a<magicstats.length;a++) {
if(pb.data('user').id==parseInt(magicstats[a].name)) {
userMagic = {
userName: magicstats[a].name,
statMan: magicstats[a].mana,
statIng: magicstats[a].ingenuity,
statDex: magicstats[a].dexterity,
statFoc: magicstats[a].focus,
statKno: magicstats[a].knowledge,
statEnd: magicstats[a].endurance
};
}
}

//Variable to set up the various modifier amounts
//Double numbers for the format 11-12: 0
var statModif = [ '-6', '-5', '-5', '-4', '-4', '-3', '-3', '-2', '-2', '-1', '-1', ' 0', ' 0', '+1', '+1', '+2', '+2', '+3', '+3', '+4', '+4', '+5', '+5', '+6', '+6', '+7', '+7', '+8', '+8', '+9', '+9', '+10', '+10', '+11', '+11', '+12', '+12', '+13', '+13', '+14', '+14', '+15', '+15', '+16', '+16', '+17', '+17' ];

//Variables to set each modifier amount to its stat
var manMod = statModif[userMagic.statMan];
var ingMod = statModif[userMagic.statIng];
var dexMod = statModif[userMagic.statDex];
var focMod = statModif[userMagic.statFoc];
var knoMod = statModif[userMagic.statKno];
var endMod = statModif[userMagic.statEnd];

//Setting up the final variables of 'stat [modifier]'
var statMan, statIng, statDex, statFoc, statKno, statEnd;

statMan = userMagic.statMan + " [" + manMod + "]";
statIng = userMagic.statIng + " [" + ingMod + "]";
statDex = userMagic.statDex + " [" + dexMod + "]";
statFoc = userMagic.statFoc + " [" + focMod + "]";
statKno = userMagic.statKno + " [" + knoMod + "]";
statEnd = userMagic.statEnd + " [" + endMod + "]";

//Make the final result writable to a document as a div class tag
$(document).ready(function() {
$('#magicStats').html('<table class="magicStats"><tr><td class="header">MAN|</td><td class="statsBox">' + statMan + '</td><td class="spacer"></td><td class="header">FOC|</td><td class="statsBox">' + statFoc + '</td></tr><tr><td class="header">ING|</td><td class="statsBox">' + statIng + '</td><td class="spacer"></td><td class="header">KNO|</td><td class="statsBox">' + statKno + '</td></tr><tr><td class="header">DEX|</td><td class="statsBox">' + statDex + '</td><td class="spacer"></td><td class="header">END|</td><td class="statsBox">' + statEnd + '</td></tr></table>');
});

/*var minis = $("div.mini-profile");
minis.each(function(){
var statsUserLink= $(this).find("a.user-link[href*='user']:first");
if(statsUserLink && statsUserLink.length){
var userIdMatch = statsUserLink.attr("href").match(/\/user\/(\d+)\/?/i);
if(userIdMatch && userIdMatch.length == 2){
var userId = parseInt(userIdMatch[1]);
if(!userId){
return;
}
var div = $(this).find("div.info")
$(div).prepend('<table class="magicStats"><tr><td class="header">MAN|</td><td class="statsBox">' + statMan + '</td><td class="spacer"></td><td class="header">FOC|</td><td class="statsBox">' + statFoc + '</td></tr><tr><td class="header">ING|</td><td class="statsBox">' + statIng + '</td><td class="spacer"></td><td class="header">KNO|</td><td class="statsBox">' + statKno + '</td></tr><tr><td class="header">DEX|</td><td class="statsBox">' + statDex + '</td><td class="spacer"></td><td class="header">END|</td><td class="statsBox">' + statEnd + '</td></tr></table>')
}
}
});*/

That is the entirety of the code I currently have in the plugin. The bit that makes it stop showing up has been commented out so it's there but not functioning. idk what I'm doing wrong.

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Apr 1, 2015 9:48:46 GMT -8 Aeon said:

//For pulling the information from the user interface auto forms
var magicstats = pb.plugin.get('magic_stats').settings.member_stats
var userMagic = {}
for(a=0;a<magicstats.length;a++) {
if(pb.data('user').id==parseInt(magicstats[a].name)) {
userMagic = {
userName: magicstats[a].name,
statMan: magicstats[a].mana,
statIng: magicstats[a].ingenuity,
statDex: magicstats[a].dexterity,
statFoc: magicstats[a].focus,
statKno: magicstats[a].knowledge,
statEnd: magicstats[a].endurance
};
}
}

//Variable to set up the various modifier amounts
//Double numbers for the format 11-12: 0
var statModif = [ '-6', '-5', '-5', '-4', '-4', '-3', '-3', '-2', '-2', '-1', '-1', ' 0', ' 0', '+1', '+1', '+2', '+2', '+3', '+3', '+4', '+4', '+5', '+5', '+6', '+6', '+7', '+7', '+8', '+8', '+9', '+9', '+10', '+10', '+11', '+11', '+12', '+12', '+13', '+13', '+14', '+14', '+15', '+15', '+16', '+16', '+17', '+17' ];

//Variables to set each modifier amount to its stat
var manMod = statModif[userMagic.statMan];
var ingMod = statModif[userMagic.statIng];
var dexMod = statModif[userMagic.statDex];
var focMod = statModif[userMagic.statFoc];
var knoMod = statModif[userMagic.statKno];
var endMod = statModif[userMagic.statEnd];

//Setting up the final variables of 'stat [modifier]'
var statMan, statIng, statDex, statFoc, statKno, statEnd;

statMan = userMagic.statMan + " [" + manMod + "]";
statIng = userMagic.statIng + " [" + ingMod + "]";
statDex = userMagic.statDex + " [" + dexMod + "]";
statFoc = userMagic.statFoc + " [" + focMod + "]";
statKno = userMagic.statKno + " [" + knoMod + "]";
statEnd = userMagic.statEnd + " [" + endMod + "]";

//Make the final result writable to a document as a div class tag
$(document).ready(function() {
$('#magicStats').html('<table class="magicStats"><tr><td class="header">MAN|</td><td class="statsBox">' + statMan + '</td><td class="spacer"></td><td class="header">FOC|</td><td class="statsBox">' + statFoc + '</td></tr><tr><td class="header">ING|</td><td class="statsBox">' + statIng + '</td><td class="spacer"></td><td class="header">KNO|</td><td class="statsBox">' + statKno + '</td></tr><tr><td class="header">DEX|</td><td class="statsBox">' + statDex + '</td><td class="spacer"></td><td class="header">END|</td><td class="statsBox">' + statEnd + '</td></tr></table>');
});

/*var minis = $("div.mini-profile");
minis.each(function(){
var statsUserLink= $(this).find("a.user-link[href*='user']:first");
if(statsUserLink && statsUserLink.length){
var userIdMatch = statsUserLink.attr("href").match(/\/user\/(\d+)\/?/i);
if(userIdMatch && userIdMatch.length == 2){
var userId = parseInt(userIdMatch[1]);
if(!userId){
return;
}
var div = $(this).find("div.info")
$(div).prepend('<table class="magicStats"><tr><td class="header">MAN|</td><td class="statsBox">' + statMan + '</td><td class="spacer"></td><td class="header">FOC|</td><td class="statsBox">' + statFoc + '</td></tr><tr><td class="header">ING|</td><td class="statsBox">' + statIng + '</td><td class="spacer"></td><td class="header">KNO|</td><td class="statsBox">' + statKno + '</td></tr><tr><td class="header">DEX|</td><td class="statsBox">' + statDex + '</td><td class="spacer"></td><td class="header">END|</td><td class="statsBox">' + statEnd + '</td></tr></table>')
}
}
});*/

That is the entirety of the code I currently have in the plugin. The bit that makes it stop showing up has been commented out so it's there but not functioning. idk what I'm doing wrong.

So you are trying to run your old code and the new one
What your saying in this code is that you want to run your code when the document is ready
And you want to run the new code when the document hasn't finished loading
Of course this is a problem.


//For pulling the information from the user interface auto forms

var magicstats = pb.plugin.get('magic_stats').settings.member_stats

var userMagic = {}

for(a=0;a<magicstats.length;a++) {

if(pb.data('user').id==parseInt(magicstats[a].name)) {

userMagic = {

userName: magicstats[a].name,

statMan: magicstats[a].mana,

statIng: magicstats[a].ingenuity,

statDex: magicstats[a].dexterity,

statFoc: magicstats[a].focus,

statKno: magicstats[a].knowledge,

statEnd: magicstats[a].endurance

};

}

}



//Variable to set up the various modifier amounts

//Double numbers for the format 11-12: 0

var statModif = [ '-6', '-5', '-5', '-4', '-4', '-3', '-3', '-2', '-2', '-1', '-1', ' 0', ' 0', '+1', '+1', '+2', '+2', '+3', '+3', '+4', '+4', '+5', '+5', '+6', '+6', '+7', '+7', '+8', '+8', '+9', '+9', '+10', '+10', '+11', '+11', '+12', '+12', '+13', '+13', '+14', '+14', '+15', '+15', '+16', '+16', '+17', '+17' ];



//Variables to set each modifier amount to its stat

var manMod = statModif[userMagic.statMan];

var ingMod = statModif[userMagic.statIng];

var dexMod = statModif[userMagic.statDex];

var focMod = statModif[userMagic.statFoc];

var knoMod = statModif[userMagic.statKno];

var endMod = statModif[userMagic.statEnd];



//Setting up the final variables of 'stat [modifier]'

var statMan, statIng, statDex, statFoc, statKno, statEnd;



statMan = userMagic.statMan + " [" + manMod + "]";

statIng = userMagic.statIng + " [" + ingMod + "]";

statDex = userMagic.statDex + " [" + dexMod + "]";

statFoc = userMagic.statFoc + " [" + focMod + "]";

statKno = userMagic.statKno + " [" + knoMod + "]";

statEnd = userMagic.statEnd + " [" + endMod + "]";



//Make the final result writable to a document as a div class tag

$(document).ready(function() {



var minis = $("div.mini-profile");

minis.each(function(){

var statsUserLink= $(this).find("a.user-link[href*='user']:first");

if(statsUserLink && statsUserLink.length){

var userIdMatch = statsUserLink.attr("href").match(/\/user\/(\d+)\/?/i);

if(userIdMatch && userIdMatch.length == 2){

var userId = parseInt(userIdMatch[1]);

if(!userId){

return;

}

var div = $(this).find("div.info")

$(div).prepend('<table class="magicStats"><tr><td class="header">MAN|</td><td class="statsBox">' + statMan + '</td><td class="spacer"></td><td class="header">FOC|</td><td class="statsBox">' + statFoc + '</td></tr><tr><td class="header">ING|</td><td class="statsBox">' + statIng + '</td><td class="spacer"></td><td class="header">KNO|</td><td class="statsBox">' + statKno + '</td></tr><tr><td class="header">DEX|</td><td class="statsBox">' + statDex + '</td><td class="spacer"></td><td class="header">END|</td><td class="statsBox">' + statEnd + '</td></tr></table>')

}

}

});



});
//moved this line down
As you see I moved the closing brackets for document.ready to after all the code we wish to run AFTER the webpage has set up its containers
The reason it's saying that it's undefined is because you have to change your original code so that 
pb.data('user').id
is replaced with userID.
Which also means moving some code before your prepend and after your 

if(!userId){



return;



}
statement

[Aeon]

P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓
Sorry I wasn't managing to process or pretty much comprehend any of the code yesterday. Had some drama with my bf not taking his meds so my mind really couldn't focus on code.

Anyway, it's working now, except it isn't linking to the element I want it to link to for custom placement.
//Make the final result writable to a document as a div class tag
$(document).ready(function() {

var minis = $("div.mini-profile");

minis.each(function(){
var statsUserLink= $(this).find("a.user-link[href*='user']:first");

if(statsUserLink && statsUserLink.length){

var userIdMatch = statsUserLink.attr("href").match(/\/user\/(\d+)\/?/i);
if(userIdMatch && userIdMatch.length == 2){

var userId = parseInt(userIdMatch[1]);
if(!userId){
return;
}

//For pulling the information from the user interface auto forms
var magicstats = pb.plugin.get('magic_stats').settings.member_stats;
var userMagic = {};
for(a=0;a<magicstats.length;a++) {
if(userId==parseInt(magicstats[a].name)) {
userMagic = {
userName: magicstats[a].name,
statMan: magicstats[a].mana,
statIng: magicstats[a].ingenuity,
statDex: magicstats[a].dexterity,
statFoc: magicstats[a].focus,
statKno: magicstats[a].knowledge,
statEnd: magicstats[a].endurance
};
}
}

//Variable to set up the various modifier amounts
//Double numbers for the format 11-12: 0
var statModif = [ '-6', '-5', '-5', '-4', '-4', '-3', '-3', '-2', '-2', '-1', '-1', ' 0', ' 0', '+1', '+1', '+2', '+2', '+3', '+3', '+4', '+4', '+5', '+5', '+6', '+6', '+7', '+7', '+8', '+8', '+9', '+9', '+10', '+10', '+11', '+11', '+12', '+12', '+13', '+13', '+14', '+14', '+15', '+15', '+16', '+16', '+17', '+17' ];

//Variables to set each modifier amount to its stat
var manMod = statModif[userMagic.statMan];
var ingMod = statModif[userMagic.statIng];
var dexMod = statModif[userMagic.statDex];
var focMod = statModif[userMagic.statFoc];
var knoMod = statModif[userMagic.statKno];
var endMod = statModif[userMagic.statEnd];

//Setting up the final variables of 'stat [modifier]'
var statMan, statIng, statDex, statFoc, statKno, statEnd;

statMan = userMagic.statMan + " [" + manMod + "]";
statIng = userMagic.statIng + " [" + ingMod + "]";
statDex = userMagic.statDex + " [" + dexMod + "]";
statFoc = userMagic.statFoc + " [" + focMod + "]";
statKno = userMagic.statKno + " [" + knoMod + "]";
statEnd = userMagic.statEnd + " [" + endMod + "]";

var div = $(this).find("div.info")

$(div).prepend('<table class="magicStats"><tr><td class="header">MAN|</td><td class="statsBox">' + statMan + '</td><td class="spacer"></td><td class="header">FOC|</td><td class="statsBox">' + statFoc + '</td></tr><tr><td class="header">ING|</td><td class="statsBox">' + statIng + '</td><td class="spacer"></td><td class="header">KNO|</td><td class="statsBox">' + statKno + '</td></tr><tr><td class="header">DEX|</td><td class="statsBox">' + statDex + '</td><td class="spacer"></td><td class="header">END|</td><td class="statsBox">' + statEnd + '</td></tr></table>')
}
}
});
});

Here's the tag I want it to link to so I can control where it goes
<span id="magicStats"></span>
I've tried changing the .find("div.info") part but that just makes it not show up at all again.

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Apr 1, 2015 22:03:55 GMT -8 Aeon said:

P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓
Sorry I wasn't managing to process or pretty much comprehend any of the code yesterday. Had some drama with my bf not taking his meds so my mind really couldn't focus on code.

Anyway, it's working now, except it isn't linking to the element I want it to link to for custom placement.
//Make the final result writable to a document as a div class tag
$(document).ready(function() {

var minis = $("div.mini-profile");

minis.each(function(){
var statsUserLink= $(this).find("a.user-link[href*='user']:first");

if(statsUserLink && statsUserLink.length){

var userIdMatch = statsUserLink.attr("href").match(/\/user\/(\d+)\/?/i);
if(userIdMatch && userIdMatch.length == 2){

var userId = parseInt(userIdMatch[1]);
if(!userId){
return;
}

//For pulling the information from the user interface auto forms
var magicstats = pb.plugin.get('magic_stats').settings.member_stats;
var userMagic = {};
for(a=0;a<magicstats.length;a++) {
if(userId==parseInt(magicstats[a].name)) {
userMagic = {
userName: magicstats[a].name,
statMan: magicstats[a].mana,
statIng: magicstats[a].ingenuity,
statDex: magicstats[a].dexterity,
statFoc: magicstats[a].focus,
statKno: magicstats[a].knowledge,
statEnd: magicstats[a].endurance
};
}
}

//Variable to set up the various modifier amounts
//Double numbers for the format 11-12: 0
var statModif = [ '-6', '-5', '-5', '-4', '-4', '-3', '-3', '-2', '-2', '-1', '-1', ' 0', ' 0', '+1', '+1', '+2', '+2', '+3', '+3', '+4', '+4', '+5', '+5', '+6', '+6', '+7', '+7', '+8', '+8', '+9', '+9', '+10', '+10', '+11', '+11', '+12', '+12', '+13', '+13', '+14', '+14', '+15', '+15', '+16', '+16', '+17', '+17' ];

//Variables to set each modifier amount to its stat
var manMod = statModif[userMagic.statMan];
var ingMod = statModif[userMagic.statIng];
var dexMod = statModif[userMagic.statDex];
var focMod = statModif[userMagic.statFoc];
var knoMod = statModif[userMagic.statKno];
var endMod = statModif[userMagic.statEnd];

//Setting up the final variables of 'stat [modifier]'
var statMan, statIng, statDex, statFoc, statKno, statEnd;

statMan = userMagic.statMan + " [" + manMod + "]";
statIng = userMagic.statIng + " [" + ingMod + "]";
statDex = userMagic.statDex + " [" + dexMod + "]";
statFoc = userMagic.statFoc + " [" + focMod + "]";
statKno = userMagic.statKno + " [" + knoMod + "]";
statEnd = userMagic.statEnd + " [" + endMod + "]";

var div = $(this).find("div.info")

$(div).prepend('<table class="magicStats"><tr><td class="header">MAN|</td><td class="statsBox">' + statMan + '</td><td class="spacer"></td><td class="header">FOC|</td><td class="statsBox">' + statFoc + '</td></tr><tr><td class="header">ING|</td><td class="statsBox">' + statIng + '</td><td class="spacer"></td><td class="header">KNO|</td><td class="statsBox">' + statKno + '</td></tr><tr><td class="header">DEX|</td><td class="statsBox">' + statDex + '</td><td class="spacer"></td><td class="header">END|</td><td class="statsBox">' + statEnd + '</td></tr></table>')
}
}
});
});

Here's the tag I want it to link to so I can control where it goes
<span id="magicStats"></span>
I've tried changing the .find("div.info") part but that just makes it not show up at all again.

Have you tried changing var div = $(this).find("div.info") to:
var div = $(this).find('#magicStats')

When you want to select an element by id= You use a # to show that you want to check ids
When you want to select an element by class= You use a . to show that you want to check class names
This is true for jquery selectors and css selectors
It looks through the structures through various symbols.
Saying $(this) will select whatever you are currently looping in. .find() finds the next occurance
div or span would find the next span
and span#magicStats would find the next span tag with that id
span.magicStats would find the next span with a class of magicStats

so you can combine these selectors to be really specific or be really general to target specifically what you want in the DOM. (generated webpage elements)

It's rare to find a female that takes the initiative to start a website and have a social life. I'm proud of your accomplishments. Especially when you put others first. Don't get discouraged when coding things. As you work with it, things will start to click. 

[Aeon]

P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓
Well I took all the programming classes my high school had, and managed to take some college game design courses, but the coding classes never went over Javascript, just the C languages (and the slight differences between the two infuriate me to no end)

When I'd tried changing it I was copying the $(this).find("a.user-link[href*='user']:first") format so that's probably where I was going wrong xD
I've done enough CSS coding to know the selector character for class and id (my bf breaks code by looking at it so every site he makes ends up with me making the skin and layout)

Changing it directly to the id selector worked, so now it's running perfectly as intended. Thank you so much for your patience xD