2nd dropdown on screen load not working

[Wendy]

I have 2 dropdown boxes that I want loaded upon screen load. The first one works fine. The 2nd one is dependant on the 1st one and will not load the list. It will load after I select a different value on the first dropdown but not upon initial screen load. How do I get this to work?

[Megan]

Hello Wendy,

We have a post on our blog site that may be exactly what you are looking for! Please check out the example on this blog post: http://blog.profoundlogic.com/profound- ... tered-data! Of course, if you have any additional questions, please let us know and we'll be happy to help!

Thanks,

[Wendy]

Fantastic, I'll check it out!
Thank you! Wendy

[Wendy]

Hello Megan,

Great blog post but unfortunately the user doesn't have to enter anything at the point when I want the drop downs loaded. When the screen initially loads the user's default warehouse displays (this is the first drop down field). This is then used to load the category drop down but it doesn't seem to have a value until the user changes the warehouse. I want the category drop down to load upon screen load also, not just when they change the warehouse drop down.

Thank you!
Wendy

[Scott Klement]

This sounds like a timing issue to me. If the contents of one dropdown are based on another, you need to make sure the first one has finished loading before you load the next.

If you want it to react to changes made to one, you need to code that (using the "onchange" event or one of the other JavaScript events). It's not going to automatically re-load the dropdown if you don't write code to make it happen.

If you'd like more specific advice (rather than the rather general tips I've provided, above) please post the screen code so we can understand all of the technical details.

[Wendy]

I've attached the screen code. When the screen loads the warehouse is populated with the user's default warehouse. I've tried different scenario's with the different event's but I can't seem to find what works.

Thank you so much!
Wendy

[Megan]

Hello Wendy,

It sounds like this may be a race condition, meaning that things aren't happening in the right order because of asynchronicity. Since the first box will take some time to populate, the second box may ask for it's value before it has finished loading. You can try to use setTimer() to delay the second box in asking for the first box's value. This can be done in the onload event of the screen, similar to the onchange events of the blog's example. You won't be able to use get(this) to get the first box's value in the onload event, but you would be able to use get("first_box_id") to get the first box. A general example is below.

In the onload event of the screen:

Code: Select all

setTimeout(function(){
  applyProperty( "second_box_id", "select box", get("first_box_id") );
  applyProperty( "second_box_id", "field type", "select box" );
}, 500);

The above code will wait 500ms before running the code in the function, giving the first box a chance to populate and have a value. You may need to change the wait time depending on your screen's load time.
(I started writing before Scott posted and just decided to finish it.)

I hope this helps!

Thanks,

[Wendy]

That worked like a charm Megan! We knew it was a timing issue, but just didn't have enough experience behind us to solve it!

Thanks again!
Wendy

[Scott Klement]

Just taking a quick glance (I did not take the time to code it up or try it) I see two problems with this:

1) You have POSCAT loading earlier than WAREHS.

Since POSCAT needs data from WAREHS, this won't work, since WAREHS hasn't been drawn yet, the call to get() will always be blanks. Use the "Elements" tab to rearrange these, so that POSCAT comes after WAREHS. (Highlight POSCAT and click the button that looks like a down arrow to move it after WAREHS)

2) In WAREHS, you have this:

Code: Select all

applyProperty('POSCAT','choices parameter value', this.value);
applyProperty('POSCAT', 'field type', 'select box');
pui.click();

I don't think you wanted that 'pui.click' in there. You are telling it to do two things simultaneously -- both to reload the POSCAT select box (by applying the field type) and also to submit the screen back to the server-side (RPG? Node?) program. It doesn't make sense to do both of these, you should do only one... either the pui.click() or the applyProperty lines, not both.

I would suggest removing the pui.click().

Result:

Code: Select all

applyProperty('POSCAT','choices parameter value', this.value);
applyProperty('POSCAT', 'field type', 'select box');

3) In POSCAT, you have this in the "onkeypress" event:

First of all, I really question if you want to re-load POSCAT each time someone presses a key on POSCAT. This seems like it would be very confusing and hard for the user to deal with. So please consider whether you truly want to do this.

In the event that you do, there are some problems with this code:

Code: Select all

applyProperty('POSCAT','choices parameter value', WAREHS.value);
applyProperty('POSCAT', 'field type', 'select box');
pui.click()

I don't know what WAREHS.value is meant to be...? Is this that weird thing where sometimes (but unreliably) the browser will automatically load DOM objects into variables that have the same name as their ids? I would strongly discourage you from using that approach. Instead, please use the APIs to retrieve data from the widgets. (Or, if you're really sure the DOM object will suffice, then please retrieve the DOM object in your code rather than expecting the browser to do it for you.) It's not much work and will save you a ton of headaches.

And, just like the previous note, I would remove the pui.click(), it does not make sense to do both the applyProperty and the pui.click().

Result:
Either (a) Right-click the 'onkeypress' property and do "remove property value". Or, (b) if you truly want this behavior where it will reload each time the user presses a key (I don't understand why) then do:

Code: Select all

applyProperty('POSCAT','choices parameter value', pui.get("WAREHS"));
applyProperty('POSCAT', 'field type', 'select box');

4) In POSCAT in the 'onchange' event, you are doing: pui.click()

This might be fine... it depends on what you're trying to accomplish, here.. but this will submit control back to the RPG program when someone changes this dropdown. This doesn't make sense in conjunction with the 'onkeypress' if you still want that to reload the dropdown every time the user presses a key. but, if the 'onkeypress' was a mistake, and you do want the RPG program to run each time the user makes a selection, then this does make sense.

[Scott Klement]

Megan,

The only reason the setTimeout() helps is because the 2nd dropdown is loading before the first one in the Elements tab sequence. Your solution causes it to first do an SQL statement with a blank value, and then the timeout causes it to do a second one 500ms later that will work. That'll achieve the end result, but why not have it do the right statement first, so the second one isn't necessary?

Also, your solution has a chance (though probably not a very high chance) of failing due to timing. Since it is running two SQL statements asynchronously, it's possible that the first statement will be delayed accessing the DB for more than 500ms... in which case, it might come back later than the second statement, causing the blank value to replace the proper value.

I would only use setTimeout if rearranging the elements isn't a viable solution.