load page using javascript on div makes functions Uncaught error [duplicate] - javascript

This question already has answers here:
Can scripts be inserted with innerHTML?
(26 answers)
Closed 2 years ago.
In Page index.php i have this code to load a page on div. The idea is have a master template and load dynamically content on a div.
<script>
async function loadPage(page){
var page = page;
let url = page + '.php';
content.innerHTML = await(await fetch(url)).text();
}
</script>
<button onclick="loadPage('settings')">Settings</button>
<button onclick="loadPage('users')">Users</button>
<div id="content"></div>
Each page has his own html and javascripts, settings.php has html and some javascript functions:
<script>
function helloWorld(){
alert('helloWorld');
}
</script>
<button onclick="helloWorld()">Click</button>
The page load fine, but i cant excecute the helloworld() and i get this error on console:
(index):1 Uncaught ReferenceError: helloWorld is not defined
at HTMLAnchorElement.onclick ((index):1)
, but if the function is on index.php runs fine.
My guess is javascript not detect the new function loaded.

There is a thread here that explains the various options and that innerHTML can't be used to inject JavaScript.

Related

html loaded with jQuery.load() doesn't render p5.js [duplicate]

This question already has answers here:
jQuery .load() call doesn't execute JavaScript in loaded HTML file
(13 answers)
Closed 6 months ago.
I have a website composed of multiple html pages ('home.html', 'gallery.html' etc), injected to index.html using jquery load().
Each of these pages reads data from csv tables. To do this, each page calls a js script that reads the csv and assigns data from the table to html elements, using p5.js loadTable().
This works fine for each page being the main html, but as soon as I inject them into the index.html, sketch.js doesn't recognize its p5.js syntax anymore (I think that's the issue here): key functions like preload() and draw() don't run unless called, and loadTable() isn't recognised either.
sketch.js is read, I've pinged from it to the console, just the p5 doesn't work as mentioned above.
Below is a slim version of my code. I need to keep the main structure of html pages dynamically loaded into index.html, and I need to read my content from csv's. Any advise on how to solve this?
index.html:
<html>
<head>
<!-- p5.js and dom -->
<script src='./lib/p5.min.js'></script>
<script src='./lib/p5.dom.min.js'></script>
<!-- jQuery min -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<header>header, applies across the website></header>
<div id="activePage"></div>
<script>$("#activePage").load("home.html");</script>
</body>
</html>
home.html:
<div id="tempTarget"></div>
<!-- js to read the csv and assign to #tempTarget -->
<script src='./script/sketch.js' defer></script>
sketch.js:
var data;
var loaded = false;
function preload() {
data = loadTable(
'./assets/copyText.csv', 'csv', 'header',
// Callback:
function(table) {
loaded = true;
});
}
function draw() {
// check if table data is loaded
if (!loaded) {
console.log('Data not yet loaded');
return;
}
// if data is loaded, get cell (0, 0) into #tempTarget
document.getElementById("tempTarget").innerHTML = data.get(0,0);
}
Solved: all code using p5.js - in my case, using loadTable() - needs to be fired from index.html:
<script src='./script/sketch.js' defer></script>
needs to move from home.html to index.html.
I've added defer to avoid firing the script before the DOM is in place.
That's it!

How can i load .js file in html with button [duplicate]

