Explore the community Forums Lectora Lectora Questions & Answers Populate a drop-down list with javascript

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #348525 Score: 0
    Profile photo of Stan Miller
    Stan Miller
    Member
    beginner
    intermediate
    LUC16 Attendee
    wise owl
    contributor
    curious george
    friend finder
    4 pts
    @smiller7502

    How can I populate a drop-down list with javascript in Lectora?

    I need to allow learners to tell me which of our 230+ stores they work in. The list of stores changes as we open new ones, and I don’t want to have to edit and republish the course every time. So, I have the list in an external file. I know how to read the file. I have a javascript that can pop up an alert showing each store number as it iterates the array. But I cannot figure out how to I add the elements of the array to my drop-down box.

    Outside of Lectora, I do this, and it just works:

    select = document.getElementById( 'stores' );
    for( store in stores ) {
      select.add( new Option( stores[store] ) );
    } 
    
    

    Inside Lectora, I do this, and nothing — no error, empty drop-down list:

    select = combo1609.objLyr.ele;
    for( store in stores ) {
      select.add( new Option( stores[store] ) );
    }

    Am I not setting select to the drop-down list correctly? Is there a hidden language difference that means I need to do something other than select.add( new Option … to add an option to a drop-down list? Am I doing something else wrong?

    #348527 Score: 0
    Profile photo of Andrew Corbett
    Andrew Corbett
    Member
    intermediate
    wise owl
    advanced
    curious george
    picture perfect
    contributor
    1 pt
    @acorbett3701

    Hi Stan,

    I don’t have an answer, unfortunately.  However, I do know that when I’ve populated Lectora screen elements from custom javascript I’ve needed to examine closely the actual HTML that Lectora produces to discover where precisely I need to do the substitution.

    Also, I’ve found jquery particularly useful for this purpose as it makes it easy to select the specific element you are trying to manipulate.  Here is the resource that got me started with that:
    http://trivantis.com/blog/using-jquery-lectora-customize-e-learning-courses-part-2

    Hope this is helpful.
    andrew

    • This reply was modified 2 weeks, 5 days ago by Profile photo of Andrew Corbett Andrew Corbett. Reason: fixed tagging mess
    #348530 Score: 0
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    47 pts
    @mnotermans5114

    Hi Stan, i do think jQuery UI ( http://jqueryui.com/controlgroup/ ) does a great job at that. If im not wrong i have it used in several Lectora projects.

    Gonna look for you if i can find a sample.

    Kind regards,

    Math

    #348554 Score: 1
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    47 pts
    @mnotermans5114

    Hey Stan,

    Shared my solution to this here:

    Fill Stan’s Drop Down List

    Just plain old vanilla javascript. Works fine.

    I do think that maybe the only thing that you missed in your solution was the proper id of the dropdownList.

    As you see in my sample the name to refer is combo39id…
    You could give that a try, or just dissect my sample.

    Kind regards,

    Math

    This post has received 1 vote up.
    #348556 Score: 0
    Profile photo of Stan Miller
    Stan Miller
    Member
    beginner
    intermediate
    LUC16 Attendee
    wise owl
    contributor
    curious george
    friend finder
    4 pts
    @smiller7502

    Maths,

    This wasn’t exactly the solution I needed, but it gave me the clues I needed. Thank you very much!

    First, I was indeed not correctly identifying the control. Silly me for thinking I could find the element ID within the .awt instead of previewing in a browser and looking at the source.

    Second, this bit that I was trying originally does not work in Lectora, for reasons I don’t understand but no longer care about:

    for( store in stores ) {
      select.add( new Option( stores[store] ) );
    }

    My challenge with your solution was that it required the drop-down list to have the correct number of elements to start with, and that will change for me, growing by one every time we open a store. But this works perfectly:

    var droplist = document.getElementById("combo1069id");
    var opts = stores.length;
    droplist.options.length = opts;
    for (var i=0; i<opts; i++){
    droplist.options[i].value = i;
    droplist.options[i].innerHTML = stores[i];
    }
    
    Now I get to complicate it by adding more elements to the array. But I'm on the way, and I wouldn't be without your help. Thanks again!

    Stan

     

    #348599 Score: 0
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    47 pts
    @mnotermans5114

    Yeah, after i uploaded my solution i immediately knew…wait what if… if you cant get it working with a list that hasnt a preset length let me know, and i will jump on it too 😉

    #348626 Score: 0
    Profile photo of Stan Miller
    Stan Miller
    Member
    beginner
    intermediate
    LUC16 Attendee
    wise owl
    contributor
    curious george
    friend finder
    4 pts
    @smiller7502

    Nope, I’m good, thanks! I knew how to resize the droplist.options array, and it works great! Thanks again for your help.

    Stan

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.