This question already has answers here:
jquery .load with script in it
(1 answer)
how to jQuery .load() with script tags
(1 answer)
jQuery .load() call doesn't execute JavaScript in loaded HTML file
(13 answers)
Closed 2 years ago.
I'm trying to load html using jqyery. That HTML includes a js file, and every time I try to load it it doesn't execute js file included in it. But when I write the script inside the html page it works fine.
What doesn't work:
<link rel="stylesheet/less" href="/categories/categories.less">
<div id="categories">
</div>
<script type="module" src="/categories/categories.js"></script>
What does work:
<link rel="stylesheet/less" href="/categories/categories.less">
<div id="categories">
</div>
<script >
console.log('categories has been loaded');
</script>
Related
This question already has answers here:
JQuery - $ is not defined
(36 answers)
Closed 21 days ago.
I want to test a html,css,javascript code but it don't work and I don't know why
enter image description here
Make a random name winner with personnalized input name and pop in the screen the winner of the random system.
Jquery not imported or loaded correctly..
From cdn:
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
Insert this tag befor your custom script..
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!
This question already has answers here:
How may I reference the script tag that loaded the currently-executing script?
(14 answers)
Closed 4 years ago.
Can I forward a variable from script tag to a current script? Something like this:
<script type="text/template" id="myscript" myvar="123123">
var filename = document.getElementById("myscript").myvar;
</script>
You can use document.currentScript to reference the currently running <script> tag:
<script type="text/javascript" id="myscript" myvar="123123">
console.log(
document.currentScript.getAttribute('myvar')
);
</script>
Another option is to select the script tag like you would select any element, with querySelector, and then get the attribute:
<script type="text/javascript" id="myscript" myvar="123123">
console.log(
document.querySelector('#myscript').getAttribute('myvar')
);
</script>
But when using custom attributes, it would probably be more appropriate to use a data- attribute:
<script type="text/javascript" id="myscript" data-myvar="123123">
console.log(
document.currentScript.dataset.myvar
);
</script>
This question already has answers here:
How do I pass variables and data from PHP to JavaScript?
(19 answers)
Closed 6 years ago.
I have three files a .php, a .html and a .js. How can I combine all three of them so that I can use the value of a variable set in php in JavaScript?
I will have to save this file by .php extenstion
<html>
<head> </head>
<body>
<?php
// here I can write my php code ?> // I can end it any time to include some JS code here
<script> Some js code</script>
<?php // and start again to write some more php code
?>
</body>
</html>
This question already has answers here:
How may I reference the script tag that loaded the currently-executing script?
(14 answers)
Closed 8 years ago.
I have a page for example:
<body>
<script>Other js code</script>
<hr>
...
<script src="path/{the name can be different}.js"></script>
...
<hr>
...
<script>Other js code</script>
</body>
My {the name can be different}.js script block can be inserted anyware and contains:
(function () {
window.addEventListener("DOMContentLoaded", function() {
var scripts = document.getElementsByTagName('script'),
element = scripts[scripts.length - 1];
console.log(element)
// ? How to get current script tag
}, false);
})();
This code always get the latest tag.
Is it possible to get current script tag without any script id?
Thanks!
Give your script tag an Id and get the element as following
<script type="text/javascript" id="script">
function getScript()
{
var scripts = document.getElementById('script');
alert(scripts);
}
</script>