This question already has answers here:
How do I include a JavaScript file in another JavaScript file?
(70 answers)
Closed 2 years ago.
I would like to load a javascript file in an html document.
I need to do it with a bbutton.
I have two files the "index.html" and "testing.js"
i have to load the whole of the js file.
how could this be possible?
If you have jQuery loaded in your page, just write the following line:
$.getScript("testing.js");
Otherwise you need to add a script tag as below:
var scriptTag = document.createElement('script');
scriptTag.setAttribute('src','testing.js');
document.head.appendChild(scriptTag)
also you can set async attribute to true as well.
scriptTag.async = true
Alternative (non-jQuery):
document.getElementsByTagName('body')[0].innerHTML += "<script src='testing.js'></script>";
document.getElementsByTagName('body') gets an array of elements of body tag. [0] selects the first (and only, usually) element of that array.
Next, .innerHTML accesses the code inside the element (i.e., our only body tag here) and += adds the string ("<script src='testing.js'></script>") after the HTML already in it. And then the script is loaded.
Overall:
<html>
<head>
<script>
function loadScript() {
document.getElementsByTagName('body')[0].innerHTML += "<script src='testing.js'></script>";
}
</script>
</head>
<body>
<button onclick='loadScript()'></button>
</body>
</html>
I do not know the structure of your HTML, but you could do this:
var button = document.getElementsByTagName('button')[0],
script = document.getElementsByTagName('script')[0];
button.addEventListener('click', handler, false);
function handler() {
script.src = 'testing.js';
console.log(script);
}
<button>OK</button>
<script src=""></script>

How to call an external function internally in javascript? [duplicate]

This question already has answers here:
javascript <script> tag - code execution before src download
(4 answers)
Closed 8 years ago.
I am relatively new to JavaScript so this might be somewhat trivial. However I can't seem to find the answer to this question.
Say I have a JavaScript file (bar.js) with a function in it called foo(). I want to call this function (foo) inside a script tag. I would like it to work like so.
<script type="text/javascript" src="bar.js">
foo();
</script>
I am not able to get this to work. I have ran the JavaScript console with my browser and what it seems to be doing is...nothing. No syntax errors or anything.
I can run a function similarly with a button click...using the script tag above and this.
<button type="button" onclick="foo();">Click Me</button>
I could do it this way, but in the actual circumstance I need to pass parameters into the function that is being called on the button click. I can't get those recognized either. I'm sure that something to do with scope.
The way I tried this was like so...
<script type="text/javascript" src="bar.js">
var a = "blah";
var b = "blab";
</script>
.... (some more html)
<button type="button" onclick="foo(a,b);">Click me </button>
Here I get that a is undefined. Which leads me to think that it is a scope problem. The script tag is in the head section and the button is in the body section. Can you put script tags outside of the head and body tags to make global data?
Thanks for the help in advance.
I have never used jsfiddle before and was having trouble getting it to work so I'll just post and example code here.
<html>
<head>
<script type="text/javascript" src="bar.js">
</script>
<!--From what yall say I should have another script
tag here for anything else. Say some variable?-->
<script type="text/javascript">
var a = "hello";
var b = "text";
</script>
</head>
<body>
<!--This should work now?-->
<button type="button" onclick="foo(b,a)">
Click me
</button>
</body>
</html>
bar.js contents:
function foo(id,string){
document.getElementById(id).innerHTML = string;
}
I got this to work.
Thanks everyone.
You need to first include the javascript containing the function:
<script type="text/javascript" src="bar.js"></script>
and then call it in another script tag:
<script type="text/javascript">
foo();
</script>
In your example you seem to have mixed 2 notions into a single script tag which is invalid: include an external javascript file and in the body of the script tag write your code.
According to the specification:
The script may be defined within the contents of the SCRIPT element or
in an external file. If the src attribute is not set, user agents must
interpret the contents of the element as the script. If the src has a
URI value, user agents must ignore the element's contents and retrieve
the script via the URI.
So basically you should avoid such situations and have separate script tags for including external files and for writing inline js.

Uncaught SyntaxError: Unexpected token < and Uncaught ReferenceError: myFunction is not defined [duplicate]

