CUTCODEDOWN
Minimalist Semantic Markup

Welcome Guest
Please Login or Register

If you have registered but not recieved your activation e-mail in a reasonable amount of time, or have issues with using the registration form, please use our Contact Form for assistance. Include both your username and the e-mail you tried to register with.

Author Topic: Select all Tutorial  (Read 937 times)

durango_d

  • Full Member
  • ***
  • Posts: 124
  • Karma: +1/-0
Select all Tutorial
« on: 5 Nov 2020, 08:57:06 am »
Hi,

When you have some time, can you do a tutorial on js select all (radio or checkbox).   I have been up all night and i am no closer than then i started, i been pulled one way then the other, js, jquery then back to js then jsfiddle..  And none of it fully works... i get just so far then it all falls apart again.  I get them all checked buit then they dont uncheck if i remove it.

Thanks

here is a link to the image, when i wake up ill put the image up on google docs or something and change this link

https://www.codingforum.net/filedata/fetch?id=2426282&d=1604566929

The code changed so ill repost it when i get it done.   I did manage to get alot of it working :)  but i have some bugs and i can fix them i think.

« Last Edit: 5 Nov 2020, 06:52:31 pm by durango_d »
Squeeze it Harley! Don't yank it!  It's not your D...!  Squeeze it !

durango_d

  • Full Member
  • ***
  • Posts: 124
  • Karma: +1/-0
Re: Select all Tutorial
« Reply #1 on: 6 Nov 2020, 12:47:57 am »
Whewwwww.... all done... i have one tiny tiny tiny little bug, like an ant.... that i have not figured out but other than that it works perfectly.    Other than just some syntax stuff of yours and a few small items like a jquery statement, this is all my work, all the coding and logic is mine....  so now you get to see how my brain works lol

It limits select all choice to 1 bottom and 1 top,
it sets the checked true and false (or just '') via js.
it captures the click, which i might try change instead of click to avoid un necessary event checks.
it captures the correct values for the php POST.
it unchecks all as well

and now for the tiny tiny bug.....  the rest button does not remove the dynamic checkbox marks, they are still on the page.  All the other marks are gone but the dynamic ones remain.  I think it has to do with when the page loads... 

So in this case what is the solution, just close the form and reset the page to get a fresh form or is there a way to forcably remove those checkmarks?   I did try a special function to forcable clear them but it did not work so i removed it, and went back to the native reset.   That is the only bug i found... :) 

here is the js for the dynamic select all,   it was a ton of work, anxiety, frustration, but wow again i learned so much... :)    There is the main js and then 4 functions below that, select all for the top, select all for the bottom, unselect all for the top, and unselect all for the bottom.


Code: [Select]

