How to wait for PyScript to be fully initialised (environment included)? - javascript

Good morning,
I would like to wait for a message (logged to my browser's console by a script I imported in my HTML tag) to be logged and then do an action in JavaScript.
For example, I'd like to wait for "ABCD:READY" to be printed in the console to use a function called finallyStart().
Is it possible ?
I thought I only needed to read the content of stdout to do this, but it looks like browsers don't call their console output stdout...
I also tried to find an answer in stackoverflow, but none of the posts I found were similar to the one I'm currently writing.
I'm a novice when it comes to JS in browsers (I've only used NodeJS for back-end), so thanks in advance for your help !

I faced the same problem and eventually came up with this hacky but working solution.
First create a dummy element in your html.
<div hidden id="start"></div>
Make an event for that element call a function in your js script.
document.getElementById("start").onclick = main;
Then trigger that event manually from your python script.
from pyscript import Element
Element("start").element.click()
No python code can execute until pyscript has finished initializing, so this seems like a reliable strategy. It would be even better if you could call the main() function directly from your python script, but i didn't have the patience to figure that out.
p.s. For some reason it takes a few seconds after pyscript has officially initialized for the code to kick off (at least in my test). I have no idea what's happening during that time, though i suppose it doesn't make a big difference to the already hefty build time.

Related

Issue with Google Tag Manager implementation. "Uncaught TypeError: Wb.set is not a function"

Recently I started having Issues with the Google Tag Manager.
I can't track it to a Tag or a Trigger (activated and deactivated individually to check).
The error started occurring this week (no updates were made to the system or template). I noticed when testing the implementation of a new Tag in GTM. That shortly worked but then this error message started showing in the console. Removing the new Tag didn't change the situation and since the code worked for a while (some 30minutes) I don't expect a direct relationship between the new tag and the error.
All I have is the console in the frontend that shows the following error message:
Uncaught TypeError: Wb.set is not a function
The error stems from this file:
https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX
Wb is started as a Map just a few steps earlier:
Wb=new Map(Vb.h.F);
Wb.set("style",{ya:4});
The GTM Script is copied and pasted from the GTM-Admin without any change made to it and is included in the header.php file of the Wordpress template. I tried copying it again and replacing the script that was in the header.php previously but the result was the same.
If looking at the actual error message in the console helps, the issue can be seen on the following URL:
https://www.bindella.ch
Any help in solving this or at least pointer to where to go look for errors would be very much appreciated.
Thanks
Very interesting, and yes, you're right, the error in the minified code makes no sense:
Let's try something different. First, just export your GTM container (the workspace that is synced with prod/live) as a JSON file in Admin section.
Open the file, look for something like set("style" See if you can find that Wb. Well, don't expect it to be Wb. I guess GTM minifies the code. It may be some weird chat bot, or something like that. From there, you'll be able to find the tag or variable that causes the issue.
I didn't look too deep into it, but that part of code looks sophisticated enough to be a part of the core container code. Actually, we can check it right here, on SO cuz it uses GTM too, let's do that.
Yes, SO has identical code. Looks like it's indeed core GTM. Well, there's a tiny probability that when you built the prod library last time, GTM had an issue and it deployed an artefact.
Try making a new workspace, make a nonsensical change in it and publish it to production. See if it lets you publish. Then see if that fixes the issue.
Now, if it doesn't then the next thing I'd try is trying to re-importing the exported JSON, forcing GTM compare the import to what's there and find differences.
Now if that shows no issues, then I would make a brand new container, load the config in it and try replacing the gtm loading script to see if the error still happens. It sounds like you can do that. If you can't, look a plugin like redirector to redirect the request to a different container.
Still the error with the new container? How about if you load a completely empty container? Got any errors?
There's a very slim chance that your front-end deploys one of a few vars GTM uses too, thus conflicting with your GTM. But it's very unlikely. Why would you use something like google_tag_manager or google_tag_data in the global scope...
If nothing helps and only the empty container doesn't give errors, then... well, then make a list of all tags firing along that error and start disabling them one by one. Or use breakpoints to narrow it down to the tag/library that causes it.

How to run js code pulled from server side in angularjs?

I am using Laravel as my back-end and Angularjs as my front-end for my website. I need to pull some js code (advertisement purposes, like Adsense) from server side and run it in Angularjs.
I got some ideas from https://www.ng-book.com/p/Security/ . First I use $sce to make the js code trusted so that angularjs can run it,
$scope.safeJsCode = $sce.trustAsJs($scope.unsafeJsCode);
then I use ng-load to eval() the safeJsCode
<script ng-load="run()"> </script>
$scode.run() = function()
{
eval($scope.safeJsCode.toString());
};
However, I was not able to run it. Can someone give me some ideas on how to solve this predicament? Thanks!
So if I understand correctly, you think that ng-load can call your 'run' function.
Empty script tag won't fire a 'load' event, so no wonder that it is not being executed.
If you really need to dynamically load some script and execute it you don't need no script tags-just as soon as you fetch script from the server and get safeJsCode, eval it.
Now I don't expect you to heed my advice, but instead of doing eval(), you should really think about a way how you can achieve with just data. In most cases this can be solved by just having your own smart code.
There are case which comes to mind- like a dashboard with customizable widgets, where people can write 3rd party widgets. Problem is, these never catch on and they are very prone to bugs and usually are sluggish.
If you trully need dynamicity though, you could try loading those script with https://github.com/systemjs/systemjs

casperjs exit()/die() doesn't return to current directory

I'm fairly new to casperjs (running on phantomjs) - I'm sure I'm probably missing a basic programming element here; looking to see if anyone has some insight. At the end of my script I call casper.exit(), which does exit the script and seemingly steps back into the current directory, however the current directory is not displayed in the command window.
I don't think it's related to the script itself and I can replicate with even the most basic scripts. Below is a screenshot of the outcome:
Where the yellow circle is after the .exit() call, and I would be expecting to see the cd (underlined in red)
I've tried using casper.die() with similar results.
Although it's not a big deal, it might be confusing to someone less familiar with casper/phantom and the script itself.. I guess I'm left with a few questions:
Is this expected behavior from how phantomjs/casperjs is built?
If not, is this a 'bad' thing? (affecting memory, stack, etc.)
Is there a way to return to the CD using casper/phantom or some other method in the script itself?
Bonus question.. is there a difference between using casper.die() and casper.exit()? I see that .die() logs a status message but other than that is there a preferred method to stop script execution or is it just syntactics, as in PHP ?
It is the normal behavior of the casperjs executable on windows. This has likely something to do with the python part of the executable since phantomjs does not have this behavior.
Another indicator is that when casperjs is run through phantomjs like described here, there is no such behavior and I get a normal prompt after exit.
I would say, this is a cosmetic problem that can throw you off when you first encounter it. This isn't really a problem.
Regarding the Bonus question: die can be seen as a fancier exit since it calls exit itself, but it is a more controlled way to exit casper. There is an optional message that is written to stout in red and an additional die event handler. die also sets the execution time of the script.

trying to call functions asynchronously in javascript (with angularjs)

I'm trying to call a function (for TTS) in phonegap that varies in length (i'm reading different news headlines) immediately following each headline, I have a voice recognition function, prompting the user for a voice command. like this...
navigator.tts.speak("If you would like to go to the next article, please say continue. Otherwise, say read me for another section");
$scope.reco();
The reco() calls voice recognition. I cannot get the previous call
navigator.tts.speak(*<news_headline.>*)
to finish before reco() is called. I am using angular, so I've tried using angular's promises ($q) (in a few different ways), but I can't seem to figure out how to get speak() to wait before reco() is called. Any suggestions?
One more dimension: I am using phonegap (almost entirely for android purposes), and in my little experience, it can cause a lot of trouble.
Any help regarding this would be appreciated.
I just checked the documentation for both TTS plugins listed on build.phonegap.com and both have callback functionality.
Try this:
navigator.tts.speak("If you would like to go to the next article, please say continue. Otherwise, say read me for another section",$scope.reco);