This question already has answers here:
Does an external .js file require <script> tags?
(4 answers)
Closed 8 years ago.
I have written the following code on myscript.js file.
`<script>
function myFunction()
{
document.getElementById("demo").innerHTML="Paragraph Changed";
}
</script>`
Then linked the myscript.js as external javascript file on my external.html page.The code of external.html is following:
<!DOCTYPE html>
<html>
<head>
<script src="http://127.0.0.1/javascript/myscript.js">
</script>
</head>
<body>
<h1>My Webpage</h1>
<p id="demo">This is a Paragraph.</p>
<input type="button" value="Click" onclick="myFunction()">
</body>
</html>
If i put those files on my localhost javascript folder, Google Chrome gives me the errors:
Uncaught SyntaxError: Unexpected token < (myscript.js:1)
Uncaught ReferenceError: myFunction is not defined (external.html:10)
Mozilla Firefox gives me the errors:
SyntaxError: syntax error (myscript.js:1)
ReferenceError: myFunction is not defined (external.html:1)
If i write the myscript.js codes inside external.html file and click the button i get no error. The error occurred when i try to run the html file with external myscript.js file. I have googled this problem several times and did not get the answer. Please help me.
An external script shall be pure javascript code and must not contain the tokens
`<script>
and
</script>`
Do only place the following in your myscript.js file:
function myFunction() {
document.getElementById("demo").innerHTML="Paragraph Changed";
}

Update a div with jQuery [duplicate]

