To Do List Plugin - Help needed

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

$(".checkboxy").click(function() {
$(this).attr("disabled", true);
pb.plugin.key('ToDoListKey').set({ value:{'box1':1} /*This also saves the key!*/
});

First off every function has a start an end ([{'" symbolzz
So if you start one you finish one.
Anything inside runs like an if statement
so if someone clicks a checkbox
we disable the crapper and then set the key to it's new value which is somehow modified from it's old value depending on what box is clicked.
pb.plugin.key('ToDoListKey').get() will get the old value of the key.
so you are

$(".checkboxy").click(function() {

$(this).attr("disabled", true);

var key = pb.plugin.key('ToDoListKey').get() //which probably still has {'box1':1}
var checkbox = $(this).attr('customID')
key[checkbox]=1
//INSIDE YOUR KEY VARIABLE WILL LOOK LIKE {'box1':1, 'customID':1}
pb.plugin.key('ToDoListKey').set({ value:key}) /*This also saves the key!*/

}); 

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

Apr 25, 2016 12:08:21 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

$(".checkboxy").click(function() {
$(this).attr("disabled", true);
pb.plugin.key('ToDoListKey').set({ value:{'box1':1} /*This also saves the key!*/
});

First off every function has a start an end ([{'" symbolzz
So if you start one you finish one.
Anything inside runs like an if statement
so if someone clicks a checkbox
we disable the crapper and then set the key to it's new value which is somehow modified from it's old value depending on what box is clicked.
pb.plugin.key('ToDoListKey').get() will get the old value of the key.
so you are

$(".checkboxy").click(function() {

$(this).attr("disabled", true);

var key = pb.plugin.key('ToDoListKey').get() //which probably still has {'box1':1}
var checkbox = $(this).attr('customID')
key[checkbox]=1
//INSIDE YOUR KEY VARIABLE WILL LOOK LIKE {'box1':1, 'customID':1}
pb.plugin.key('ToDoListKey').set({ value:key}) /*This also saves the key!*/

}); 

customID is something you are going to need to set in your append function as html
This is making your own new attribute for the checkboxes
Now to explain a little code flow 
Everything in a code goes in a sequential order until it's complete.
So you start at the event document.ready()
Then that runs your functions that then runs more functions until it's finished
You dont want to set your key at anytime during that process
You want to find a new "event" to start at
so you start at the .click() event for your checkboxes 
that then runs your disable this checkbox
get the key
modify the key data
the set the key once more
(which you aren't allowed to set a key on document ready, which is why we do it on click)

[Boy_Wonder]

Apr 25, 2016 12:12:11 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

Apr 25, 2016 12:08:21 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

$(".checkboxy").click(function() {
$(this).attr("disabled", true);
pb.plugin.key('ToDoListKey').set({ value:{'box1':1} /*This also saves the key!*/
});

First off every function has a start an end ([{'" symbolzz
So if you start one you finish one.
Anything inside runs like an if statement
so if someone clicks a checkbox
we disable the crapper and then set the key to it's new value which is somehow modified from it's old value depending on what box is clicked.
pb.plugin.key('ToDoListKey').get() will get the old value of the key.
so you are

$(".checkboxy").click(function() {

$(this).attr("disabled", true);

var key = pb.plugin.key('ToDoListKey').get() //which probably still has {'box1':1}
var checkbox = $(this).attr('customID')
key[checkbox]=1
//INSIDE YOUR KEY VARIABLE WILL LOOK LIKE {'box1':1, 'customID':1}
pb.plugin.key('ToDoListKey').set({ value:key}) /*This also saves the key!*/

}); 

customID is something you are going to need to set in your append function as html
This is making your own new attribute for the checkboxes
Now to explain a little code flow 
Everything in a code goes in a sequential order until it's complete.
So you start at the event document.ready()
Then that runs your functions that then runs more functions until it's finished
You dont want to set your key at anytime during that process
You want to find a new "event" to start at
so you start at the .click() event for your checkboxes 
that then runs your disable this checkbox
get the key
modify the key data
the set the key once more
(which you aren't allowed to set a key on document ready, which is why we do it on click)

Right - this is why I was asking would the ID be doable as the thingy in the for loop - checkboxes need unique IDs

//Document Ready

$( document ).ready(function() {

   var toDoList = pb.plugin.get('to_do_list').settings;

   //Problems to Fix p1 - create various tabs for the check lists as needed dynamically

   var tab1lngthinfo = toDoList.unapp_chkbox;

   console.log(tab1lngthinfo.length);

      //P5 - Output all information (done...ish)

 $("#ToDoTest").append("<div class='container'><div class='title-bar'><h2>To Do List(s)</h2></div><div class='content cap-bottom' id='toDoBox'></div>");

       $("#toDoBox").append("<div id='tabs'><ul><li><a href='#unapp'>Unapproved Members To Do List</a></li><li><a href='#daily'>Daily To Do List</a></li></ul></div><div id='unapp'>If you're a new member please fill in the checkboxes to help yourself get adjusted and settled in!</div><div id='daily'>Eventually the Daily Checkbox will come here</div>");

   //P2 - Generate checkboxes to mark if a task has been done or not

   for(a=0;a<pb.plugin.get('to_do_list').settings.unapp_chkbox.length;a++){

   $('#unapp').append('<input type="checkbox" id="'+pb.plugin.get('to_do_list').settings.unapp_chkbox[a].checkbox_id+'"class="checkboxy"value="'+pb.plugin.get('to_do_list').settings.unapp_chkbox[a].checkbox_label+'" ><label for="'+pb.plugin.get('to_do_list').settings.unapp_chkbox[a].checkbox_id+'">'+pb.plugin.get('to_do_list').settings.unapp_chkbox[a].checkbox_label+'<br /></label></form>');

   }

   $(".checkboxy").click(function() {

     $(this).attr("disabled", true);

});

pb.plugin.key('ToDoListKey').set({ value:{'box1':1} /*This also saves the key!*/

                                        });

   //P3 - Check if all checkboxes have been ticked and store to key. Each tickbox needs to store that its been ticked



   $('.checkboxy').each(function(){

var checked = $(this).is(':checked')

if(checked){

$(this).prop('disabled',true)

}

})

   

                                       

   //P4 - API to send money to users (maybe give a trophy if possible? Need to talk to Peter

});



So this is the full code - so would I be okay to set customID as 

pb.plugin.get('to_do_list').settings.unapp_chkbox[a].checkbox_id this?

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

id="'+pb.plugin.get('to_do_list').settings.unapp_chkbox[a].checkbox_id+'"
this is where you are going to do it
however a simple checkbox_id number will not suffice as an id of any sort
id= must be unique otherwise your plugin will break with poorly coded javascript snippets from the good Lord knows where
so id="'+pb.plugin.get('to_do_list').settings.unapp_chkbox[/a][a].checkbox_id+'" is a bad idea
id="toDo'+pb.plugin.get('to_do_list').settings.unapp_chkbox[/a][a].checkbox_id+'" would be a good idea
so you would use
var checkbox = $(this).attr('id')
key[checkbox]=1
and the output would be {'toDo1':1} in your key
which is acceptable
(for syntax reasons and simpleness never start an object name with a number)
(which is what pb.plugin.get('to_do_list').settings.unapp_chkbox[/a][a].checkbox_id would end up being if the user specifie/a]s their own)[[/a]

[Boy_Wonder]

ahhh!

Okay now I'm going to have to quote that so I can see where the 'a's fall in

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

Apr 25, 2016 12:22:14 GMT -8 Boy_Wonder said:

ahhh!

Okay now I'm going to have to quote that so I can see where the 'a's fall in

Yeah I murdered it. To be fair the code you quoted me has like 3 errors that won't make it run as you intend it anyway.
But I don't think it will throw an error. It's just your logic is flawed.

[Boy_Wonder]

Apr 25, 2016 12:20:53 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

var checkbox = $(this).attr('id')
key[checkbox]=1
and the output would be {'toDo1':1} in your key


Okay no shame here - you lost me at this part, can I have some comments here please? Or at least break it down as to how you got from codey stuff to output 

[Quozzo]

Apr 25, 2016 11:49:36 GMT -8 Boy_Wonder said:

All right you lost me there

$(".checkboxy").click(function() {
     $(this).attr("disabled", true);
});
pb.plugin.key('ToDoListKey').set({ value:{'box1':1} /*This also saves the key!*/
                                        });

Setting the key should be in the click event handler? Unless you always want the key set regardless.

wow sorry, was away for a few minutes and the convo kept on going XD

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

Apr 25, 2016 12:27:11 GMT -8 Boy_Wonder said:

Apr 25, 2016 12:20:53 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

var checkbox = $(this).attr('id')
key[checkbox]=1
and the output would be {'toDo1':1} in your key


Okay no shame here - you lost me at this part, can I have some comments here please? Or at least break it down as to how you got from codey stuff to output 

You set the Id so I got it with attr
Then I took the key object and made a property with the same name as the I'd
And set its value to 1
So it looks like what I said

[Boy_Wonder]

Okay so is this right or have I messed something up somewhere (it's working but)

//Document Ready
$( document ).ready(function() {
   var toDoList = pb.plugin.get('to_do_list').settings;
   //Problems to Fix p1 - create various tabs for the check lists as needed dynamically
   var tab1lngthinfo = toDoList.unapp_chkbox;
   console.log(tab1lngthinfo.length);
      //P5 - Output all information (done...ish)
 $("#ToDoTest").append("<div class='container'><div class='title-bar'><h2>To Do List(s)</h2></div><div class='content cap-bottom' id='toDoBox'></div>");
       $("#toDoBox").append("<div id='tabs'><ul><li><a href='#unapp'>Unapproved Members To Do List</a></li><li><a href='#daily'>Daily To Do List</a></li></ul></div><div id='unapp'>If you're a new member please fill in the checkboxes to help yourself get adjusted and settled in!</div><div id='daily'>Eventually the Daily Checkbox will come here</div>");
   //P2 - Generate checkboxes to mark if a task has been done or not
   for(a=0;a<pb.plugin.get('to_do_list').settings.unapp_chkbox.length;a++){
   $('#unapp').append('<input type="checkbox" id="'+pb.plugin.get('to_do_list').settings.unapp_chkbox[a].checkbox_id+'"class="checkboxy"value="'+pb.plugin.get('to_do_list').settings.unapp_chkbox[a].checkbox_label+'" ><label for="'+pb.plugin.get('to_do_list').settings.unapp_chkbox[a].checkbox_id+'">'+pb.plugin.get('to_do_list').settings.unapp_chkbox[a].checkbox_label+'<br /></label></form>');
   }
   $(".checkboxy").click(function() {
     $(this).attr("disabled", true);
       var checkbox = $(this).attr('id')
       key[checkbox]=1
pb.plugin.key('ToDoListKey').set({ value:{'box1':1} /*This also saves the key!*/
                                        });
});

   //P3 - Check if all checkboxes have been ticked and store to key. Each tickbox needs to store that its been ticked

   $('.checkboxy').each(function(){
var checked = $(this).is(':checked')
if(checked){
$(this).prop('disabled',true)
}
})
   
                                       
   //P4 - API to send money to users (maybe give a trophy if possible? Need to talk to Peter
});

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

Apr 25, 2016 22:26:37 GMT -8 Boy_Wonder said:

Okay so is this right or have I messed something up somewhere (it's working but)

//Document Ready
$( document ).ready(function() {
   var toDoList = pb.plugin.get('to_do_list').settings;
   //Problems to Fix p1 - create various tabs for the check lists as needed dynamically
   var tab1lngthinfo = toDoList.unapp_chkbox;
   console.log(tab1lngthinfo.length);
      //P5 - Output all information (done...ish)
 $("#ToDoTest").append("<div class='container'><div class='title-bar'><h2>To Do List(s)</h2></div><div class='content cap-bottom' id='toDoBox'></div>");
       $("#toDoBox").append("<div id='tabs'><ul><li><a href='#unapp'>Unapproved Members To Do List</a></li><li><a href='#daily'>Daily To Do List</a></li></ul></div><div id='unapp'>If you're a new member please fill in the checkboxes to help yourself get adjusted and settled in!</div><div id='daily'>Eventually the Daily Checkbox will come here</div>");
   //P2 - Generate checkboxes to mark if a task has been done or not
   for(a=0;a<pb.plugin.get('to_do_list').settings.unapp_chkbox.length;a++){
   $('#unapp').append('<input type="checkbox" id="'+pb.plugin.get('to_do_list').settings.unapp_chkbox[a].checkbox_id+'"class="checkboxy"value="'+pb.plugin.get('to_do_list').settings.unapp_chkbox[a].checkbox_label+'" ><label for="'+pb.plugin.get('to_do_list').settings.unapp_chkbox[a].checkbox_id+'">'+pb.plugin.get('to_do_list').settings.unapp_chkbox[a].checkbox_label+'<br /></label></form>');
   }
   $(".checkboxy").click(function() {
     $(this).attr("disabled", true);
       var checkbox = $(this).attr('id')
       key[checkbox]=1
pb.plugin.key('ToDoListKey').set({ value:{'box1':1}<span style="font-size: 13.3333px;">                          });</span><span style="font-family: Verdana, Arial; font-size: 10pt;"> /*This also saves the key!*/</span>              
});

   //P3 - Check if all checkboxes have been ticked and store to key. Each tickbox needs to store that its been ticked


   
                                       
   //P4 - API to send money to users (maybe give a trophy if possible? Need to talk to Peter
});

currently this: $('.checkboxy').each(function(){

var checked = $(this).is(':checked')

if(checked){

$(this).prop('disabled',true)

}

})
serves no purpose where it is placed.

pb.plugin.key('ToDoListKey').set({ value:{'box1':1}
is not setting our new variable called key
You aren't establishing a variable called key

You aren't getting the value of our current key

'<input type="checkbox" id="'+pb.plugin.get('to_do_list').settings.unapp_chkbox[a].checkbox_id+'
the id is going to be a plain number which is bad
for="'+pb.plugin.get('to_do_list').settings.unapp_chkbox[a].checkbox_id+'" would have to reflect any changes that the first line does


I think that should be good for now.

[Boy_Wonder]

Apr 25, 2016 23:35:53 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

Apr 25, 2016 22:26:37 GMT -8 Boy_Wonder said:

Okay so is this right or have I messed something up somewhere (it's working but)

//Document Ready
$( document ).ready(function() {
   var toDoList = pb.plugin.get('to_do_list').settings;
   //Problems to Fix p1 - create various tabs for the check lists as needed dynamically
   var tab1lngthinfo = toDoList.unapp_chkbox;
   console.log(tab1lngthinfo.length);
      //P5 - Output all information (done...ish)
 $("#ToDoTest").append("<div class='container'><div class='title-bar'><h2>To Do List(s)</h2></div><div class='content cap-bottom' id='toDoBox'></div>");
       $("#toDoBox").append("<div id='tabs'><ul><li><a href='#unapp'>Unapproved Members To Do List</a></li><li><a href='#daily'>Daily To Do List</a></li></ul></div><div id='unapp'>If you're a new member please fill in the checkboxes to help yourself get adjusted and settled in!</div><div id='daily'>Eventually the Daily Checkbox will come here</div>");
   //P2 - Generate checkboxes to mark if a task has been done or not
   for(a=0;a<pb.plugin.get('to_do_list').settings.unapp_chkbox.length;a++){
   $('#unapp').append('<input type="checkbox" id="'+pb.plugin.get('to_do_list').settings.unapp_chkbox[a].checkbox_id+'"class="checkboxy"value="'+pb.plugin.get('to_do_list').settings.unapp_chkbox[a].checkbox_label+'" ><label for="'+pb.plugin.get('to_do_list').settings.unapp_chkbox[a].checkbox_id+'">'+pb.plugin.get('to_do_list').settings.unapp_chkbox[a].checkbox_label+'<br /></label></form>');
   }
   $(".checkboxy").click(function() {
     $(this).attr("disabled", true);
       var checkbox = $(this).attr('id')
       key[checkbox]=1
pb.plugin.key('ToDoListKey').set({ value:{'box1':1}<span style="font-size: 13.3333px;">                          });</span><span style="font-family: Verdana, Arial; font-size: 10pt;"> /*This also saves the key!*/</span>              
});

   //P3 - Check if all checkboxes have been ticked and store to key. Each tickbox needs to store that its been ticked


   
                                       
   //P4 - API to send money to users (maybe give a trophy if possible? Need to talk to Peter
});

currently this: $('.checkboxy').each(function(){

var checked = $(this).is(':checked')

if(checked){

$(this).prop('disabled',true)

}

})
serves no purpose where it is placed.

pb.plugin.key('ToDoListKey').set({ value:{'box1':1}
is not setting our new variable called key
You aren't establishing a variable called key

You aren't getting the value of our current key

'<input type="checkbox" id="'+pb.plugin.get('to_do_list').settings.unapp_chkbox[a].checkbox_id+'
the id is going to be a plain number which is bad
for="'+pb.plugin.get('to_do_list').settings.unapp_chkbox[a].checkbox_id+'" would have to reflect any changes that the first line does


I think that should be good for now.

Okay you've lost me again - especially on the last bit? There's no difference in it? 

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

the last bit as in from my earlier post
id= must be unique otherwise your plugin will break with poorly coded javascript snippets from the good Lord knows where
so id="'+pb.plugin.get('to_do_list').settings.unapp_chkbox.checkbox_id+'" is a bad idea
id="toDo'+pb.plugin.get('to_do_list').settings.unapp_chkbox.checkbox_id+'" would be a good idea
s

[Boy_Wonder]

Apr 26, 2016 8:08:43 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

the last bit as in from my earlier post
id= must be unique otherwise your plugin will break with poorly coded javascript snippets from the good Lord knows where
so id="'+pb.plugin.get('to_do_list').settings.unapp_chkbox.checkbox_id+'" is a bad idea
id="toDo'+pb.plugin.get('to_do_list').settings.unapp_chkbox.checkbox_id+'" would be a good idea
s

uh the "poorly coded javascript snippets" are from stack overflow. Last I checked that was one of the better places

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

Apr 26, 2016 8:13:39 GMT -8 Boy_Wonder said:

Apr 26, 2016 8:08:43 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

the last bit as in from my earlier post
id= must be unique otherwise your plugin will break with poorly coded javascript snippets from the good Lord knows where
so id="'+pb.plugin.get('to_do_list').settings.unapp_chkbox.checkbox_id+'" is a bad idea
id="toDo'+pb.plugin.get('to_do_list').settings.unapp_chkbox.checkbox_id+'" would be a good idea
s

uh the "poorly coded javascript snippets" are from stack overflow. Last I checked that was one of the better places

No I mean OTHER people's codes. Your code is fine.