(function(pd) {
   
    var cblimit = 3;
    var cbcount = 0;
    var privacyNum = '';
    var privacy = '';
    var cid = '';
    var curTarg = '';
    var ch = '';
    var check4checked = '';
    var txt_search = '';
    var cbcountAct = '';
    var cbcountFeat = '';
   
   
    $('.limit').click(function(event)
    {
       
       curTarg = event.currentTarget;
       cid = curTarg.id; /* id of clicked input */
       privacyNum = curTarg.value; /* 1 2 3 4 or 5 */
       
       
       if(privacyNum == 1)
       {
           
          privacy = 'everyone';
           
       }else if(privacyNum == 2)
         {
             
           privacy = 'friends';
             
         }else if(privacyNum == 3)
           {
               
              privacy = 'male';
               
           }else if(privacyNum == 4)
             {
               
                privacy = 'female';   
                   
             }else if(privacyNum == 5)
               {
                 
                  privacy = 'private';
                     
               }else{
                     
                      /*default failsafe */
                     
                      privacy = 'private';
                       
                     }//close else
     
           
   
        /* total checked in the top body section */
        cbcountAct = $('#activity_checkboxes .limit:checkbox:checked').length;
       
        /* if the click the second checkbox on the top level */
        /* lets clear it and send them a reminder message */
       
        if(cbcountAct > 1)
        {
           
          if(curTarg.checked === true)
          {
           
             /* set it to false just in case the removal fails */
             /* then remove it */
             curTarg.checked = ''; /* set it to nothing = false */
             curTarg.removeAttribute('checked'); /* remove it */
             alert("Sorry but select all is limited to 2 choices (one top section and one bottom section)");
             return;
             
           }//close if checked 
           
        }//cloxe if cbcountAct > 1
       
       
        /* total checked on the bottom body section */
        cbcountFeat =  $('#feature_checkboxes .limit:checkbox:checked').length;
       
        if(cbcountFeat > 1)
        {
           
          if(curTarg.checked === true)
          {
           
             /* set it to false just in case the removal fails */
             /* then remove it */
             curTarg.checked = ''; /* set it to nothing = false */
             curTarg.removeAttribute('checked'); /* remove it */
             alert("Sorry but select all is limited to 2 choices (one top section and one bottom section)");
             return;
             
           }//close if checked 
           
        }//cloxe if cbcountFeat > 1
       
        /* how many total are checked now  */
         cbcount = cbcountAct + cbcountFeat;
         
        if(cbcount >= cblimit)
        {
         
          /* if it already has a pre existing checked attribute then remove it */
         
          if(curTarg.checked === true)
          {
             
             /* this may not ever be executed since we check for multiples above */
             /* however if js should malfunction this is good as a default */
             /* failsafe so we will leave it just in case */
           
             /* set it to false just in case the removal fails */
             /* then remove it */
             curTarg.checked = ''; /* set it to nothing = false */
             curTarg.removeAttribute('checked'); /* remove it */
             alert("Sorry but select all is limited to 2 choices");
             return;
             
           }//close if checked
             
         }else{
             
                   /* limit count not exceeded */
               
               
                /* if the element exists */ 
                if(curTarg)
                {
             
                   if(curTarg.checked === true)
                   {
                               
                        /* its ok to add the attribute */
                        /* add the checked attribute to the input that was clicked */
                       
                             ch = pd.createAttribute('checked');
                             ch.value = "checked";
                             curTarg.setAttributeNode(ch);
                           
                           
                             /* go to the appropriate function to check all
                             /* first lets find out which section it is *
                             /* the input id will include either: */
                             /* saAll_   for the top section  */
                             /* or sa_value_  for the lower section */
                           
                             txt_search = cid.search('saAll_');
                           
                             /* if not found */
                           
                             if(txt_search == -1)
                             {
                                 /* clear it */
                                 txt_search = '';
                               
                                 /* is it the lower section */
                               
                                 txt_search = cid.search('sa_value_');
                               
                                 /* if found */
                               
                                 if(txt_search >= 0)
                                 {
                                   
                                   /* found it bottom section */
                                   
                                   selAll(privacy);
                                   
                                  }//close if txt search gt eq 0 
                               
                               
                               
                                /* if neither upper or lower section id */
                                 /*just fall through or return */
                                 return;
                             
                         
                            }else{
                               
                                    /* not equal -1 so found it
                               
                                    /* we found it top level */
                                   
                                    selActAll(privacy);
                               
                                  }//close else if txt search -1
                               
                               
                    }else{
                 
                            /* not checked */
                            /* they just unchecked the box */
                             
                                               
                               /* go to the appropriate function to UNcheck all
                               /* first lets find out which section it is *
                               /* the input id will include either: */
                               /* saAll_   for the top section  */
                               /* or sa_value_  for the lower section */
                               
                               txt_search = cid.search('saAll_');
                               
                               /* if not found */
                               
                               if(txt_search == -1)
                               {
                                   /* clear it */
                                   txt_search = '';
                                   
                                   /* is it the lower section */
                                   
                                   txt_search = cid.search('sa_value_');
                                   
                                   /* if found */
                                   
                                   if(txt_search >= 0)
                                   {
                                       
                                       /* found it bottom section */
                                       
                                       unselAll(privacy);
                                       
                                   }//close if txt search gt eq 0 
                                   
                                   
                                   /* if neither upper or lower section id */
                                   /*just fall through or return */
                                   return;
                                   
                                   
                                }else{
                                   
                                       /* not equal -1 so found it */
                                   
                                       /* we found it top level */
                                       
                                        unselActAll(privacy);
                                   
                                      }//close else if txt search -1 
                                       
                         }//close else not checked
                         
                 }else{
                             
                        /* no curTarg element exists */
                        console.log("error: no element exists code 627");
                        return;
                               
                       }//close else curTarg 
                           
                }//close count not exceeded
   
    }); //close the click listener
 
})(document);


/* example  (everyone) */
   
function selActAll(txtopt)
{
   
    if(document.getElementById('saAll_'+txtopt).checked)
    {
       
       for (var actbx of document.querySelectorAll("#activity_checkboxes input[id*=_act_value_"+txtopt+"]"))
       {
          /* set them all to checked */
          actbx.checked = true;
         
       }//close for
       
    }//close if doc id checked
       
}//close function selActAll


/* example  (everyone) */
   
function selAll(txt)
{
       
    if(document.getElementById('sa_value_'+txt).checked)
    {
       
       for (var ichkbx of document.querySelectorAll("#feature_checkboxes input[id*=_value_"+txt+"]"))
       {
          /* set them all to checked */
          ichkbx.checked = true;
         
       }//close for
       
    }//close if document saAll
       
}//close function selActAll


/* -------  UN CHECKING ALL SECTION  -----  */

function unselActAll(txtopt)
{
   
    if(document.getElementById('saAll_'+txtopt).checked === false)
    {
       
       for (var actbx of document.querySelectorAll("#activity_checkboxes input[id*=_act_value_"+txtopt+"]"))
       {
          /* set them all to unchecked */
          actbx.checked = '';
         
       }//close for
   
    }//close if doc saAll
   
}//close function unselActAll



function unselAll(txt)
{
   
    if(document.getElementById('sa_value_'+txt).checked ===  false)
    {
       
       for (var ichkbx of document.querySelectorAll("#feature_checkboxes input[id*=_value_"+txt+"]"))
       {
          /* set them all to unchecked */
          ichkbx.checked = '';
         
       }//close for
       
    }//close if document savalue
   
}//close function unselAll




and of course a pic of the masterpiece lol

https://drive.google.com/open?id=1FHodv1TUlt5lYrFNguXCWRgiulP8HHKY


UPDATE: updated code this morning
« Last Edit: 6 Nov 2020, 11:28:58 am by durango_d »
Squeeze it Harley! Don't yank it!  It's not your D...!  Squeeze it !

JesseWillWreckYa

  • Junior Member
  • *
  • Posts: 10
  • Karma: +4/-0
  • Call me an idiot, I'm going back there...
