Question

Javascript - Tables - How to hit each row?

Forms

Updated December 2, 2022

asked on February 7, 2020

Sigh. I know many things. Javascript is not one of them. :)

I'm trying to use some of the example code from the BPL to help me with a form. I need to iterate through this table, when it is created and each time a row is added (I think - unless there is a more efficient way) and set and attribute on a field.

What I've tinkered with is almost working - it just makes the attribute change when there are changes on a row instead of doing it when the table/rows are first created.

1. what am I doing wrong? I just want to set that .attr upfront for all rows

2. where is the best reference for all of the attributes?

Thanks in advance

$(document).ready(function(){
  $('.trips').on('change', function() {
    $('.trips tbody tr').each(function() {
      var todaysDate = new Date(); // Gets today's date
      // Max date attribute is in "YYYY-MM-DD".  Need to format today's date accordingly
      var year = todaysDate.getFullYear();                        // YYYY
      var month = ("0" + (todaysDate.getMonth() + 1)).slice(-2);  // MM
      var day = ("0" + todaysDate.getDate()).slice(-2);           // DD
      var minDate = (year +"-"+ month +"-"+ day); // Results in "YYYY-MM-DD" for today's date 
      // Now to set the max date value for the calendar to be today's date
      $(this).find('.travel_date input').attr('min',minDate);
   });
});
});

1 0

Answer

SELECTED ANSWER

replied on February 7, 2020

So the current code you have is saying this (in plain english)

