Best way to connect an external Javascript file

mlapl1
mlapl1 Community Member Posts: 349 ☆ Roadie ☆
Hello

I have read a couple of ways of including an external JS file in a Lectora title. They involve using an HTML object but they differ in how these objects are used. One person suggests using a META Type while another suggests using the Top of File type. I guess there may be other ways too. Any recommendations? Basically, I need to run the JS through a RunJS action but I do not want long functions etc in the RunJS editor.

Thanks a lot

Andrew

Comments

  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    Indeed several approaches... Darrel is a fan of Top of File, i prefer META. Im sure Darrel will jump into this discussion ( if you check his responses, you find quite some discussions between him and Sergey about META or Top of File ..check this link: http://community.trivantis.com/forums/topic/how-do-you-add-js-and-css-to-lectora/ )

    I use the way Sergey describes. Meta for the external html object.

    Regards,

    Math
  • mlapl1
    mlapl1 Community Member Posts: 349 ☆ Roadie ☆
    Thanks Math - yes I have read some of the discussions between Sergey and Darrel ;-) . Actually I tried using <META> with my title but for some reason the file dropbox is not active (Lectora16) for the <META> tag - so I could not insert it and am just playing with the top of file approach.

    To tell you the truth, I would prefer just some kind of include of the external file rather than building everything into the page. it creates more independence and ease of changing the file content. At the moment, I am being driven insane by the fact that Lectora seems to remember the contents of the file I saved it with (even I remove the file from the extern folder) - at least I think that is what is happening. If I resave everything then it works...

    Let's see...
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    Yeah know what you mean.

    My approach ( and it works fine for me )

    If you use external Javascript Libraries ( i always do ) add them...
    - external HTML Object -> Type: Meta tags -> Edit:
    <script src="jquery-2.1.4.min.js"></script>
    <script src="TweenMax.min.js"></script>
    <script src="EasePack.min.js"></script>
    <script src="TextPlugin.min.js"></script>

    Whatever external JS library you want/need.. if none you can forget this part completely

    Then i have either project wide and/or page related javascript files both work similar...only difference is that a page specific one, offcourse only acts on that specific page:

    -external HTML Object > Type: Meta tags -> Edit:
    <script src="myPageSpecificJavascript.js"></script>

    Offcourse for all these you need to use the 'Additional Files' button to add/include these files....

    And thats where your pain probably sits... when including it copies these files to the extern folder in the Lectora folder. Thats where you need to edit them, then all is fine and updated directly.

    I always ensure i have some specific debug in it... you can use console.log("update 0306") or anything like that... now you can see whether you referring the correct Javascript. Before i used this trick i often was editing a wrong file and wondering why nothing happened... ;-) Make sure your debug message is unique enough to directly spot if your working in the correct file ;-)

    Regards,
    Math
  • klaatu
    klaatu Community Member Posts: 988
     Whoa, get it right, Darrel is NOT a fan of top of file. Darrel is a fan of header scripting. In the real world, best practice is linking to JavaScript at the bottom of the page just above the closing body tag. There is no way of doing this in Lectora (duh) as bottom of file is just that - AFTER the closing html tag. What that is there for is anyone's guess. Top of file places the content ABOVE the meta tags - again, problematic. Meta-tags - Uhg, really? I think I not only explained it sufficiently but I also provided a sample showing how it can break and fail. Just place your scripts in header scripting and Lectora will do a decent job of embedding them in the right place in the header.

    And, Yes Andrew, Lectora should add a method of adding JavaScript includes properly. Meta-tags is not it. Until then adding them with header scripting and having Lectora embed them is your safest bet.

     
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    Oops im sorry Darrel ;-).. at least i was right you would respond ;-)
  • mlapl1
    mlapl1 Community Member Posts: 349 ☆ Roadie ☆
    Thank you both Darrel and Math. Is it possible to insert a file in a Javascript action and keep it in the same directory as the html files? I know that you will have to make sure that the file actually is in the base directory of the compiled title - and it is a nuisance - but it should work and may be an option. I just don't like occupying large amounts of an html file with JS script - maybe no choice.

    And from what I understand, if I edit the file in the extern Lectora folder it should be reflected in the title both when I test and when I finally compile.

    Cheers

    Andrew

     
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    I do think when compiled it will be in the HTML folder, and indeed if you edit the file in the extern Lectora folder its relected... doublechecking the publishing part now... yes check..on publish all JS files get published in the html folder although i also see some js files in the device_desktop, device_phone... folder...might have to do with my specific setup.... not sure..would need to check that...
  • mlapl1
    mlapl1 Community Member Posts: 349 ☆ Roadie ☆
    OK - thanks Math - most of the problems I have with Lectora are simple operational issues that I need to get to know and that seem obscure to me. The complicated stuff is easier :)

    cheers and thanks again to both of you
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    @Klaatu .. hi Darrel.. as i always want to learn new things i tried 'Header Scripting' for a external JS-file. Both in Lectora 16 and 17. I was stumped that with 'Header Scripting' i couldnt get my simple JS-script not working in either version ( not seamless, normal mode ). When checking the index.html published for both versions ( image of a comparison of these added ) i did notice the only difference in the 2 files was the position of the included JS-file. Both were in the header, but the Meta-Tag one was quite on top of the header, while the Header Scripting one was much farther down... and didnot work for me.

    Just wondering...anything i did wrong or whatsup here ?
  • klaatu
    klaatu Community Member Posts: 988
    Hey Math, hope all is well by you. Absolutely. That's what I was agreeing with Andrew about; there is no proper way to add a script link just before the closing body tag. We can insert it in there with JS but that's more work. So for now the safest method is to point to your external file with header scripting and let it (cringe) embed your script.

    Recognize as well that in both of the pictures above, the JS link is above the style sheets.
  • approg
    approg Community Member Posts: 258 ♪ Opening Act ♪
    Math, you cannot insert a JavaScript element into the middle of another JavaScript element (which is what your attached image is showing). I use meta tags and header scripting depending on the circumstance.

    Maybe a solution is to use an injection script eg. put this in as header scripting

    function load_script(urls) { var i, new_script;   for (i = 0; i < urls.length; i++) {
    new_script = document.createElement('script');
    new_script.type = 'text/javascript';
    new_script.src = urls[i];
    new_script.async = false;
    new_script.defer = false;
    document.getElementsByTagName('head')[0].appendChild(new_script);
    }
    }

    And then call it like

    load_script(["http://www.jquery.com/dist/jquery.min.js", "http://www.a.com/lib.js"]);
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    Thx Darrel and approg. Still a bit confused yet though why my first and normal approach does work properly and why exact the same setup with the only difference that i use 'header scripting' does not. Probably best to add a sample. Thx again, best and most helpfull people around here on this community and you 2 certainly belong amongst them :-)

    ~Math