Re: Select all Tutorial
« Reply #2 on: 6 Nov 2020, 02:05:11 am »
I'd be interested in this too. The script here looks very complex, it cannot be this hard can it? Jason is this a case for what you call "walking the dom"? does it even make sense for radio since radio can only ever have one?
Thought I knew enough. Now I have to relearn it all.

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1049
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Select all Tutorial
« Reply #3 on: 6 Nov 2020, 02:07:58 am »
Yeah, with radio it makes no sense as you can't have multiple radio buttons selected, that's not what they're even for.

But Jesse is right, this is a job for DOM walking, probably with generating the select all / de-select all from the JavaScript, and maybe some CSS in JS since this is JS only functionality.

I'm currently knee deep in a server update/upgrade (and installing recaptcha to work with SMF... which it doesn't want to) but when that's done if I'm still awake, I'll belt out a quick example.

Side note, you know Jesse I just recognized your catch-phrase! Funny, she doesn't look Druish.
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1049
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Select all Tutorial
« Reply #4 on: 6 Nov 2020, 02:44:55 am »
Ok, let's say you have a properly formed fieldset where you've got a legend describing the options.

Code: [Select]
<fieldset class="checkboxSelects">
<legend>What are you selecting</legend>
<label>
<input type="checkbox">
Test Item 1
</label>
<br>
<label>
<input type="checkbox">
Test Item 2
</label>
<br>
<label>
<input type="checkbox">
Test Item 3
</label>
</fieldset>

A script to add select all / deselect all could be done along these lines.

Code: [Select]
(function(d) {

function makeButton(className, parent, before, onclick, text) {
var button = parent.insertBefore(
d.createElement('button'),
before
);
button.className = className;
button.onclick = onclick;
button.textContent = text;
button.type = "button";
}

var checkboxSelects = d.getElementsByClassName("checkboxSelects");

for (var fieldset of checkboxSelects) {
var e = fieldset.firstElementChild;
if (!e) continue;
if (e.tagName == 'legend') if (!(e = e.nextElementSibling)) continue;
makeButton('select', fieldset, e, setAll, 'Select All');
makeButton('deselect', fieldset, e, setAll, 'Deselect All');
fieldset.insertBefore(d.createElement('br'), e);
}

function setAll(event) {
var
element = event.currentTarget,
value = element.classList.contains('select');
for (var input of element.parentNode.elements) {
if (input.type == "checkbox") input.checked = value;
}
} // setAll

})(document);

First a function to make our two buttons, that way we don't have to repeat ourselves. Then we grab all fieldset.checkBoxSelects so we can add the two buttons -- select and deselect -- as appropriate, with a BR to separate them from the label that come after.

Our click handler uses the class on the button to determine what value to set (true or false) on input.checked. From there we just loop through all form elements in the parent fieldset, and if it's a checkbox set the value as we already determined.

Easy-peasy lemon squeezy.
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

durango_d

  • Full Member
  • ***
  • Posts: 124
  • Karma: +1/-0
Re: Select all Tutorial
« Reply #5 on: 6 Nov 2020, 11:00:04 am »
Thanks for the tutorial.  I do like the use of the two buttons rather than using just another check box to select and unselect all, it avoids the issue of the dynamic checks values not clearing when using form reset.  Which is the only bug. Basically the tutorial unselect all button is the form reset.  :)   I may convert mine to buttons for that reason, or just use the tutorial as a model for a custom reset button.

Mine is not that hard to understand, its actually quite simple.  Mine is also performing more tasks than the tutorial version.  However, i fully admit that my version is heavy on js because of my limited js skills.

Just a quick walk through on my version.

1. we use a IIFE (in simple terms its a open js that is listening all the time) and it carries the document with in the (pd) which i named it that in short for privacy document.

2. we preset our vars and then listen for the click event, but this click event is only targed to those items clicked that have the .limit class assigned to them (class="limit").   I did not know if i was required to have an actual class with that name or not in css but i made one anyway and just put something in it.

3. Once a click happens on a limit class item we store a few values that we need later:
The current target which is the input element of the item clicked.
That id
That value - its easier to store and check for numbers than for text IMO so i need to convert the number values to text values because the text values are part of the id names and we use that later.
And then i grab a copy of the element to use later.  Now i do realize here that i could have probably used the current target var rather than make a new var but i did not see that until now..  

4. Then we store how many are checked currently in the top section, remember its always listening so it reacts on its own without calling a function.  There are two sections of the html  the Act short for Activity section on top and the Feat (aka individual feature) items on the bottom.

5. If the number of items checked on the top section is greater than 1  (remember that is our limit 1 top and 1 bottom) and we see that the checked value is true (its checked) then we remove the checked attribute.  Example we remove the dynamic   checked="checked"  attribute because we dont want to block the click.  And we send them a message on the screen as a reminder.  And then we return, basically stopping the process.

6. We repeat the same process for the bottom section as we did for the top section in #5 above.

7. We calculate the total of (select all checkboxes) that are checked and store them in cbcount var.

8. if the total count is more than the limit.  On the first part of this is where the internal documentation says that this may never be executed.  We repeat the process of the above 5 and 6 above.  This was part of my original logic and rather than remove it i just left it there as a failsafe just in case, but it can probably be removed, ill have to check it again to be sure.

