data-callback Function in Recaptcha not being called properly - javascript

Update: I am encountering this issue only with the chrome browser for some reason.
I have in my html head tag a java script that I load using the following statement:
<script type="text/javascript" src="script.js"></script>
I am also loading the ReCaptcha java script using the following:
<script type="text/javascript" src="https://www.google.com/recaptcha/api.js"></script>
In the body of my html code, I am calling the following ReCaptcha Code:
<div class="g-recaptcha" data-callback="recaptchaCallback" data-sitekey="Key"></div>
If I execute the code locally (i.e. on my development computer), everything works fine. Meanwhile, if I publish my Site to a Server, the data-callback function, which is in my script.js file loaded as explained above, does't get called.
Why is this happening?

Related

Loading external javascript in html when using TEdgeBrowser

It seems when i use TEdgeBrowser and navigate to my html file, that loading external local javascript files in that html does not work. -nothing happens
for example i have in html:
<!DOCTYPE>
<html>
<head>
</head>
<body>
<script src="test.js"></script>
</body>
</html>
And javascript file:
alert('HELLO');
It is simple example that should message me HELLO, but doesn't matter what is in javascript, it just doesn't load.
I don't get any DevTools errors.
When i run the html in normal browser for example chrome or edge on my pc, it works fine.
Also, when i have a script that is not local, but remote, then it works too. So it seems that the problem is only with local files. (I run delphi as administrator).
What could be the problem? I have delphi 10.4.2

Embedding external script into Next.js application

I've been trying to embed an external JavaScript source into my Next.js application and keep receiving following error:
Failed to execute 'write' on 'Document': It isn't possible to write
into a document from an asynchronously-loaded external script unless
it is explicitly opened.
The code I am trying to use can be found here - The map with the vessel has an option to embed it. So far the component that generates this error looks like this:
<div className={styles['container']}>
<Script type="text/javascript">
var width="100%";var height="400"; var mmsi=228402900;
</Script>
<Script
type="text/javascript"
src="https://www.vesselfinder.com/aismap.js">
</Script>
</div>
If I copy the embed code into CodePen it works just fine - link to my codepen with the embedded map here.
Does somebody know what could be the problem here?
The issue occurs because the external script is being loaded asynchronously by next/script, thus ignoring the document.write() call present in the script.
From Document.write() MDN documentation:
Note: Using document.write() in deferred or asynchronous scripts will
be ignored and you'll get a message like "A call to document.write()
from an asynchronously-loaded external script was ignored" in the
error console.
You'll need to set the Script strategy to beforeInteractive so the script is added to <head>, and explicitly set the defer property to false to prevent the script from being loaded asynchronously.
<Script
type="text/javascript"
src="https://www.vesselfinder.com/aismap.js"
strategy="beforeInteractive"
defer={false}
></Script>

IE script source load issue

I have written some javascript functions and saved the file as dashboardjs.jsp. The reason why the file is made as jsp is that i wanted to use struts2 tag inside the scripts. Now i call this script in a script tag as follows:
<script type="text/javascript" src="/dashboardjs.jsp"></script>
After loading this script i am just trying to call a function in the above script on load
<script type = "text/javascript">
$(function(){
getTrend(id,true,false); //this function is defined in dashboardjs.jsp
});
</script>
The above works completely fine in FF,Chrome but in IE it throws error saying getTrend is undefined. In IE developer tool (network tab) it shows that the call to the script dashboardjs.jsp is made multiple times. My question is why IE is behaving in this way? Is there any solution for this problem? Please suggest.

Certain .js pages not loading in time

I have certain pages on my site that loads a good amount of JavaScript files. In the code below, edit_onload() is in script1.js. Typically all the scripts load fine and edit_onload fires successfully. On occasion it seems like script1.js isn't loading in time because edit_onload() errors with object expected. If you refresh the page everything will load fine.
My question is, shouldn't the <script> tag below wait for all of the .js files to load and then execute edit_onload()?
<script LANGUAGE="javascript" DEFER="true" for="window" event="onload">
<xsl:comment>
<![CDATA[
edit_onload();
]]>
</xsl:comment>
</script>
<script language="javascript" src="/_scripts/script1.js" defer="true"></script>
<script language="javascript" src="/_scripts/script2.js" defer="true"></script>
<script language="javascript" src="/_scripts/script3.js" defer="true"></script>
I think, an implementation of processing of deferred scripts is browser specific. For example, they can handle inline and external scripts in different queues. In general the 'defer' attribute is just a recommendation provided by a site developer for a user agent, but the user agent will not necessarily abide by the recommendation.
Also you should try using 'defer="defer"'. Can you move the call to the script1.js itself? Also you can periodically check an existence of a specific element moved to the end of the content being loaded and run the method only after the element is discovered.
BTW, you could possibly gain more control over script loading if you use a dynamic script loading metaphor (the link is just one of examples).

Why is jQuery not working in the browser action popup of a google chrome extension?

I've created a button whose function is to hide itself when clicked. But, it isn't working.Here's the code :
<html>
<body>
<button id="b">HIDE</button>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#b").click(function(){
$("#b").hide();
});
});
</script>
</body>
</head>
What's wrong with it?
That should work, but I'd strongly suggest you research the HTML for a valid document, i.e. </head> must appear before <body>.
Along with what alex said, it's possible that Chrome is blocking your request to the CDN-hosted jQuery. You can either give that domain valid permissions in manifest.json or simply download the copy of jQuery and store it locally.
If you are using SSL for your site, then you should serve your javascript/js file via https, else chrome will block it and causing your site's feature that is using that script not working.
I noticed that you are using http to call jquery from google cdn. May be it is causing that problem.

Categories