I would like to interactively detect when an ActiveX component has been installed, and asynchronously refresh a portion of the page

I am working on a website, and I would like to refresh a portion of the page after an ActiveX component has been installed. I have a general idea of how to do this with polling, which I am working on getting going :
function detectComponentThenSleep(){
try{
// Call what I want ActiveX for, if the method is available, or
// ActiveXComponent.object == null --- test for existance
document.getElementById("ActiveXComponent").someMethod();
}
catch{
// Try again, if the method is not available
setTimeout(detectComponentThenSleep, 100);
}
}
However, what I would REALLY like to do is something like this:
ActiveXObject.addListener("onInstall", myfunction);
I don't actually have the source for the ActiveX component, but I have complete control of the page I am hosting it on. I would like to use JavaScript, if possible, to accomplish this.
So, my question is 1.) will this actually work with the polling method? and 2.) Is there an interrupt/listener like way of doing this? I am sure I am missing something with connecting the dots here, I can already detect if the component is present, but I am having trouble doing this asynchronously.
Thank you very much for your time and help,
-Brian J. Stinar-
1.) This didn't work at all with the polling method.
2.) I couldn't find an interrupt / listener way of doing this.
I finally ended up just putting this entire ActiveX compnenent on it's own page. ActiveX does a page refresh on install, so I simply had the default page behavior as the what I wanted to happen when the component wasn't available. This is different than what I was trying to do, but it worked OK for my purposes.
My recommendation to anyone in a similar situation is to just put the ActiveX component on it's own page, and pass data back and forth from this page. Otherwise, you are probably going to have a lot of the problems that I had.
-Brian J. Stinar-

Categories

Resources