Another JS scoping problem
July 25, 2017 12:00 AM
Hello...
Here is what I would like to do.
On page 1 I would like to run the following JS:
instructions_blockJS=VarInstructions_Block.getValue();
and on page 2, I want to publish it as follows:
var message2 = document.getElementById("text34353");
message2.innerHTML=instructions_blockJS;
The JS produces nothing. In fact, it seems to fail.
However, if I put the 2 pieces of JS together on page 2 then all is well. It seems that the JS variable instructions_blockJS is not seen on page 2. BTW it is retrieved correctly on page 1.
I have tried adding "var" to the variable declaration on page 1 but that did not work. I guess I need to find a way to declare instructions_blockJS as a global variable and not sure how to do it in JS (especially within Lectora).
Any thoughts?
Thanks as ever
Andrew
undefined
Discussion (12)
Is there a reason why you store the value in another variable? Couldn't you just get the Lectora variable again on page 2?
message2.innerHTML=VarInstructions_Block.getValue();
undefined
Hi Tim, I have made the changes you suggest. The funny thing is that page 1 performs 3 separate database queries and displays two responses and is quite fast (unless there is a comms difficulty) but in page 2 with only the display of the page and the retrieval of the Lectora variable there is this annoying delay...
I suppose the code you've posted isn't all that's happening. How does the value from the database come into the Lectora variable? It should be possible to run this part on page1.
On page2 there should be no need to contact the database any more. Mind you do have to do something with the Lectora variable on page2 before you can access it with javascript, otherwise it won't exist. Create an action to modify the variable on page2, so Lectora knows you need it. There's no need to run that action, you can put it into an action group that's never run.
Do you know which part takes that long? Maybe it helps if you get the value from the database on the previous page and then get only the value of the variable on page2. Or try an "On: page show" action to get the value from the database which should be triggered earlier than On: Show for the textfield.
Actually, the code I posted IS all that's happening (in the JS anyway) - the page is an instructions page.
The page consists of 3 buttons (one going forward, one going back and and exit button). and a text box (as referenced above). That's it! Maybe the problem is with the "activation" of the Lectora variable (which is only reached through JS at this stage).
In answer to your comments: the database query occurs on page 1 and is never called on page 2. The delay that occurs is on page 2.
On page 2, there is no contact with the database as the Lectora variable holds all of the necessary info from page 1.
On page 2: I have not done anything with the Lectora variable but I can still access it from JS (although slowly). I will activate it as you say (I keep forgetting this Lectora quirk).
Thank you once again.
I can confirm that the JS code given by Tim (or others) is not triggered by on: showpage. It IS triggered by on show of the object in question.
Yes... That's what I do. I get the value from the database on page 1 - precisely to reduce the time. It seems to be that it's the conversion to the JS variable that takes the time.
I have not been able to trigger much with on: page show actions - I have already tried that.
undefined
Hi Tim,
undefined
no reason - just mindset to keep each step separate I guess - but will try as you suggest - but see below
I am trying to save a bit of loading time on page 2, hence the conversion of the Lectora variable on page 1. The Lectora variable itself is actually imported from a MySQL database. It takes 2-3 seconds to transform the Lectora variable and then display it in JS. I cannot display the variable directly in the text box as the variable has HTML - so have to go through JS. 2-3 seconds is not a long time - but it is disruptive - strangely, on page 2, which is very simple - basically just a textbox, it takes longer to display than on other pages which have more stuff on them. Wonder why...
undefined
Your suggestion works perfectly well (of course), Tim, but the delay remains. It is not a major problem - just a slight disruption. All I do on page 2 is an "onshow" of the textbox which runs the JS. BTW, surprisingly for me, an onshow of the page does not trigger the JS code on page2.
Might be good to add a sample. Much easier to see whats happening and add any possible fix for it. I can think of several solutions. Basically you need a container at root level of the title that will hold the variables. I do think the use of Javascript on Lectora objects delays the script from running, if you use the Javascript at the core HTML level, eg. triggering a JS on loading the HTML will fix this.
JavaScript will run while your page is being rendered. A common mistake is to execute a script that tries to access an element further down the page. This fails because the element isn't there when the script runs. Offcourse putting a Javascript on a Lectora object ensures its available, but also that can be late in the process.
Both the jQuery option $(document).ready() or the windows default 'window.onload' ensure scripts load at the proper time. I mostly use $(document).ready().
I do think using this approach would remove the delay. And using the javascript in the root of the title in stead of on a specific object might solve the page issue. Easiest would be a sample to test and show however ;-)
Yes, using an external Javascript file and declaring variables in the title level should ( at least in version 17 with seamless play enabled ) make the variables accessible on all pages. With version 16 and before each page is a separate html, and allthough using a script on title level would give you access to the same functions on each page... the variables will be reset each page. Setting them as Lectora variables might solve that in Lectora 16 and earlier. I will see if i can mockup both a 16 and 17 sample tonight...
Thank you Math as ever. Difficult to upload an example but I do have some information about the delay...
As you know, I had been complaining about an unwanted/unexplained delay. Well... as it happened a helpful colleague decided to be helpful and inserted a delay of 1.5 seconds in the Run JS action I was using. Unfortunately, this helpful colleague forgot to tell me he was being helpful and, not surprisingly, I did not look at the delays (which I discovered when my eyes fell on them by accident). So I am a bit red-faced about alerting you in this regard... Sorry to both Tim and Math.
As for the other problem, it does remain - I still cannot read the JS variable constructed on page1 from page2. To tell you the truth I have given up for the moment. I will try to optimize everything after I have completed the entire title. I just thought there might have been a simple solution such as declaring/initializing the variables further up the Lectora tree, maybe at the title level.
Thanks again...
undefined
Discussions have been disabled for this post