This question already has answers here:
jQuery AJAX cross domain
(15 answers)
Closed 8 years ago.
I have a jQuery script for refresh the content of a div. The content is get from an external page like mypage.php. The code is this:
page.html:
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
//var first_load =
function firstLoad()
{
$('#load_tweets').load('mypage.php');//.fadeIn("slow");
}
var auto_refresh = setInterval(
function ()
{
$('#load_tweets').load('mypage.php').fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds
</script>
</head>
<body onLoad="firstLoad()";>
<div id="load_tweets"> </div>
</body>
</html>
If i get the content from mypage.php, that is a php script with an echo command at the end, all work fine. But now i need to get the content of div from here:
http://37.187.90.121:3874/currentsong?sid=1&c=
The output of this source is like this:
Inna - Un Momento
If i replace "myage.php" with "37.187.90.121:3874/currentsong?sid=1&c=" the jquery script in page.htm don't work and return a blank output. What is the problem?
EDIT1:
ok is a policy problem, how i can resolve it?
EDIT2:+
The proxy php page solution don't work.
I have make this php page:
<?php
echo file_get_contents("http://37.187.90.121:3874/currentsong");
?>
But i have this error message:
Warning: file_get_contents() [function.file-get-contents]: http:// wrapper is disabled in the server configuration by allow_url_fopen=0 in /home/mhd-01/www.radiowhitecrash.com/htdocs/Player/GTitle/current_g2.php on line 2
Warning: file_get_contents(http://37.187.90.121:3874/currentsong) [function.file-get-contents]: failed to open stream: no suitable wrapper could be found in /home/mhd-01/www.radiowhitecrash.com/htdocs/Player/GTitle/current_g2.php on line 2
Edit3:
The external service give me a javascript to get the information:
window.centovacast===undefined&&(window.centovacast={}),window.centovacast.options===undefined&&(window.centovacast.options={}),window.centovacast.loader===undefined&&(window.centovacast.loader={attempts:0,external_jquery:!1,loaded:!1,ready:!1,widget_definitions:{},url:"",load_script:function(e){var t=document.createElement("script");t!==undefined&&(t.setAttribute("type","text/javascript"),t.setAttribute("src",e),t!==undefined&&document.getElementsByTagName("head")[0].appendChild(t))},load_widget:function(e){var t=this.widget_definitions[e];t.ref===null&&(t.ref=t.define(jQuery))},jq_get_jsonp:function(e,t,n){return jQuery.ajax({type:"GET",url:e,data:t,success:n,dataType:"jsonp"})},jq_ready:function(){this.ready=!0;for(var e in this.widget_definitions)typeof this.widget_definitions[e].init=="function"&&this.widget_definitions[e].init(jQuery)},jq_loaded:function(){this.external_jquery||jQuery.noConflict(),jQuery.getJSONP=this.jq_get_jsonp;for(var e in this.widget_definitions)this.load_widget(e);this.loaded=!0;var t=this;jQuery(document).ready(function(){t.jq_ready()})},wait:function(){setTimeout(function(){window.centovacast.loader.check()},100)},check:function(){typeof jQuery=="undefined"?(this.wait(),this.attempts++):this.jq_loaded()},init:function(){var e=document.getElementsByTagName("script"),t=e[e.length-1],n;n=t.getAttribute.length!==undefined?t.getAttribute("src"):t.getAttribute("src",2),n.match(/^https?:\/\//i)||(n=window.location.href),this.url=n.replace(/(\.(?:[a-z]{2,}|[0-9]+)(:[0-9]+)?\/).*$/i,"$1"),this.external_jquery=typeof jQuery!="undefined",this.external_jquery||this.load_script(this.url+"system/jquery.min.js"),this.check()},add:function(e,t,n){this.widget_definitions[e]||(this.widget_definitions[e]={define:n,init:t,ref:null}),this.loaded&&this.load_widget(e),this.ready&&t(jQuery)}},window.centovacast.loader.init()),window.centovacast.loader.add("streaminfo",function(e){e.extend(window.centovacast.streaminfo.settings,window.centovacast.options.streaminfo),window.centovacast.streaminfo.settings.manual||window.centovacast.streaminfo.run()},function(e){return window.centovacast.options.streaminfo=e.extend({},window.centovacast.options.streaminfo,window.centovacast.streaminfo?window.centovacast.streaminfo.config:null),window.centovacast.streaminfo={pollcount:0,settings:{poll_limit:60,poll_frequency:6e4},state:{},registry:{},check_username:function(e){e+="";if(!this.registry[e]){if(this.registry.length==1){for(var t in this.registry)e=t;return e}return""}return e},get_streaminfo_element:function(t,n){return e("#"+this.registry[t].id[n])},_handle_json:function(t){if(!t)return;var n=this.check_username(t.rid);!n.length&&t.requestdata&&(n=this.check_username(t.requestdata.rid));if(!n.length)return;if(t.type=="error"){var r=t?t.error:"No JSON object";this.get_streaminfo_element(n,"song").html('<span title="'+r+'">Unavailable</span>'),typeof this.settings.on_error_callback=="function"&&this.settings.on_error_callback(r)}else{var i,s=t.data[0];this.state=s,t.data[0].songchanged=s.song!=this.settings.lastsong,typeof this.settings.before_change_callback=="function"&&this.settings.before_change_callback(t);for(i in s)i!="song"&&(typeof s[i]=="string"||typeof s[i]=="number")&&this.get_streaminfo_element(n,i).html(s[i]);if(typeof s.track=="object"){for(i in s.track)i!="buyurl"&&i!="imageurl"&&i!="playlist"&&(typeof s.track[i]=="string"||typeof s.track[i]=="number")&&this.get_streaminfo_element(n,"track"+i).html(s.track[i]);this.get_streaminfo_element(n,"playlist").html(typeof s.track.playlist=="object"?s.track.playlist.title:"");var o=s.track.buyurl?s.track.buyurl:"javascript:void(0)";e("img#"+this.registry[n].id.trackimageurl).attr("src",s.track.imageurl),e("a#"+this.registry[n].id.trackbuyurl).attr("href",o)}typeof this.settings.after_change_callback=="function"&&this.settings.after_change_callback(t);var u=s.song;u&&u!=this.registry[n].current_song&&(this.get_streaminfo_element(n,"song").fadeOut("fast",function(){e(this).html(u),e(this).fadeIn("fast")}),this.registry[n].current_song=u)}},handle_json:function(e,t,n){e&&window.centovacast.streaminfo._handle_json(e)},poll:function(t){var n=(this.settings.local?"/":window.centovacast.loader.url)+"external/rpc.php",r={m:"streaminfo.get",username:t,charset:this.registry[t].charset,mountpoint:this.registry[t].mountpoint,rid:t};e.getJSONP(n,r,this.handle_json)},_poll_all:function(){for(var e in this.registry)typeof e=="string"&&this.poll(e);(this.settings.poll_limit===0||this.pollcount++<this.settings.poll_limit)&&setTimeout(this.poll_all,this.settings.poll_frequency)},poll_all:function(){window.centovacast.streaminfo._poll_all()},register:function(e,t,n,r){this.registry[t]||(this.registry[t]={charset:n,mountpoint:r,current_song:"",id:{}});var i=e.match(/^cc_strinfo_([a-z]+)_/);i&&(this.registry[t].id[i[1]]=e)},load:function(){var t=e(this).attr("id");if(typeof t!="string")return;var n=t.replace(/^cc_strinfo_[a-z]+_/,""),r="",i="",s=/_cs-([A-Za-z0-9\-]+)$/,o=s.exec(n);o&&(r=o[1],n=n.replace(s,"")),s=/_mp-([A-Za-z0-9\-]+)$/,o=s.exec(n),o&&(i=o[1],n=n.replace(s,"")),window.centovacast.streaminfo.register(t,n,r,i)},run:function(){e(".cc_streaminfo").each(window.centovacast.streaminfo.load),window.centovacast.streaminfo.poll_all()}}});
You can check it at this link:
http://cp.eu2.fastcast4u.com:2199/system/streaminfo.js
Unfortunaly with no identation and in add i have few experiences with javascript i cant' edit the output of this script.
This script give me an output like:
"Radio Name - Author - Title of song"
and this is a link (if you click on it open another page).
I need to get only "Author - Title of song" with no link. Any idea?
Edit4:
I have make another test, i have call the streaminfo.js in a span and i prove to use the document.getX of javascript to get the content of the span in various ways, but i get "undefined" output:
<html>
<head>
<script language="javascript" type="text/javascript" src="http://cp.eu2.fastcast4u.com:2199/system/streaminfo.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
var div = document.getElementsByClassName('cc_streaminfo')[0];
document.write("w1" + document.getElementsByClassName('cc_streaminfo')[0]);
document.write("w2" + document.getElementsByClassName('cc_streaminfo')[1]);
document.write("w3" + document.getElementsByClassName('cc_streaminfo')[2]);
var container = document.getElementById ("cc_strinfo_summary_radiowhite");
var spans = div.getElementsByTagName("span");
document.write("il mio script: " + spans[0] + "!");
document.write("il mio script: " + container + "!");
//var first_load =
function firstLoad()
{
$('#load_tweets').load('current_g.php?song=ciao');//.fadeIn("slow");
}
var auto_refresh = setInterval(
function ()
{
$('#load_tweets').load('current_g.php?song=' + cc_streaminfo).fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds
</script>
</head>
<body onLoad="firstLoad()";>
<br>
<span id="cc_strinfo_summary_radiowhite" class="cc_streaminfo">sss</span>
<div id="load_tweets"> </div>
</body>
</html>
I think this has something to do with CORS. Basically, unless the webpage at 37.187.90.121 explicitly states that it trusts the sources of the domain under which your website is running, your browser will not make the request.
If you are the owner of 37.187.90.121, you can add custom headers to allow inclusion of your response in other webpages.
Check your javascript console of your browser to get more details.
Using jQuery to get (.load()) the contents from a div on another page ( same domain ) to add to a div on the current page is like :
$("#dividoncurrentpage").load("/otherpage.php #dividonotherpage");
Is this what you need ?
It's because:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
mstaessen has explained on the post above.
The alternative solution is: You can create a file called, for example song.php and add the following code.
<?php
echo file_get_contents("http://37.187.90.121:3874/currentsong?sid=1&c=");
?>
And update the script to
<script type="text/javascript">
//var first_load =
function firstLoad()
{
$('#load_tweets').load('song.php');//.fadeIn("slow");
}
var auto_refresh = setInterval(
function ()
{
$('#load_tweets').load('song.php').fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds
</script>
Its better to use jQuery $.ajax to get the content. Link
By using $.ajax you have many ways to work around this issue like crossDomain or get the result in Json format by setting the dataType that you will receive from the server to JSON or JSONP

Categories