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

Question

Question

Populate a Table with a Lookup Rule that has multiple values

asked on March 24, 2015

I am trying to fill a table with budget codes based on an employee. Some employees have only one code and others have multiple codes. My fill works for those who have one but does not for those who have 2 or more. 

I tried some javascript that I found in other questions but still does not seem to be working. I am new to javascript so I am thinking I need to adjust it somehow.

Field Labels.png
JavaScript.png
Field Labels.png (7.88 KB)
JavaScript.png (17.56 KB)
0 0

Replies

replied on March 26, 2015

Hello Brandon, 

Would you mind providing a more complete view of the form so that I can more clearly see what fields JavaScript is pointing to? 

0 0
replied on March 26, 2015

I think this is what your looking for.

View 1.png
View 2.png
View 3.png
View 1.png (77.48 KB)
View 2.png (76.33 KB)
View 3.png (62.84 KB)
0 0
replied on March 26, 2015 Show version history

I do not see the field with class filledField on the form. It is a hidden drop-down that the look-up is occurring in?  

 

You also may want to change the way this code is structured. I see you have your function defined and call it after a set amount of time, then you have it run in a loop until the look-up happens. You probably want to call the function tableUpdate just once, after the look-up takes place. Something like this: 

$('.filledField input').change(new function(){
    setTimeout( afterDelay, 2500 );
  });

 

Another thing, are you having an issue creating new rows if there is more than one value in the list? I think you may need to target the click for the add button differently. Right now it looks like you are targeting the complete table. Instead try: 

$('#q12 .cf-table-add-row form-q').trigger('click');

0 0
replied on March 26, 2015

I think I am using the code completely wrong. What I am trying to do is when the employee type is selected and the type of change is selected, such as "Additional Hours", a table shows up and it should be filled in with the account codes related to the employee. The table that I am looking up from has the employees listed with each account code that is associated to them. Some can have one and others have more then one. I want the table to show all that are associated to the employee. Not wanted the employee to have to add rows.

0 0
replied on March 26, 2015 Show version history

This type of code could work for that, it will just be a little tricky. 

0 0
replied on March 26, 2015

Yes I can be. What is a CFW?

0 0
replied on March 26, 2015

I actually found some code that has been used to accomplish this. The idea is that you will fill a drop-down field with a look-up, then you use a for loop to move through the options in the drop-down and insert them into rows of a table. 

//THIS FUNCTION RUNS WHEN THE DOCUMENT LOADS- MANY SMALLER TASKS ARE BUNDLES INTO THIS FUNCTION
$(document).ready(function () {

//THIS IS THE FUNCTION THAT FILLS MY TABLE
//THE LOOKUP THAT IS HAPPENING HERE IS NOT DIRECTLY INTO THIS TABLE. THE LOOKUP IS BEING PERFORMED IN ANOTHER FIELD, A DROPDOWN FIELD. THE VALUES OF THIS HIDDEN DROPDOWN FIELD ARE THEN BEING REDESTRIBUTED INTO THE TABLE
  function FillTable(classBase) {

//THIS FINDS HOW MANY VALUES WERE INPUT INTO THE HIDDEN DROPDOWN AND THEN THE FOR LOOP RUNS FOR THAT MANY ITERATIONS. THE CLASS FOR THE DROPDOWN IS filledField
    var resultNumber = $('.filledField').size();
//THESE ARE THE TERMS FOR THE FOR LOOP. FOR i THAT IS EQUAL TO 1 UNTIL i IS EQUAL TO THE NUMBER OF INPUTS IN THE DROPDOWN    
    for (var i = 1; i < resultNumber; i++) {
      
//THIS TRANSLATES THE ITERATION OF THE LOOP TO TARGET THE CORRECT ROW IN THE TABLE. THE TABLE I AM TRYING TO FILL HAS A CLASS info-table
      var iPlusOne = i + 1;
      var nthTableRow = $('.info-table tbody tr:nth-child(' + i + ')');
//PLACES THE VALUE FORM THE FIRST DROPDOWN INTO THE CORRECT TABLE ROW. THE CLASS FOR THE INPUT FIELD IN THE TABLE IS putHere
      var Value = $('.filledField option:nth-child(' + iPlusOne + ')').text();
      nthTableRow.find('.putHere input').val(Value);    
    }
  }
  
//THIS SETS A DELAY ON WHEN THE ABOVE FUNCTION CAN BE RUN. UNITS OF MILISECONDS
//THIS SAYS TO WAIT FOR THE HIDDEN DROPDOWN TO CHANGE i.e. FOR THE LOOKUP TO COMPLETE, THEN DELAY BEFORE RUNNING THE CODE TO FILL THE TABLE
  $('.completed-holder input').change(new function(){
    setTimeout( afterDelay, 2500 );
  });

//RUNS THE FILL TABLE ACTIVITY AFTER THE DELAY HAS COMPLETED
  function afterDelay() {
    FillTable();
  }
  
//END FUNCTION
});

 