9. Now during the rest of this i do recheck some flags that i may not have to but again that is my wanting to be sure because remember i am coding for privacy, and if this gets messed up then well you know, its not private so i would rather error on the side of more code than less code.

10.  So they have not reached the limit (they have one checked but not 2.  So since they just checked this one item we need to dynamically create the checked="checked" attribute.  Remember this process of creating and removing is ongoing and every time they check and uncheck a select all item, it repeats the process of creating and removing.

11.  Then we recheck the count, i can probably remove that, we really dont need to do that again at this point, again part of my original logic, so yeah that can probably be removed as we recount anyway on the next click.

12.   Now we check the text for the id name to see which section the click came from, top or bottom.  And then we send them to the appropriate function below (including the value of the column they selected, ie private, friends only, everyone.... ) to the function and in that function we set all those items to checked.

13 We repeat the process if they unchecked the box so if the value of checked is false then that means the box is not checked.

And thats it, the functions below do the main tasks of selecting and unselecting.   I hope this makes better sense now.    Yes alittle on the js fat side but not too bad for a js novice like myself :)

UPDATE: i have made the following corrections to the code and replaced the posted code with the new code.

1. i removed the var ch_el and just used curTarg var,  i changed out all occurances of ch_el with curTarg since its the same thing.

2. i  removed the count check on line 170, its not needed.

3. the if(curTarg)   check on line 162 should be moved up above the if(curTarg.checked)  which is right above it..    and its else clause on 217 should be moved to match.    The reason is that you want to check for curTarg first before anything else.   

« Last Edit: 6 Nov 2020, 11:26:01 am by durango_d »
Squeeze it Harley! Don't yank it!  It's not your D...!  Squeeze it !

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1049
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Select all Tutorial
« Reply #6 on: 6 Nov 2020, 11:34:55 am »
Honestly, you're playing with a lot of values and I don't know why... most of it hardcoded to a single set.

If all you're trying to do is make sure they have two checked, do that on the form's submit, perhaps with a data- attribute on the fieldset?

You're grabbing and checking and grabbing and checking, and I really can't figure out what it is your code is even trying to do... and your explanation really didn't help.
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

durango_d

  • Full Member
  • ***
  • Posts: 124
  • Karma: +1/-0
Re: Select all Tutorial
« Reply #7 on: 6 Nov 2020, 11:41:07 am »
Im still learning and ill play around with your version and try to make a reset form out of it.  :0 

The biggest difference i am seeing between the old rugged way and the new way for cutting js code down is that it makes adding html more challenging with the new way.   I mean if your checking for the first child in js and some developer goes in and simply adds a div for something to the html, the whole thing blows up.   It does seem to create some very restrictive environments for the  html side.   

I am not saying its bad just that it seems to create challenges that i am not used to looking for when troubleshooting.

also i solved my checkbox removal issue with the form reset.  So now i no longer use the native html form reset button type, i have a custom reset and it removes all checkboxes. 

How i did this to fix the bug was i had to remove the attribute itself from the id... so basically i am removing  checked="checked" from the input tag,  That leaves an empty checkbox in the select all column.

So now i have normal html button also with a confirm.

here is the code.

html
Code: [Select]
<input type="button" id="privreset" value="<?= htmlspecialchars(getLangValue('GENERAL_RESET_BUTTON_TEXT'), ENT_QUOTES, 'UTF-8'); ?>"
                 onClick="if(confirm('Are you sure you want to reset all values!')) privacy_reset();">
                  <br>
     <br>




js function
Code: [Select]
function privacy_reset()
{
   
     var allcount = $('.limit:checkbox:checked').length;
     
     if(allcount > 0)
     {
        for(var all of document.querySelectorAll(".limit:checked"))
        {
             
           all.checked = ''; /* set it to nothing = false */
           all.removeAttribute('checked'); /* remove it */
             
        }//close for all
       
        document.getElementById('privacy_form').reset();
         
     }//close if allcount
   
}//close function privacy_reset



however i have discovered a new bug for which i dont think the DS tutorial covers as it only has one set of values. 

The bug is that regardless if i have the select all checked or not, it still allows for individual items to be checked in other columns.  We dont want multiple privacy settings in different columns if the select all is set, so  I will fix this too and update this when i do.

« Last Edit: 6 Nov 2020, 02:13:25 pm by durango_d »
Squeeze it Harley! Don't yank it!  It's not your D...!  Squeeze it !

durango_d

  • Full Member
  • ***
  • Posts: 124
  • Karma: +1/-0
Re: Select all Tutorial
« Reply #8 on: 7 Nov 2020, 01:27:36 am »
Hi,

First a few observations, maybe lessons.   If i would have known how difficult it was going to be to do the "eye candy" checkboxes, i would have gone with the select drop down and would have been done in an hours time.  But i went for the eye candy and i might as well finish it.

The positive is that i am learning alot doing this, so that will come in handy some time and maybe i can get some kind of reward later by knowing js better, who knows.  :)

At times i really want to just add checked="" to every single html input and forget the dynamic creation BS but i know its the right way to do it so i keep pressing forward. 

So tonight i am working on a solution to the "they checked all over the place too inside the box" issue.  Meaning that they chose a select all, and then also checked a bunch of other individual boxes.  So i need to limit that..

The facts are:
       /* 35 boxes total top section (not including the select all) */
        /* 45 boxes total bottom section (not including the select all) */
        /* max of 7 vertical on the top section /*
        /* max of 9 vertical on the bottom section */

