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

Question

Question

Sort dropdown values with javaScript --> after lookup AND value added to list

Forms Version 10 Web Customizations
Updated October 9, 2020
asked on January 17, 2019 • Show version history

It's a long story, but here are the essentials. I have a drop down field that gets populated by a lookup. Then if certain criteria is met, I add on an <option> value to the list using javaScript:

//add Janice Vassell id dept = 42      
   if ($('.depCode input').val()=='42'){
	  $.each($('.AltApvList option'), function(){
        allApvrs.push($(this).val());
	  });//each
      
	    if ($.inArray('JANICE N VASSELL', allApvrs) == -1){
	      	$('.AltApvList select').append('<option>JANICE N VASSELL</option>');
	    }
    }//if dept = 42
  });

^In this example I add "JANICE N VASSELL" to the drop down list.

I really need to add one or two more names to the list as well. The issue is with sorting. How can I use javaScript to sort this list after I have added the custom values? I can't get it to sort the lookup values or anything else....

I have tried several sites (stack overflow & custom pen) but I believe the code their isn't compatible with the jQuery library Forms is running. That or I just don't know how to alter it to work correctly. 

@████████ I am guessing this is right up your alley.

Any suggestions are welcome :)

Thank you in advance

Chris

 

0 0

Answer

SELECTED ANSWER
replied on January 17, 2019

Try something like this

  $('.trigger input').on('click',function(){
    // drop down starts with "A,C,D" options
    
    // these are the new values
    var list = ['B','E','F'];
    
    // add all options with values to the list
    $('.dropdown option[value]').each(function(){
      list.push($(this).val());
    });
    
    // remove the existing options
    $('.dropdown option').remove();
    
    // sort the values    
    list.sort();    
    
    // add the new options
    $.each(list,function(index,value){
      $('.dropdown select').append($('<option></option>')
      						.attr('title',value)
      						.attr('value',value)
      						.text(value));
    });
  });

 

2 0
View 5 previous replies
replied on January 18, 2019

This worked great. I got rid of the first line since I want it sort on load. I also had to put a small delay (setTimer) to wait for the lookup and javaScript to add in the custom value. THEN it sorted beautifully. 

After beating head against the wall for several hours yesterday, I finally asked for help. 

Thanks for this!

0 0
replied on January 18, 2019

I have another one for you actually! There's an on load "lookupcomplete" event in Forms 10.2+ that you can attach the event to and you won't need to set a timer or timeout delay.

$(document).ready(function () {
  $(document).on("lookupcomplete",function(event) {
    //Your Code Here
  });
})

When the form loads, it will run the lookups, and when that is finished it will trigger the lookup complete event; the great thing about this is that the "delay" will only be as long as it takes to load the values, and you don't have to worry about occasional latency making a lookup take longer than your hard-coded delay.

2 0
replied on October 9, 2020

I am using your code under 

$(document).on("lookupcomplete",function(event) {

and it is not working quite well for me. At times, it works correctly. But at times it shows multiple values of B, E, F in the dropdown.

Wondering if it has anything to do with page load. Any suggestions?

0 0
replied on October 9, 2020

If you're getting multiple B, E, F values, then it sounds like your function is also being triggered by lookups that do not update the values in the list so it is adding duplicates.

If you have multiple lookups on your form, then you'll need to limit the dropdown update to only run for the lookup that affects that specific dropdown.

The following post addresses the lookupcomplete event and has a few posts that show how to narrow it down to a specific lookup rule.

https://answers.laserfiche.com/questions/108471/Can-we-get-a-lookups-complete-custom-event-listener-please#121241

1 0
replied on October 9, 2020

Thank you, I will look into it.

0 0
replied on October 9, 2020

I used $(document).on('onloadlookupfinished', function(event){

  instead of

 $(document).on('lookupcomplete', function(event){

and that worked.

 

0 0
replied on October 9, 2020

That should be fine if it is a one-time event, such as populating a dropdown from a query that is not dependent on a form field.

0 0
replied on October 9, 2020

In my case, that's correct.

0 0

Replies

replied on January 17, 2019

Give this a try.

sortItems($("#q1 select")[0]); // get the select element

function sortItems(selElem) {
    let optionsToSort = selElem.options; // get the options from the dropdown
    let selectedOption = selElem.value; // in case there's an item already selected, preserve it

    // Forms uses Lodash, so we can too. 
    // Why write a sorting function when somebody else can do it for us?
    let sortedOptions = _.sortBy(optionsToSort, function(item) {
        					return item.value;
    					});

    $(selElem).empty(); // empty the dropdown
    $(selElem).append(sortedOptions); // refill it with sorted goodness
  
    $(selElem).value = selectedOption; // if there was a previously selected item, restore it
}

 

2 0
replied on January 18, 2019 • Show version history

I swapped out the #ID with the class I assigned the field and it works great! I also had to put a timer (setTimeout) to wait for the lookup and custom value that I add.

This is cool about Lodash. Do you know of any other libraries that Forms uses? Very Helpful.

Useful code I will save for future use.

Thanks again!!

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

Sign in to reply to this post.

Details
Related Posts
Loading ...