To this section of code, just add the line to create the correst number of rows in the table 

0 0
replied on March 27, 2015

So to make this work I need to add two drop-down fields? One for the hours and one for the budget code? And give them a CSS Class of ClassBase?

0 0
replied on March 27, 2015

Yes, create the two drop-down fields and give them the class filledField1 and filledField2. You do not need to worry about classBase. So if you are having two drop-downs, you need to have two sections in your for loop. It will look like this: 

function FillTable(classBase) {
    var resultNumber = $('.filledField1').size();   
    for (var i = 1; i < resultNumber; i++) {
	
      var iPlusOne = i + 1;
      var nthTableRow = $('.info-table tbody tr:nth-child(' + i + ')');
	  $('#q12').trigger('click');
	  
      var Value1 = \$('.filledField1 option:nth-child(' + iPlusOne + ')').text();
      nthTableRow.find('.putHere1 input').val(Value1);
   
      var Value2 = $('.filledField2 option:nth-child(' + iPlusOne + ')').text();
      nthTableRow.find('.putHere2 input').val(Value2);
      
     
    }
  }
  

I also included the trigger to create a new row for every iteration of this loop. 

0 0
replied on March 27, 2015

I added this in but now my look up don't seem to be working at all. When I type in the employee ID it should bring in the name and location and position. It doesn't now. It also is not filling in my table with the persons hours and budget code.

0 0
replied on March 27, 2015

I did some extra testing and got this set of code to work: 

 

$(document).ready(function () {
  
function FillTable(classBase) {
    $('#q6').trigger('click');
  
  var resultNumber = $('.filledField1 option').size();
   $('#q6').trigger('click');
    for (var i = 1; i < resultNumber; i++) {
      var iPlusOne = i + 1;
      var nthTableRow = $('.info-table tbody tr:nth-child(' + i + ')');

      var Value1 = RemoveUniquify($('.filledField1 option:nth-child(' + iPlusOne + ')').text());
      nthTableRow.find('.putHere1 input').val(Value1);
      
      var Value2 = RemoveUniquify($('.filledField2 option:nth-child(' + iPlusOne + ')').text());
      nthTableRow.find('.putHere2 input').val(Value2);
      
     
    }
}

function afterDelay() {
  setTimeout( FillTable, 2500 );
};
  
   function RemoveUniquify(input){ //  |
    return input.slice(input.indexOf('_') + 1);
  };
  
 $('#q1').on('change', 'input', afterDelay);

});

Here are the screenshots for how I set up the form and the lookup. 

Notice that you need to put classes on both the table as a whole as well as individual fields within the table. 

0 0
replied on March 27, 2015

Thank you so much for your help!! So I created a new form to just have to table like yours. When I use an employee that just has one account code it filled the table with 3 rows of the same information. When I use an employee who has more than one (in this case 3) account code I don't get anything returned.

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

Sign in to reply to this post.