So for example if they click a selectall, and then try to click another single box, i need to block it.  If they click a selectall, then that is 7 top or 9 bottom subtracted from the total boxes of 70.   So i need to do that math and block them if they have more than 7 boxes top and 9 boxes bottom.

to do that i created another listener  just for the main sections, not including the selectall(.limit) class.

Each <tr> now has a class (again not the selectalls) the class is called tracking.   

it listens for the click and then counts it as a single click.   That part works fine... The problem is that currently have to different methods working and i need them to work together, but dont know how.

The dynamic checked dont hear the single item checks and the single item checks dont hear the dynamic checks.  and doing one big click listener is not an option.

so i thank all i need to do is when they click a selectall, is to manually envoke the single tracker listener and add either 7 or 9 to the total.   But how do i envoke a listener via code and not a  mouse click.

Example... 

I need to dynamically call this listener, is that possible ?

Code: [Select]

         
    $('.tracking').click(function(ev)
    {
       
      //do something here when they click a single item
     // or invoke this dynamically and add 7 or 9 if they click a selectall
   
    }); //close the click listener for individual items
   


so two questions...

1.  how would i envoke this via event via code?
2.  can i store the total global count in a js session (for lack of a tech term).  I do remember in the old days there was a place in the DOM to store things,  i think it was called storage or something while the window was open.   Can i still use that to store the grand total if i need to and what is it called again?

Update, i think this is it...  https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Update... so i did figure out how to trigger the event..

Code: [Select]
$('.tracking').trigger('click');

now i just need to figure out the storage deal, so that both approaches can share the same data.
« Last Edit: 7 Nov 2020, 02:21:36 am by durango_d »
Squeeze it Harley! Don't yank it!  It's not your D...!  Squeeze it !

durango_d

  • Full Member
  • ***
  • Posts: 124
  • Karma: +1/-0
Re: Select all Tutorial
« Reply #9 on: 7 Nov 2020, 02:42:10 am »
how do i attach the custom detail text to the event

here is what i have so far
Code: [Select]

$('.tracking').trigger('click', ['detail', 'triggered by selectall'+cid]);
Squeeze it Harley! Don't yank it!  It's not your D...!  Squeeze it !

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1049
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Select all Tutorial
« Reply #10 on: 7 Nov 2020, 06:21:24 am »
First I'd suggest you lose the jQuery f***Tardery.

Second... well... WTF is a "detail text"?
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

durango_d

  • Full Member
  • ***
  • Posts: 124
  • Karma: +1/-0
Re: Select all Tutorial
« Reply #11 on: 7 Nov 2020, 06:30:30 am »
I rarely use jquery, but when it makes something simple i use it, i guess with this i have used it about 4 times i think is all. 

a detail element is the element inside of the event that reads detail:   

its a way of placing a notation inside of the event data so that you can look at it later if you wish, most of the time they system will put something in there like   click or something im not sure but i would like to put that note in there so i can reference it if i need to trouble shoot this one day.

Also how do i the checked value from a event with multiple arrays, is checked always in the same place in the array index?

here is my current event listing

Quote
S.Event {type: "click", timeStamp: 1604748239536, jQuery3510036664387298565915: true, isTrigger: 3, namespace: "", …}
js_privacy.js:311 S.Event {type: "click", timeStamp: 1604748239537, jQuery3510036664387298565915: true, isTrigger: 3, namespace: "", …}
js_privacy.js:311 S.Event {type: "click", timeStamp: 1604748239538, jQuery3510036664387298565915: true, isTrigger: 3, namespace: "", …}
js_privacy.js:311 S.Event {type: "click", timeStamp: 1604748239538, jQuery3510036664387298565915: true, isTrigger: 3, namespace: "", …}
js_privacy.js:311 S.Event {type: "click", timeStamp: 1604748239539, jQuery3510036664387298565915: true, isTrigger: 3, namespace: "", …}
js_privacy.js:311 S.Event {type: "click", timeStamp: 1604748239539, jQuery3510036664387298565915: true, isTrigger: 3, namespace: "", …}
js_privacy.js:311 S.Event {type: "click", timeStamp: 1604748239540, jQuery3510036664387298565915: true, isTrigger: 3, namespace: "", …}


so inside of each one of those is a detail:  (or will be once im done)  but also the checked: element,  but how do i find it easily, i have scanned the array but it has lots and lots of sub indexs...  what is the best way to search for checked:

and here is the detail i was referring to.

https://drive.google.com/open?id=1tOOlLUR0JW7bVZ63wXuWGW8Kgt4CCLTD

what i am trying to do is find out if they clickit it on or off, thats why i need to look for checked

i dont know how it finds it but inside those indexs somewhere is checked... because if finds it like this

Code: [Select]
var ea = $("input[type=checkbox]:checked");
     
       console.log(ea);

so it has to be in there somewhere lol


found it
https://drive.google.com/open?id=10lehAmZMVNqzsU06m4-SNogf3jAOk2SW

now all i need is to be able to add that detail to the trigger, do you have any clue how i might do that?

« Last Edit: 7 Nov 2020, 06:54:11 am by durango_d »
Squeeze it Harley! Don't yank it!  It's not your D...!  Squeeze it !

durango_d

  • Full Member
  • ***
  • Posts: 124
  • Karma: +1/-0
