Explore the community Forums Lectora Lectora Questions & Answers Still Struggling with External Javascript on LMS

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

    I’m still struggling with getting an external javascript to work on our LMS. The goal is to populate a drop-down list in the course with the contents of an array stored externally.

    When I run this locally, everything is fine. When I upload to the LMS, the course reads the array successfully; I know this because I added alert(arrayname.length); to the script that tries to populate the drop-down, and it shows me the correct number.

    However, the script bombs trying to fill the drop-down list.

    Here’s the HTML for the drop-down list; note the id in bold:

    <select class="combo2337" name="Units List" id="combo2337id" title="" onchange="var idx,val='';for(idx=this.selectedIndex;idx<3;idx++){if(this.options[idx].selected)val=val+this.options[idx].value+','}val=val.substr(0,val.length-1);VarDropList_0002.set(val);combo2337Object.onSelChg();" tabindex="3">
     <option value="Apples">Apples
     </option><option value="Bananas">Bananas
     </option><option value="Cherries">Cherries
     </option></select>

    Here’s the error from the console:

    Uncaught TypeError: Cannot read property 'options' of null
     at action2706 (a001_page_1.html:293)
     at <anonymous>:1:99

    And here’s the relevant portion of the script the error refers to; the error is on the third line. The script is triggered by the drop-down’s OnShow event in Lectora. My unitlist variable is null, but why?

    var unitlist = document.getElementById("combo2337id");
    var opts = units.length;
    unitlist.options.length = opts;
    • This topic was modified 5 months ago by Profile photo of Stan Miller Stan Miller.
    #350479 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    147 pts
    @Klaatu

    You need to do a few things.

    1. add an empty drop down element (It doesn’t have to be empty as this will add to what is there already).

    Use the following syntax to add options. Replace the ** with the id of your combo. Change each value and text accordingly. Add as many as you wish.

    $(‘#combo**id’).append(“Item_1”);
    $(‘#combo**id’).append(“Item_2”);
    $(‘#combo**id’).append(“Item_3”);
    $(‘#combo**id’).append(“Item_4”);

    On the drop down itself add an on change action with the following:

    VarDropList_0001.set($(“#combo267id”).val());

    Of course you may have to change the “DropList_0001” to match your empty drop down variable. Also make sure the combo has the correct ID here too.

     

    Attachments:
    1. drop-down.zip
    #350501 Score: 0
    Profile photo of Stan Miller
    Stan Miller
    Member
    beginner
    intermediate
    LUC16 Attendee
    wise owl
    contributor
    curious george
    friend finder
    LUC17 Attendee
    11 pts
    @smiller7502

    This is like Whack-a-Mole. I’ve got the script filling the drop-down list now; I had to move the script to the header and put it inside a listener to be sure the DOM was loaded before the script tried to reference the drop-down list.

    But now the on-change event doesn’t work. Similar problem, it can’t find the drop-down list. But how can that be? The on-change event can’t possibly occur before the DOM is loaded.

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

    Darrel, your solution is using jquery, yes?

    My brain must be getting foggy, but I don’t see how to use the on-change action you suggested. I need that on-change event to do a lot more than just tell me which item was selected, and the script I have — which, again, works perfectly in every mode of Lectora, including previewing in the browser — uses the selectedIndex to grab an element from an array, and splits that element to assign values to seven different variables:

    var unitlist = document.getElementById("combo2337id"); 
    var selected = unitlist.selectedIndex; //FAIL: Cannot read property 'selectedIndex' of null -- but how can unitlist be null?
    
    var fldHeading = []
    fldHeading = units[0].split(',');  
    var idxUnit = fldHeading.indexOf("Unit");
    var idxDescr = fldHeading.indexOf("Description");
    var idxRegion = fldHeading.indexOf("Region");
    var idxMarket = fldHeading.indexOf("Market");
    var idxState = fldHeading.indexOf("State");
    var idxUnion = fldHeading.indexOf("Union");
    var idxGasStation = fldHeading.indexOf("GasStation");
    var idxTobacco = fldHeading.indexOf("TobaccoSalesMinAge");
    
    var fldData = []
    fldData = units[selected].split(',');
    VarUnit.set(fldData[idxUnit]);
    VarDescr.set(fldData[idxDescr]);
    VarRegion.set(fldData[idxRegion]);
    VarMarket.set(fldData[idxMarket]);
    VarState.set(fldData[idxState]);
    VarUnion.set(fldData[idxUnion]);
    VarGasStation.set(fldData[idxGasStation]);
    VarTobacco.set(fldData[idxTobacco]);

     

    #350524 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    147 pts
    @Klaatu

    I think your code might work if you add [0].

    var unitlist = document.getElementById("combo2337id")[0];

    Yes, I’m using jQuery, however, I apologize because I sent that post out this afternoon as I was running out of my office like I was on fire to go home and I accidentally attached the wrong zip.

    I prefer working with the jQuery object and the methods it provides over using plain JavaScript (probably because I’m lazy).

    Anyway, I think this attachment will help. It works perfectly. The magic happens on the onChange event of the drop down. I commented the code so I hope it steers you in the right direction.

    Darrel

     

    • This reply was modified 5 months ago by Profile photo of Darrel Somoza Darrel Somoza. Reason: typo
    Attachments:
    1. drop-down-II.zip
    #350528 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    147 pts
    @Klaatu

    Actually, adding the [0] wont work. Use jQuery (as in my attachment) or you can use plain JavaScript but you’ll have to manually code the long way what jQuery is doing behind the scenes. I told you I was lazy.

    #350533 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
    67 pts
    @mnotermans5114

    You could try to add some simple javascript call to the dropbox. To make sure the dropbox is actually available when your trying to access it. Local browsers testing and LMS testing might differ..

    This is what you have..

    var unitlist = document.getElementById("combo2337id"); 
    var selected = unitlist.selectedIndex; //FAIL
    
    

    So add some visual action to the unitlist so your sure its available..

    var unitlist = document.getElementById("combo2337id");
    unitlist.style.backgroundColor=red; // changing the color to see if its available
    var selected = unitlist.selectedIndex; //FAIL
    
    This way you at least know you access the proper element. If i am puzzled by something not working i mostly try to get to the issue at hand in small steps.
    
    #350755 Score: 0
    Profile photo of Stan Miller
    Stan Miller
    Member
    beginner
    intermediate
    LUC16 Attendee
    wise owl
    contributor
    curious george
    friend finder
    LUC17 Attendee
    11 pts
    @smiller7502

    Darrel, you are a gentleman and a scholar. Thank you very much!

    I still have a broken version that seems to me to be identical to a version that works except that the broken version was built in Lectora 17 and the working version was built in 16. I’ll spend some time later trying to pin that down to see if there’s some bug in 17. And I still don’t understand why my original code didn’t work.

    But it’s working now, with your help. Thank you, thank you, thank you!

    Stan

    #350802 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    147 pts
    @Klaatu

    You’re very welcome. 🙂

     

    #350804 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    147 pts
    @Klaatu

    Try to turn off seamless play in the v17 version. I have not had a title yet in which seamless play does not cause problems. I don’t think its ready for prime time.

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

You must be logged in to reply to this topic.