Question

Default selection in dropdown in a table

Forms

Updated April 21, 2015

asked on April 21, 2015

I have a dynamic table with a dropdown list in one of the columns. That list is being populated with a database lookup.

When the form loads and when a row is added, the dropdown value is "undefined" . I want the default of the dropdown to be "0000".

I've written some javascript that sets the default of all dropdowns whose value is "undefined" in the column. It's run when the form loads and when a user clicks on the "Add" link to add another row. But I can't seem to get it to set the default when the form loads. It leaves the dropdown list blank. Once a user clicks the "Add" link, it sets the default of all undefined dropdowns in the column to "0000".

With the use of some alerts, I could see that the code inside the if statement is being invoked on form load and for every new row created. Not sure why the field doesn't show the default value.

Any help would be appreciated!

Here's how I'm doing it:

 setClientIDDefault();
 $(document).on('click','#q11', setClientIDDefault);
 
  function setClientIDDefault() { 
      var clientID;

      // for each row in table    
    	$('#q12 tbody tr').each(function () {      
          	if ( clientID === undefined ) {
                    // set default client id to 0000
                    $(this).find($('select[id^=Field28]')).val("0000");
                }
        }); 
  }

q11 is the "Add" link, q12 is the table, and Field28 is the dropdown control.

0 0

Answer

SELECTED ANSWER

replied on April 21, 2015

Carl, you're right. It's a timing issue. I used the setTimeout event and my script now works like a charm.

Thanks so much!!

0 0

Replies

replied on April 21, 2015

The value "undefined" is being populated by a lookup rule on the form correct?

Try AjaxComplete instead of AjaxStop?

Your problem appears similar to one I had over here about waiting for data to finish populating a dynamically filled drop-down (like what you're doing) without waiting for user interaction. In this example, we're using the drop-down options to fill a table.

The page loads, which executes the javascript, but the ajax calls are still populating the dropdown values, so the javascript can't work with the data yet. One work around was to put the execution of the javascript on a timer to execute a second after the page loads and has given enough time for ajax to populate the values. The other option is to bind to the ajax events itself which is what we're trying to achieve with ajaxComplete and ajaxStop.

1 0

replied on April 21, 2015

I am confused. You can call the function iside a function that runs when the document loads and you would be fine. Are you saying taht is not working?

0 0

replied on April 21, 2015

Hi Sheila,

Change line 1 to:

$(document).ready(function(){ 
    jQuery(window).bind("ajaxStop", setClientIDDefault()); 
});

This will run your function AFTER your lookup completes upon page load.

Cheers,

Carl

0 0

replied on April 21, 2015

I tried Carl's solution, but it had no effect. The field still doesn't have the default set to "0000".

Kenneth, to answer your question, within the $(document).ready function, I call the setClientIDDefault function so that the field in the first row, which already exists, is set to the default. Then I call setClientIDDefault every time a row is added to the table.

When the form loads, the default isn't set (even though I know it's getting down into the right part of the setClientIDDefault function). The function recognizes that the value it undefined, and the if statement is satisfied. When I add a new row, it looks through all the rows and it sets those dropdowns that are blank to the default. So, the first time I click to add a row, the values in both the first and second row are set to the default.

I don't understand why it's not working for just the first row when the form is loaded. I've tried using the "onload" event too. The only thing that works is if I use an event that's connected to another field, for instance: $(document).on('blur','#q3', setClientIDDefault);

I must be missing something.

0 0

You are not allowed to follow up in this post.

Question

Question

Default selection in dropdown in a table

Answer

Replies

Sign in to reply to this post.