Re: Select all Tutorial
« Reply #12 on: 7 Nov 2020, 10:15:39 am »
well it took me a quadtrillion page refreshes but i solved the issues. 

I solved that they cannot click more than 7 top and 9 bottom, and this also includes if they use the select all.
I solved the horrizonal issue that they cant click more than one on each row, what i do is once they click one on a row, i  display: none the others (siblings)  and then when they unclick it, they all come back on display: inline-block..

:)  now to test for buggs...

i would still like to know how to send some kind of detail data with the trigger.. if you dont know please let me know and ill keep searching :) 

I just want to be able to attach this text message to the data

Code: [Select]
$('.tracking').trigger('click', {detail: 'triggered by selectall'+cid});

the id is attached at the end...

if you know how to do it in js then ill change it to js :)
Squeeze it Harley! Don't yank it!  It's not your D...!  Squeeze it !

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1049
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Select all Tutorial
« Reply #13 on: 7 Nov 2020, 10:24:52 am »
NONE of that makes a lick of sense, and reeks of just dicking around with data-points you don't need -- therefor adding complexity and overhead you don't need.

What event exactly are you triggering a click on where currentTarget isn't the checkbox where you're not verifying the checkbox itself and/or would be checking the data off a "new FormData()"?

...and if it's something simple that's DOUBLE the reason not to use the bloated mind-rotting BS that is jQuery.  What you're doing seems to be a jQuery thing, and that's why you're making this harder than it should be for... whatever it is you think you're doing.

I would have NONE of that shite in my code.
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

durango_d

  • Full Member
  • ***
  • Posts: 124
  • Karma: +1/-0
Re: Select all Tutorial
« Reply #14 on: 8 Nov 2020, 01:09:30 am »
Hi,

i thought a video might work better to explain things.  So i hope this is better..  :)

https://youtu.be/tuBuOEFR3R0

Also i was able to confirm by rewatching the video that it was in fact a bug i found, and that has already been fixed.   

Maybe for the jquery you can show the commands side by side jquery vrs js so i can learn how to do it with just js, if you have time.. 

And i do remember that jquery that i was talking about that made it so easy, it was a trigger event code, js was so complicated i could not figure it out, but jquery made it easy... But as it turns out i did not need to trigger the event manually afterall. :)


Here is the latest js code.

