//////////////////main.js file attached
function msgbox (title,text,type,time)
{
///////////////////////////////////////////
var img = "<img src='image/"+type+".png' /> ";
$("#window .wtext").html("<table border='0'><tr><td>"+img+"</td><td>"+text+"</td></tr></table>");
$("#window .wtitle").html(title);
///////////////////////////////////////////
//$("#window .wtext").css("height",(parseInt($("#window").css("height"),10)-65)+"px");
get_center("window");
///////////////////////////////////////////
$("#window").fadeIn();
if (time!=0)
{
var t = window.setInterval(function(){
$("#window").fadeOut();
window.clearInterval(t);
},time*1000);
}
}
//////////////////myajax.js file attached
function toggle_div ()
{
msgbox("title","text","ok",3);
}
I have problem when i call msgbox from myajax.js.
how can i use my function.
it is working from another file.
i should use something for declaring global function?
you need to add both main.js and myajax.js in to your html page within tag. Then you can call directly to your function.
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript" src="myajax.js"></script>
Related
I have a module i18n.js which I import in my home.html, like this:
<html>
<head></head>
<body>
<script type="module" src="../js/lib/i18n.js"></script>
</body>
</html>
Inside the i18n.js module, I do the following:
export const t = () => {};
//
// Global scope
//
window.t = t;
I understand that accessing the global window object is the way to go in order to be able to call a method from other file inside an HTML page. But... why is this code not working?
<html>
<head></head>
<body>
<p><script>t("title")</script></p>
<script type="module" src="../js/lib/i18n.js"></script>
</body>
</html>
I get the error:
Uncaught ReferenceError: t is not defined
Because you're trying to execute t before it's available on the window, you get an error but running the function through the onload as #Rajesh suggested works properly.
const t = () => {
const pTitle = document.getElementById('pTitle');
if (pTitle){
pTitle.textContent = 'Hello World!';
}
};
//
// Global scope
//
window.t = t;
export {
t
};
<html>
<head></head>
<body onload="t()">
<p id="pTitle"> </p>
<script type="module" src="./src/js/i18n.js"></script>
</body>
</html>
I'm trying to make a javascript function to call another .js file like this:
scriptCaller.js
function callScript(file){
var script = document.createElement('script');
script.id = file;
script.type = 'text/javascript';
script.async = true;
script.src = "script/"+file+".js";
document.getElementById('scriptSection').appendChild(script);
}
Then I create some class to be called by that script in other file:
divGenerator.js
function divGenerator(){
var self = this;
var div = document.createElement('div');
this.tag = function(){
return div;
}
/*and some other function to style the div*/
}
Then i make the main file to be executed:
main.js
function build(){
callScript('divGenerator');
}
function main(){
var test = new divGenerator();
/*execute some function to style the div*/
document.getElementById('htmlSection').appendChild(script);
}
All the three file will be called in a HTML files that will execute the main function:
myPage.html
<html>
<head>
<title>myPage</title>
</head>
<script src="scriptCaller.js"></script>
<script src="main.js"></script>
<body>
<div id="htmlSection"></div>
<div id="scriptSection"></div>
</body>
</html>
<script>build();</script>
<script>main();</script>
If I correct it should display the styled div, but what I got is an error that said:
TypeError: divGenerator is not a constructor[Learn More]
But, when I move the divGenerator() class to myPage.html it works fine. Any idea to solve this problem?
You need to add scriptCaller.js and divGenerator.js to your html script element.
<html>
<head>
<title>myPage</title>
</head>
<script src="scriptCaller.js"></script>
<script src="main.js"></script>
<script src="scriptCaller.js"></script>
<script src="divGenerator.js"></script>
<body>
<div id="htmlSection"></div>
<div id="scriptSection"></div>
</body>
</html>
<script>build();</script>
<script>main();</script>
You have couple of problems in your code. First of all, do not assign id to script element same as the "exported" global constructor name. You need to remember that anything with id attribute (and name) automatically gets exposed as global variable on window object. It means that divGenerator in your case is going to be reference to HTMLScriptElement, not a constructor function.
Second problem is related to timing, since you are loading script with async attribute. This is good, but you need to realise that in this case you can't expect that script will be loaded when you call main after build(). I would suggest to wrap script creation into promise:
function callScript(file){
return new Promise(function(resolve) {
var script = document.createElement('script');
script.id = 'script-' + file; // Note different id
script.async = true;
script.src = "script/" + file + ".js";
script.onload = resolve
document.getElementById('scriptSection').appendChild(script);
})
}
and use it like this:
<script>
build().then(function() {
main();
})
</script>
I have a javaScript source file, named LIMDU.js, that contains a var and a function, like this --
var SessionTimeOutID;
function KeepSessionAlive() {
var sessionTimeoutWarning = #Session.Timeout;
var sTimeout = parseInt(sessionTimeoutWarning) * 60 * 1000;
clearTimeout(SessionTimeOutID);
SessionTimeOutID = setTimeout('SessionEnd()', sTimeout);
function SessionEnd() {
window.location = "/Account/LogOff";
}
}
and in the cshtml file, I have this:
<script type="text/javascript" src="~/Scripts/LIMDU.js"></script>
<script>
$(document).ready(function () {
KeepSessionAlive();
});
</script>
but when I try to execute the code, I get the error "KeepSessionAlive" not found.
I thought that the src code would be loaded before the local script code was executed; if that's not the case, how do I refer to a function in my local script block that's defined in a src'd file?
Check your console. Your LIMDU.js file is not compiling (probably undefined #Session ?)
I have two js files. First one (alert.js)
function test() {
var name= document.getElementById("name").value;
alert(name);
};
and second one (main.js)
document.getElementById("question_button").addEventListener("click", test());
in html i looks like that
<body>
...
<script type="text/javascript" src="js/alert.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
Function test is invoked when page is loaded. It's not what I need. It's probably very simple but I dont get it. How to make function "test" invoke only when button is pressed?
You're calling test() and passing the value it returns ( undefined ) to addEventListener. Just pass test directly as an argument instead of calling it:
document.getElementById("question_button").addEventListener("click", test);
or pass in an anonymous function:
document.getElementById("question_button").addEventListener("click", function ( ) { test(x) } );
XSL:
<script type="text/javascript">
<xsl:value-of select="concat('replaceAll(',$idS,');')"/>
</script>
HTML:
<script type="text/javascript">replaceAll(ID0ED);</script>
Javascript:
$(function () {
var cityNameRye = $("#spnCityID0ED").text().split(";")[1];
if (cityNameRye.toLowerCase() == "rye") {
//do something
}
});
I get the following error in the console which causes an issue in the site:
Uncaught ReferenceError: replaceAll is not defined
Can I create a dummy function which clears out the error?
Put this function code somewhere when it could be loaded before those from XSL are executed:
function replaceSpnCity(idPart) {
var idsToReplace = $("[id^='spnCity']"); //updated missing quote
idsToReplace.each(function() {
var id = $(this).attr('id');
var newId = id.replace(idPart,'');
$(this).attr('id',newId);
});
}
And call it from XSL like:
<xsl:value-of select="concat('replaceSpnCity('',$idS,'');')"/>
You do not have any function with the name replaceAll() in your code
try
function replaceAll(varName){
//code to execute
}
and see if you still have the error