Question

Populate Chain-Select using Lookup Rules

Forms

Updated January 18, 2017

asked on January 11, 2017 • Show version history

Good morning,

I'm trying to populating a set of drop-down menus, "Chain-Select" menu. A typical chain-select menu would consist of selecting a choice in the first drop-down and then the second drop-down will be available with choices; choosing something from the second drop-down would trigger choices of the third drop-down and so on.

What we are trying to accomplish here is that the first drop-down should have a default choice selected, then the second should have another default choice selected (I know, it seems to defeat the purpose, but we have a reason).

The problem is that we can't go past the first choice before the chain gets halted. In other words, we would like a "Fixed" set of values all the way to the end of the chain, then it's up to the user to change it.

Any idea on how to set default values across the chain. I tried setting the default values as:

$("#Field1").val("something1");
$("#Field2").val("something2");
$("#Field3").val("something3");
$("#Field4").val("something4");
$("#Field5").val("something5");

but it just assigns the first choice "something1" and the rest are left blank.

0 0

Answer

SELECTED ANSWER

replied on January 11, 2017

Hi Raul,

Is the option list in your dropdown field populated by a lookup rule? If so, you could try the following code, which applies to Forms 10.1 and above:

$(document).on("onloadlookupfinished", function(){
  $("#Field1").append('<option>Choice 2</option>');
  $("#Field1").val("Choice 2");
})

But if your dropdown field is not related with lookup rule, you could simply append the choice before set it as selected.

0 0

Replies

replied on January 11, 2017

UPDATE:

So far I'm able to make it work with:

$("#Field1").trigger("change");

and the rest of the fields get populated.

I'll need to work in getting these values from a Lookup rule instead of hard-coded values.

I have some hidden fields that display the values from the Lookup rule, but I can't pass them to the drop-down.

For example. In a textbox I can pass the value of "Field1" being "Something1", but on the drop-down1 I can't pass this value as default.

We tried:

var myvar1 = $("#textbox1").val();

Then

$("#Field1").val(myvar1);

but it's not passing it. Any ideas?

0 0

replied on January 13, 2017

Rui, thanks for the code.

It is my understanding that your sample code only works on 10.1 Update 2 and above. We haven't upgraded to that yet so I'm afraid this won't work.

However, we've moved past a few obstacles and at this point we are able to trigger the chain somewhat. The problem we ran on is that for example, let's say that in drop-down1 we have a value that triggers a default value in drop-down2, and drop-down two triggers a default value in drop-down3.

This only seems to work when the chain of drop-downs has only one value anyways. We realized that if any drop-down within the chain contained more than one choice, the chain breaks.

We are looking for a way to choose the value of the next drop-down by choosing the first available value, and then it's up to the user if they want to change it.

Something like, drop-down1(value1)-->Triggers-->drop-down2(value1)-->Triggers-->drop-down3(value1)

Any ideas?

0 0

replied on January 13, 2017 • Show version history

UPDATE:

So far I have this code, which is supposed to select automatically the first available choice; actually it chooses the second, but our first choice is blank for each drop-down.

$('#Field1 option').eq(1).prop('selected', true).trigger('change');
$('#Field2 option').eq(1).prop('selected', true).trigger('change');
$('#Field3 option').eq(1).prop('selected', true).trigger('change');

It's just that some times it triggers and some times it does not. I'm thinking in doing some type of alert dialog box to test, I just don't know if this approach is taking me to the right direction or not, before putting any work on this.

Suggestions?

0 0

View 1 previous reply

replied on January 16, 2017

Since the field is populated by lookup, you need to make sure your code runs after lookup is done. When lookup is done it would clear current field value if the current value is not in lookup results. So that's why I used "onloadlookupfinished" in previous code.

If you are not on 10.1 yet, you could try set some timeout function and execute the code after lookup result is detected on the field.

0 0

replied on January 17, 2017 • Show version history

Thanks Rui,

I took your suggestion and added the following code.

 setTimeout(
    function() {
     
    
        $('#Field1 option').eq(1).prop('selected', true).trigger('change');
        $('#Field2 option').eq(1).prop('selected', true).trigger('change');
    	$('#Field3 option').eq(1).prop('selected', true).trigger('change');
    	$('#Field4 option').eq(1).prop('selected', true).trigger('change');
    	$('#Field5 option').eq(1).prop('selected', true).trigger('change');

    }, 5000
  );

This was in conjunction with reading this post: https://answers.laserfiche.com/questions/109401/How-to-Create-a-Spinner-or-Loader-for-Forms

Now the drop-downs populate as expected after a 5 second delay, which is about after the Lookup rule finished I'm guessing.

I'll keep playing with the idea and see what we can come up with. Thanks for pointing me to the right direction.

0 0

replied on January 17, 2017

Rui, so is it safe to say that even if we were capable of using "onloadlookupfinished", we would still experience minor delay before the form fired whatever we needed, and that the approach I'm taking is just a manual way of measuring how much the Lookup rule will take to load, so that I can adjust the number of seconds accordingly; is that right?

0 0

replied on January 18, 2017

Yeah you are right, you have to wait for the on load lookup to finish.

1 0

replied on January 13, 2017

UPDATE:

Here is raw HTML. If placed in a static HTML content it works just fine. Then it could mean that this is interfering somehow with the Lookup rules. Will keep digging.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <script>
        $(document).ready(function () {

            $("select[name='select_name1']").change(function () {

                $('#select_name2 option').eq(1).prop('selected', true).trigger('change');
                $('#select_name3 option').eq(1).prop('selected', true).trigger('change');

        });

        });
    </script>

</head>
<body>

    <form>

        <select name="select_name1" id="select_name1">
            <option value="value0">value0</option>
            <option value="value1">value1</option>
            <option value="value2">value2</option>
        </select>

        <select name="select_name2" id="select_name2">
            <option value="value0">value0</option>
            <option value="value1">value1</option>
            <option value="value2">value2</option>
        </select>

        <select name="select_name3" id="select_name3">
            <option value="value0">value0</option>
            <option value="value1">value1</option>
            <option value="value2">value2</option>
        </select>

    </form>

</body>
</html>

0 0

You are not allowed to follow up in this post.

Question

Question

Populate Chain-Select using Lookup Rules

Answer

Replies

Sign in to reply to this post.