Code: [Select]
(function(pd) {
   
    var cblimit = 3;
    var cbcount = 0;
    var privacyNum = '';
    var privacy = '';
    var cid = '';
    var curTarg = '';
    var ch = '';
    var check4checked = '';
    var txt_search = '';
    var cbcountAct = 0;
    var cbcountFeat = 0;
   
   
   
    $('.limit').click(function(event)
    {
       
       curTarg = event.currentTarget;
       cid = curTarg.id; /* id of clicked input */
       privacyNum = curTarg.value; /* 1 2 3 4 or 5 */
       
       
       if(privacyNum == 1)
       {
           
          privacy = 'everyone';
           
       }else if(privacyNum == 2)
         {
             
           privacy = 'friends';
             
         }else if(privacyNum == 3)
           {
               
              privacy = 'male';
               
           }else if(privacyNum == 4)
             {
               
                privacy = 'female';   
                   
             }else if(privacyNum == 5)
               {
                 
                  privacy = 'private';
                     
               }else{
                     
                      /*default failsafe */
                     
                      privacy = 'private';
                       
                     }//close else
     
   
        /* total checked in the top body section */
        cbcountAct = $('#activity_checkboxes .limit:checkbox:checked').length;
       
     
        /* if the click the second checkbox on the top level */
        /* lets clear it and send them a reminder message */
       
        if(cbcountAct > 1)
        {
           
          if(curTarg.checked === true)
          {
           
             /* set it to false just in case the removal fails */
             /* then remove it */
             curTarg.checked = ''; /* set it to nothing = false */
             curTarg.removeAttribute('checked'); /* remove it */
             alert("Sorry but select all is limited to 2 choices (one top section and one bottom section)");
             return;
             
           }//close if checked
           
        }else{
           
                /* when they uncheck it be sure that any */
                /* hidden row items are changed to inline block */
           
               if(curTarg.checked === false)
               {
           
                 curTarg.checked.style="display: block";
               
                }//close if checked
           
             }//cloxe else if cbcountAct > 1
       
       
        /* total checked on the bottom body section */
        cbcountFeat =  $('#feature_checkboxes .limit:checkbox:checked').length;
       
        if(cbcountFeat > 1)
        {
           
          if(curTarg.checked === true)
          {
           
             /* set it to false just in case the removal fails */
             /* then remove it */
             curTarg.checked = ''; /* set it to nothing = false */
             curTarg.removeAttribute('checked'); /* remove it */
             alert("Sorry but select all is limited to 2 choices (one top section and one bottom section)");
             return;
             
           }//close if checked 
           
        }//cloxe if cbcountFeat > 1
       
        /* how many total are checked now for select all */
        /* upper and bottom sections  */
       
         cbcount = cbcountAct + cbcountFeat;
         
        if(cbcount >= cblimit)
        {
         
          /* if it already has a pre existing checked attribute then remove it */
         
          if(curTarg.checked === true)
          {
             
             /* this may not ever be executed since we check for multiples above */
             /* however if js should malfunction this is good as a default */
             /* failsafe so we will leave it just in case */
           
             /* set it to false just in case the removal fails */
             /* then remove it */
             curTarg.checked = ''; /* set it to nothing = false */
             curTarg.removeAttribute('checked'); /* remove it */
             alert("Sorry but select all is limited to 2 choices");
             return;
             
           }//close if checked
             
         }else{
             
                   /* limit count not exceeded */
               
               
                /* if the element exists */ 
                if(curTarg)
                {
             
                   if(curTarg.checked === true)
                   {
                               
                        /* its ok to add the attribute */
                        /* add the checked attribute to the input that was clicked */
                       
                             ch = pd.createAttribute('checked');
                             ch.value = "checked";
                             curTarg.setAttributeNode(ch);
                           
                           
                             /* go to the appropriate function to check all
                             /* first lets find out which section it is *
                             /* the input id will include either: */
                             /* saAll_   for the top section  */
                             /* or sa_value_  for the lower section */
                           
                             txt_search = cid.search('saAll_');
                           
                             /* if not found */
                           
                             if(txt_search == -1)
                             {
                                 /* clear it */
                                 txt_search = '';
                               
                                 /* is it the lower section */
                               
                                 txt_search = cid.search('sa_value_');
                               
                                 /* if found */
                               
                                 if(txt_search >= 0)
                                 {
                                   
                                   /* found it bottom section */
                                   
                                   selAll(privacy);
                                   
                                  }//close if txt search gt eq 0 
                               
                               
                                /* if neither upper or lower section id */
                                 /*just fall through or return */
                                 return;
                             
                         
                            }else{
                               
                                    /* not equal -1 so found it
                               
                                    /* we found it top level */
                                   
                                    selActAll(privacy);
                               
                                  }//close else if txt search -1
                               
                               
                    }else{
                 
                            /* not checked */
                            /* they just unchecked the box */
                             
                                               
                               /* go to the appropriate function to UNcheck all
                               /* first lets find out which section it is *
                               /* the input id will include either: */
                               /* saAll_   for the top section  */
                               /* or sa_value_  for the lower section */
                               
                               txt_search = cid.search('saAll_');
                               
                               /* if not found */
                               
                               if(txt_search == -1)
                               {
                                   /* clear it */
                                   txt_search = '';
                                   
                                   /* is it the lower section */
                                   
                                   txt_search = cid.search('sa_value_');
                                   
                                   /* if found */
                                   
                                   if(txt_search >= 0)
                                   {
                                       
                                       /* found it bottom section */
                                       
                                       unselAll(privacy);
                                       
                                   }//close if txt search gt eq 0 
                                   
                                   
                                   /* if neither upper or lower section id */
                                   /*just fall through or return */
                                   return;
                                   
                                   
                                }else{
                                   
                                       /* not equal -1 so found it */
                                   
                                       /* we found it top level */
                                       
                                        unselActAll(privacy);
                                   
                                      }//close else if txt search -1 
                                       
                         }//close else not checked
                         
                 }else{
                             
                        /* no curTarg element exists */
                        console.log("error: no element exists code 627");
                        return;
                               
                       }//close else curTarg 
                           
                }//close count not exceeded
   
    }); //close the click listener for just the .limit class items
   
   
     /* this listener is just for the individual items */
     /* even if the items were checked by select all */
     /* it does not include the actual select all checkbox in the count */
   
       
    $('.tracking').click(function(ev)
    {
       
       var howmany = 0;
       var geteach = '';
       var txt_I_search = '';
       var tfval = '';
       var howmany_single = 0;
       var howmany_total = 0;
       var evname = '';
       var notchecked = '';
       var nod = '';
       var i = 0;
       var cur_ITarg = '';
       var I_id = '';
       
       
       cur_ITarg = ev.target;
       I_id = ev.target.id;
       
       /* this will be true or false depending */
       /* if they click the checkbox on or off */
       /* true is on, false is off */
       tfval = ev.target.checked;
       
       
    if(tfval === true)
    {
       
        /* check to see if clicks came from a selectall event */
       
        /* top section has 7 limit */
       
        txt_I_search = I_id.search('saAll_');
       
       if(txt_I_search > 0)
       {
         
           howmany = howmany + 7;
           txt_I_search = '';
           
       }else{
           
               /* bottom section has 9 limit */
           
               txt_I_search = I_id.search('sa_value_');
             
               if(txt_I_search > 0)
               {
               
                 howmany = howmany + 9;
                 txt_I_search = '';
                 
               }//close
           
            }//cloxe else txt_I_search
     
     }//close if tfval true
     
     
      /* not a selectall event just a single click on a box */ 
     
     
     if(tfval === true)
     {
         
         /* individual boxes when clicked on  */
         howmany_single = $(".tracking input[type=checkbox]:checked").length;   /* works */
         
         howmany_total = howmany + howmany_single;
         
         if(howmany_total > 16 )
         {
             
             ev.target.checked = ''; /* set it to nothing */
             ev.target.removeAttribute('checked'); /* remove it */
             alert("Sorry but you have exceeded the max selections");
             return;
             
         }else{
             
                /* we need to lock the rest of the current row (siblings i guess)  */
               
                evname = ev.target.name; /* input name */
               
                let elem = pd.getElementsByName(evname); /* get self and siblings */
             
                for(i=0; i < elem.length; i++)
                {
                   
                    /* we do this inline block setting so that  all row items are  */
                    /* inline block before we turn them off - some items were still */
                    /* hidden so we needed to reset them before we hide them */
                   
                    elem[i].style="display: inline-block";
                   
                    /* if any of the siblings are already chcked then we need */
                    /* to remove that check first */
                    /* this is the case after a select all and then the user */
                    /* wants to change one value to something else */
                    /* so we need to check for any other siblings that are checked */
                    /* excluding self id */
                   
                    if(elem[i].checked === true && elem[i].id != I_id )
                    {
                       
                        ev.target.checked = ''; /* set it to nothing */
                        ev.target.removeAttribute('checked'); /* remove it */
                        alert("You must uncheck the current row item first");
                        return;
                       
                    }//close if
                   
                   
                    /* now that all of them are alive */
                    /* we can turn off the ones we want to */
                   
                    if(elem[i].checked === false)
                    {
                   
                       elem[i].style="display:none"; 
                   
                    }//close if elem.checked
                   
                   
                   
                }//close for loop
             
             
            }//close else if howmany_total > 16
         
     }else{
         
            if(tfval === false)
            {
               
                 evname = ev.target.name;
               
                let elem = pd.getElementsByName(evname);
             
                for(i=0; i < elem.length; i++)
                {
                   
                    if(elem[i].checked === false)
                    {
                   
                       elem[i].style="display: inline-block"; 
                   
                    }//close if elem.checked
                   
                   
                }//close for loop
               
               
              if(howmany_single > 0)
              {
                 
                howmany_single = howmany_single - 1;   
                 
              }//close if > 0
               
            }//close if tfval false
         
          }//close else if tfval true
   
    }); //close the click listener for individual items
   
 
})(document);