$(document).ready(function(){
  $('.trips').on('change', function() {

This is saying when the document(webpage) loads (ready) execute the code underneath. The next part says anytime an element(part of the page) changes (on change) run the code below.

That alone tells you why it only runs when the row changes, but to get more in depth.

$('.trips tbody tr').each(function() {

This is saying for each "tr" in the "tbody" of an element that has the class('.' is class, '#' is ID) trips run the code below.

$(document).ready(function(){
  $('.trips').on('change', function() {
    $('.trips tbody tr').each(function() {

Says when the page loads, an element with the class 'trips' is found and for each 'tr' (table row) inside of the tbody(table body) of the element(it won't work right if it's not a table) with a class of 'trips'.

So to help you with your dilemma if you change the '.trips' in the .on('change') portion of your code to '.cf-table-add-row' and the 'change' to 'click'. It should run the code when a new row is added by clicking the add button. It would look like this at the top:

$(document).ready(function(){
  $('.cf-table-add-row').on('click', function() {
    $('.trips tbody tr').each(function() {

Another alternative to that would be to make it change when you click the date box itself. In which case you would change the top portion of your code to look like this:

$(document).ready(function(){
  $('.datePickerClassNameHere').on('click', function() {
    $('.trips tbody tr').each(function() {

If you go to the options in the field itself you can set a custom class to target in the advanced tab like so:

Let me know if neither of those examples work for you and I can write you a custom bit of code. All I would need is an custom class names you set and possibly the id #s for the fields. Hope I helped (and maybe taught you a little bit).

2 0

replied on February 7, 2020

Beautiful! Thank you!

The second option with the date picker worked. (The first option works, except it doesn't run on initial load so it doesn't set the min until after an additional row is added.)

So... on 'click' 'change' etc - where would I find a reference for all the options for that? Same with things like the .attr setting.

Thanks

0 0

replied on February 7, 2020 • Show version history

It's not a defacto spot, but I do reference it and it hasn't steered me too wrong is W3 Schools. Here's a link to their write up on the jQuery methods (which is what the .on part is):

https://www.w3schools.com/jquery/event_on.asp

If you want the various ways you can "tweak" the .on() method here is a link to the jQuery website documentation. It gets pretty technical, but the key is the event (in this case "click").

https://api.jquery.com/on/

A good place on W3 Schools to find some (or most common ones used) events is in the link below. Just make when you put them in the quotes for the .on method you leave out the "()"

https://www.w3schools.com/jquery/jquery_ref_events.asp

Hope that answers your question. I'm always glad to help and even teach while helping out.

EDIT: Forgot to add the attr "list" also. That one is a much much bigger one as it's tied to all the possible HTML attributes (hence it being attr for attributes).

https://www.w3schools.com/jquery/html_attr.asp

That's for the ways you can code it.

https://www.w3schools.com/tags/ref_attributes.asp

That's for a large (but possibly not complete) list of attributes you can set with .attr().

0 0

Replies

replied on February 7, 2020

Tanner - do you mind taking another look?

It seems my logic around this isn't working. I have to put in the same function twice - once for "on click" on the date picker and another for "on table add." This wouldn't be a problem, other than I'm sure there is more efficiency to be had, but it seems things get confused between adding the rows and if I change the fiscal_year dropdown field. (I know I haven't accounted for the existing values the users has already selected, but clicking on the date picker should grab the current fiscal_year and set the dates and it doesn't seem to be doing so.

Does that make any sense?

I am wondering if I will need a third branch for when fiscal_year changes also.

This probably sounds the ramblings of someone who has been hacking away at a new language for a few hours... lol

$(document).ready(function(){
  $('.travel_date').on('click', function() {
    $('.trips tbody tr').each(function() {
      var year = $('.fiscal_year select').val() - 1; // YYYY
      var month = ("07");    
      var day = ("01");     
      var minDate = (year +"-"+ month +"-"+ day);   
      $(this).find('.travel_date input').attr('min',minDate);
      
      //set the max to end of FY
      var nextyear = (year + 1);
      var maxDate = (nextyear +"-"+ month +"-"+ day);
      $(this).find('.travel_date input').attr('max',maxDate);                      
   });
  });
});

$(document).ready(function(){
  $('.cf-table-add-row').on('click', function() {
    $('.trips tbody tr').each(function() {
     var year = $('.fiscal_year select').val() - 1; // YYYY
      var month = ("07");    
      var day = ("01");     
      var minDate = (year +"-"+ month +"-"+ day);    
      $(this).find('.travel_date input').attr('min',minDate);
      
      //set the max to end of FY
      var nextyear = (year + 1);
      var maxDate = (nextyear +"-"+ month +"-"+ day);
      $(this).find('.travel_date input').attr('max',maxDate);                      
   });
  });
});

Thoughts?

0 0

replied on February 7, 2020

Hmm... seems things are now better.

Made a third copy. (Guess I should learn functions right?)

this one on click for the fiscal year changer.

I also added an update validation trigger when that year is changed.

So it seems to work! inelegant, but it works.

0 0

View 2 previous replies

replied on February 7, 2020

That is another thing I probably should've mentioned to you. I've had to "manually" trigger changes in Forms before. If you add a

$('whatever your selector is').trigger('change');

It will tell the form "something changed, run your change script if there is one for the selector". It's a useful line of code for lookups that you need to trigger again after a change is made.

I'm glad it's working though, if it ever stops or acts funky I'll be happy to help. I may not be a VAR, but I've got enough knowledge of how to mess with Forms I can be just as helpful.

1 0

replied on May 19, 2020

Tanner - would you be willing to take a look remotely - it might be easiest if I can demonstrate.

It seems like I have a problem with the refresh logic. I can do certain things and the correct values will show. It seems to be related to the rows of .trips - I don't seem to be able to iterate through each row and refreshing it with the changes, or detecting when a row is changed and updating/refreshing.

I'll keep plugging away, but I think I really need an expert. :)

0 0

replied on May 19, 2020

Yeah, I'm available for remote help. I think if I saw your set-up (especially since it's been a little while since this post) it would help me understand better. I think I know what you're looking for after quickly reading through this, but seeing it might help out more.

0 0

replied on May 19, 2020

Thanks - could you email me at wellsm @ chesterfield.gov please? I tried to find your email but to no avail.

Thanks!!!

0 0

replied on December 2, 2022

Good morning,

If anyone can help me, I'm searching using javascript,
activate an entire row in a laserfiche form table, changing the value of a field in another row.

If anyone can help me, I'm searching using javascript,
activate an entire row in a laserfiche form table, changing the value of a field in another row.

0 0

You are not allowed to follow up in this post.

Question

Question

Javascript - Tables - How to hit each row?

Answer

Replies

Sign in to reply to this post.