You are viewing limited content. For full access, please sign in.

Question

Question

Why does the script hide the very row I am trying to show?

asked on April 1 Show version history

I have a column with checkboxes.  I am trying to get the script to only show rows where the checkbox is checked.  (I dont really care about the value of the checkbox.  I am incorporating that as this was a solution I was given years ago and at that time the value of the checkbox was important.)

I have a CSS class set to tr.hiderow {display:none;}

$(function() {
  $(".ColorCheckbox input:checked").each(function(){
    if ($(this).val() == "*"){
      $(this).closest("tr").removeClass("hiderow");
    } else {
      $(this).closest("tr").addClass("hiderow");
    }
  });
});

 

I am getting the opposite results.  The row that has a checked box is hidden and the rest are visible.  In the below screenshot, I have row 40 checked.

 

I would really appreciate some insights as to what is wrong.

 

Thanks  :)

 

0 0

Answer

SELECTED ANSWER
replied on April 1 Show version history

What you posted - is the the entire code you are using on the form?  Because you don't have anything that is triggering the code to actually run at any time.

Here's an example of some code that should work (I tested in Version 11.0.2311.50556 Classic Designer) and checking the box hide the row of the table. 

//Document Ready is run when the page is loaded.
$(document).ready(function() {

  //Any changes to the table with the myTable class runs the code.
  $(".myTable").change(function() {

    //Loop through all checkedcheckboxes with the ColorCheckbox class.
    $(".ColorCheckbox input:checked").each(function(){

      //If the value is * then hide the row, otherwise show it.
      if ($(this).val() == "*"){
        $(this).closest("tr").removeClass("hiderow");
      } else {
        $(this).closest("tr").addClass("hiderow");
      }

    });

  });

});

 

A few things to be careful about here:

  • Hidden rows in this manner are still going to be validated on form submission, so any required fields that are not populated, or fields with invalid values, will stop the form from being submitted, but the user won't be able to see why, because the row is hidden.
  • Additionally, this code won't work on a read-only version of the form (including the Monitor page, and what is archived to the repository).
  • This code is only triggered upon changes to the table, so it won't happen automatically at form load from changes made on a prior task - but there are ways we can rewrite it to achieve that.

 

It would be significantly better to use field rules to hide the fields in the row.  Of course, the Field rules just hides the fields in the row, not the row itself.  But if you make the field rules hide every field in the row, so that it's just a blank row, now it will follow built-in rules for handling the hidden fields, and we can just use some Javascript to do the cleanup to hide the row itself.  (I tested in Version 11.0.2311.50556 Classic Designer)

//Document Ready is run when the page is loaded.
$(document).ready(function() {

  //Run the code when the form is loaded.
  HideRowFunction();
  
  //Any changes to the table with the myTable class runs the code.
  $(".myTable").change(HideRowFunction);
  
  //Function to hide the rows.  This looks at each row in the table,
  //and if it has any children with the lf-container-hidden class 
  //(which is automatically applied by the field rules) then the 
  //entire row is hidden.
  function HideRowFunction() {

    //Loop through all rows in the table with the myTable class.
	//Remove the hiderow class.  Then loop through the rows that have
	//the lf-container-hidden class on any field and reapply the
	//hiderow class just to those rows.
	$('.myTable tr').each(function(){
	  $(this).closest("tr").removeClass("hiderow");
	});
    $('.myTable .lf-container-hidden').each(function(){
      $(this).closest("tr").addClass("hiderow");
    });

  }

});

 

P.S. You can use to {...} code button here in LFAnswers to make your code more readable.

0 0
replied on April 2

Thank you for your suggestion.  It worked as I needed it to.  And now I see the code button you referenced.  Thank you for mentioning that as well.

 

Does anyone have any suggestions as to where I could go to get more proficient with scripting?  I really try to avoid bothering you all.  Generally, I wont post until I have tried hours of attempting and analyzing, many google searches, and lately chatgpt as well.  (And sometimes my VAR too.)

I just wanted to give you and the other volunteers here at Answers a loud shoutout.  Throughout the years, you and others have been an amazing source of knowledge and have never given negative responses / complaining about code questions.  You just well.... Answer our Laserfiche questions.  smiley  And that, in my opinion, is part of what makes Laserfiche software as amazing as it is - you all.

1 0
replied on April 2 Show version history

Please don’t be afraid to ask here on LFAnswers - that’s why it is here - and a lot of us are here working to answer questions because we are trying to pay forward help we received here.

If you are wanting to learn more about the structure of the code used in LFForms: HTML, CSS, Javascript, jQuery, then there are some good resources online.  (Side-note: jQuery only applies on the Classic Designer).

If I’m trying to understand why something works a particular way, I’ll usually check w3schools.com.

If I’m trying to search for answers on how to achieve a particular task, I’ll start by searching LFAnswers (because of the particular quirks of how code runs within LFForms). Then I try Googling how to do it (being clear to Google “jQuery” for most Classic designer stuff or “vanilla Javascript” with New designer stuff).  Most of the time Googling takes me to StackOverflow.com which is a very massive coding forum (like LFAnswers, but with millions of users and decades of answering coding questions).

Hope that helps!

0 0
replied on April 2

Thank you for the direction.

1 0

Replies

You are not allowed to reply in this post.
You are not allowed to follow up in this post.

Sign in to reply to this post.