/* example  (everyone) */
   
function selActAll(txtopt)
{
   
    if(document.getElementById('saAll_'+txtopt).checked)
    {
       
       for (var actbx of document.querySelectorAll("#activity_checkboxes input[id*=_act_value_"+txtopt+"]"))
       {
          /* set them all to checked */
          actbx.style = "display: inline-block";
          actbx.checked = true;
         
       }//close for
       
    }//close if doc id checked
       
}//close function selActAll


/* example  (everyone) */
   
function selAll(txt)
{
       
    if(document.getElementById('sa_value_'+txt).checked)
    {
       
       for (var ichkbx of document.querySelectorAll("#feature_checkboxes input[id*=_value_"+txt+"]"))
       {
          /* set them all to checked */
          ichkbx.style="display: inline-block";
          ichkbx.checked = true;
         
       }//close for
       
    }//close if document saAll
       
}//close function selActAll


/* -------  UN CHECKING ALL SECTION  -----  */

function unselActAll(txtopt)
{
   
    if(document.getElementById('saAll_'+txtopt).checked === false)
    {
       
       for (var actbx of document.querySelectorAll("#activity_checkboxes input[id*=_act_value_"+txtopt+"]"))
       {
          /* set them all to unchecked */
          actbx.style="display: inline-block";
          actbx.checked = '';
         
       }//close for loop
       
       /* this should fix the bug with the iboxes still set to display none after unchecking the select all */
       
       for (var actIbx of document.querySelectorAll("#activity_checkboxes .tracking input[type=checkbox]"))
       {
           
           if(actIbx.checked === false)
           {
               
             /* set them all to unchecked */
             actIbx.style="display: inline-block";
             actIbx.checked = ''; 
               
           }//close if
         
       }//close for loop
   
    }//close if doc saAll
   
}//close function unselActAll



function unselAll(txt)
{
   
    if(document.getElementById('sa_value_'+txt).checked ===  false)
    {
       
       for (var ichkbx of document.querySelectorAll("#feature_checkboxes input[id*=_value_"+txt+"]"))
       {
          /* set them all to unchecked */
          ichkbx.style="display: inline-block";
          ichkbx.checked = '';
         
       }//close for loop
       
       for (var ichkIbx of document.querySelectorAll("#feature_checkboxes .tracking input[type=checkbox]"))
       {
           
           if(ichkIbx.checked === false)
           {
               
             /* set them all to unchecked */
             ichkIbx.style="display: inline-block";
             ichkIbx.checked = ''; 
               
           }//close if
         
       }//close for loop
       
    }//close if document savalue
   
}//close function unselAll



function privacy_reset()
{
   
    /* this is for all the single item checkboxes */
   
    for(var allsingle of document.querySelectorAll(".tracking input[type=checkbox]"))
    {
       
       allsingle.style="display: inline-block";
       
       if(allsingle.checked)
       {
           allsingle.checked = ''; /* set it to nothing = false */
           allsingle.removeAttribute('checked'); /* remove it */
         
       }//close if all single
             
    }//close for allsingle
   
   
     /* this is for all the select all checkboxes */
     
     var allcount = $('.limit:checkbox:checked').length;
     
     if(allcount > 0)
     {
         
          allcount.style="display: inline-block";
         
        for(var all of document.querySelectorAll(".limit:checked"))
        {
             
           all.checked = ''; /* set it to nothing = false */
           all.removeAttribute('checked'); /* remove it */
             
        }//close for all
       
        /* and lastly the normal reset which takes care of the rest */
       
        document.getElementById('privacy_form').reset();
         
     }//close if allcount
   
}//close function privacy_reset


« Last Edit: 8 Nov 2020, 04:05:27 am by durango_d »
Squeeze it Harley! Don't yank it!  It's not your D...!  Squeeze it !

 

SMF spam blocked by CleanTalk

Advertisement