Question

Insert values into table drop down dynamically

Forms

Updated August 2, 2019

asked on August 2, 2019

Hi,

I have a script that I used to insert the values from another drop down into table drop down

$('.btn').on('click',function(){
 //add row when button is clicked 
  $('.timesheet .cf-table-add-row').trigger('click');
 
  
  // add all options with values to the list
  var ddlArray = [];
 
  $('.leavereason option').each(function(){
    ddlArray.push($(this).val());
    });
  // array sort
  ddlArray.shift();
  ddlArray.sort();
  

  // add the new options

 $.each(ddlArray,function(index,value){
   $('.cf-table-block tbody tr').each(function () {  
     	 
      $(this).find('.jobtype select').append($('<option></option>')
    						.attr('title',value)
    						.attr('value',value)
    						.text(value));
     
         
   });
});

It works fine until I add a second row to the table. The drop down in the first row double while the second row is as expected.

This is the leave reason option field which is being populated by the database. The script copy the data from this field into the jobtype field in the table.

This is the second row

This is the first row

How can I prevent the data from the drop down being added to the first row?

0 0

Answer

SELECTED ANSWER

replied on August 2, 2019 • Show version history

Try manually triggering the change event on the field it depends on in order to cause the lookup to run again.

For example,

$(document).ready(function(){
    $('.timesheet .cf-table-add-row').on('click',function(){
          $('.whoLoggedIn input').change();
    });
});

The reason you only get the first row populated is that the condition means the lookup only runs when that field changes, but triggering a change should also trigger the lookup again.

However, if you have a lot of other stuff that changes when that value changes, then you might be better off with the following option:

Add a hidden column to your table with that value.

Create a separate rule for the table that uses that field as the lookup instead. When you add a row, that should hopefully trigger the lookup.

0 0

Replies

replied on August 2, 2019

If I'm understanding correctly, this list is coming from a database. If so, why don't you use the Lookup rule to populate your table dropdown too?

0 0

replied on August 2, 2019

I tried to use the look up rule but it only populate the first row in the table. When I added a second row, the new row does not get populated. I think this is because the list is dependent on another data field which change dynamically based on who logged in. If i take away that dependent, then it works like you thought it should.

0 0

SELECTED ANSWER

replied on August 2, 2019 • Show version history

Try manually triggering the change event on the field it depends on in order to cause the lookup to run again.

For example,

$(document).ready(function(){
    $('.timesheet .cf-table-add-row').on('click',function(){
          $('.whoLoggedIn input').change();
    });
});

The reason you only get the first row populated is that the condition means the lookup only runs when that field changes, but triggering a change should also trigger the lookup again.

However, if you have a lot of other stuff that changes when that value changes, then you might be better off with the following option:

Add a hidden column to your table with that value.

Create a separate rule for the table that uses that field as the lookup instead. When you add a row, that should hopefully trigger the lookup.

0 0

replied on August 2, 2019

Hi Jason,

You are right. Adding change event on the dependent field works. This is way simpler than playing around with array. Lesson learned.

Thank you

0 0

You are not allowed to follow up in this post.

Question

Question

Insert values into table drop down dynamically

Answer

Replies

Sign in to reply to this post.