Question

How to automatically populate a Forms Table with multiple rows of data based on a lookup

Forms

Updated December 3, 2014

asked on December 2, 2014

Hi,

I am trying to implement this solution and am about 80% there.

I have a PO system designed with LF Forms. The user needs to be able to amend an existing PO. I need to be able to fill a table with the same data and rows as per the original PO.

As you can see below, I am able to automatically add the number of rows according to the number of options in the "Line No" field. There are 4 options, hence 4 rows in total. I am also able to automatically select each row's Line No value as per the options in the drop-down. However, the other fields to not perform their lookup. If I manually select a value from the Line No field, the Lookup works fine.

I am guessing that I need to force a trigger for the change event in order for the lookup to take place, or something along those lines.

Anyone have some idea on how to get my lookup working?

function tableUpdate() {

// Don't bother unless we have data

  if ($('.filledField option').length < 2) 
  {
			
            setTimeout(function () {
		
                tableUpdate();

            }

             , 500);

  } else {

       

            


    // Get the number of <option> tags in filledField (q11) -1 because there's a blank option

    var resultNumber = $('.filledField option').size() - 1;

    // Get all the rows of the table

    var tableRows = $('#q4 table tr');

    // Determine whether we need to add or subtract rows (-1 for the header row)

    var rowDelta = 0; 
    rowDelta = resultNumber - (tableRows.size() - 1);
alert(resultNumber + ' ' + rowDelta + ' ' + tableRows.size());
    // Add rows

    if(rowDelta > 0) {

      // Click the Add link that number of times

      repeatXTimes(rowDelta, function() {

        $('#q5').click();

      });

    // Subtract rows

    } else if(rowDelta <= 0) {

      // Find the delete buttons, do the following with eacH

      $("#q4 span.form-del-field").each(function(id, del_btn) {

        // id = row number (excluding header, starting at 0), del_btn = the delete button
		
         

        // If the row number (id) is more than we should have

        if(id >= resultNumber-1) {

          // Click the delete button
		  alert('Deleting Row ' + id + ' ' + ' ' + resultNumber);
          $(del_btn).click();

        }

      });

    }

    // Do the following for each option in filledField (q11)

    $('.filledField option').each(function(oid,opt) {

      // oid = the option line number, opt = the actual <option> element

       for (var i = 1; i <= resultNumber; i++) {

            var k = i + 1;

            $('td.filledColumn select').eq(i-1).val($('.filledField option:nth-child(' + k + ')').text());
			$('td.filledColumn').eq(i-1).trigger('lookup');
        }

      

    });

  }

}

0 0

Answer

SELECTED ANSWER

replied on December 3, 2014 • Show version history

Hi Scott,

Thank you very much for your suggestions. I have removed the FOR loop successfully, thank you.

However, using the "change" event as opposed to the "lookup" event has had no impact. The results are still the same.

SO, I found out the trick to make this work. Here is the updated last bit of code:

 // Do the following for each option in filledField (q11)
	var k = 1; 
    $('.filledField option').each(function(oid,opt) {

      // oid = the option line number, opt = the actual <option> element
		
      if(k <= (resultNumber)){
           
         k = k + 1;
		
            $('td.filledColumn select').eq(k-2).val($('.filledField option:nth-child(' + k + ')').text()).change();
			
      
    }

Because the "change" event requires an actual browser event initiated by the user instead of via javascript code, one cannot simply just assign a value to the drop down field using ".val()", you need to add ".change()" as well. It seems that you cannot do this on a separate line after the value is assigned.

$('td.filledColumn select').eq(k-2).val($('.filledField option:nth-child(' + k + ')').text()).change();

So now it's working! Thanks for your guidance.

Thanks

Sheldon

0 0

Replies

replied on December 3, 2014

Yes, the first thing I would try is to change your

$('td.filledColumn').eq(i-1).trigger('lookup');

to a change event instead:

$('td.filledColumn').eq(i-1).trigger('change');

Another thing that may be causing unexpected behavior (I can't tell without seeing more information about how your form and lookup rules are set up), is that it looks like your portion of the code that fills in the line numbers contains two loops, when I would only expect you need the one. The $('.filledField option).each() function already loops over each option returned there, and then you seem to be looping over each option again with a for loop.

1 0

You are not allowed to follow up in this post.

Question

Question

How to automatically populate a Forms Table with multiple rows of data based on a lookup

Answer

Replies

Sign in to reply to this post.