JavaScript interdependent functions - javascript

I have this in my HTML file:
<script src="/file.js"/>
<script>
func_from_file();
main_func(){
alert("some alert");
}
</script>
And this in my file.js:
func_from_file(){
alert("some alert from file");
}
main_func();
So I have this script in HTML file that calls the function from file.js, and also have a script inside file.js that calls function from html file. How to avoid reference error?
P.S. I can't splice the scripts, can't put script from HTML page inside some file.js, and I can't change loading queue. Help me please.
EDIT:
I will try to correct my question.
HTML page:
<head>
<script src="/file.js"/>
<script>
func_from_file();
start(){
main_func(){
alert("some alert");
}
}
</script>
</head>
<body>
<button onclick="start()"/>
</body>
And file.js:
func_from_file(){
alert("some alert from file");
}
main_func();
NOW it's true code. I have forgot half of it.

I think your problem is not that the functions are wrong, but that you're declaring your script tags wrong, try this:
HTML:
<script src="folder/structure/here/file.js"></script>
<script>
func_from_file();
main_func(){
alert("some alert");
}
</script>
JS:
func_from_file(){
alert("some alert from file");
}
$( document ).ready(function() {
main_func();
});
EDIT:
This is what I got now, I think this is what you want?
HTML:
<html>
<head>
<script src="file.js"></script>
<script>
func_from_file();
function main_func(){
alert("some alert");
}
</script>
</head>
<body>
<button onclick="main_func()"/>
</body>
</html>
JS:
function func_from_file(){
alert("some alert from file");
}
main_func();
or if you want to load the page before showing main_func()
function func_from_file(){
alert("some alert from file");
}
$(document).ready(function() {
main_func();
});

You can put the call of main_func() in file.js inside window.onload = function() {}
This way it will call once whole page gets loaded
or put the main_func() call in file.js inside setTimeout function of javascript and put the timeout according to your convenience.

Related

How can I load all the website content before call a JavaScript function in php

<?php
$homepage = file_get_contents('https://finance.yahoo.com/quote/0016.HK/news p=0016.HK"');
echo $homepage;
?>
<script type="text/javascript">
function test(){
.....
}
The script was executed before the website load all the contents and thus, I can't get all the content after running the script.
How can I fully get the content from the website first and then run the script? thanks!
<script type="text/javascript">
document.addEventListener( 'DOMContentLoaded', function( event ) {
function test(){
console.log("DOM loaded");
}
});
</script>

Calling a Javascript function from a html file

My javascript and html files named contents.js and page.html:
function sayHello() {
alert("Hello World")
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript" src="contents.js" ></script>
<script>
window.onload = sayHello();
</script>
</body>
</html>
When run the sayHello function isn't being called. In firefox's console it returns the errors:
-SyntaxError: expected expression, got '<' contents.js:1
ReferenceError: sayHello is not defined
Both files are saved in the same folder. And i'm using a node.js express project in eclipse to create the server:
var http = require('http'),
fs = require('fs');
fs.readFile('./page.html', function (err, html) {
if (err) {
throw err;
}
http.createServer(function(request, response) {
response.writeHeader(200, {"Content-Type": "text/html"});
response.write(html);
response.end();
}).listen(8888);
});
Why am I not able to call the 'sayHello' function in the contents.js file from the page.html file?
The code
window.onload = sayHello();
...calls sayHello and assigns its return value to window.onload, exactly the way x = foo() calls foo and assigns its return value to x.
To just assign the function reference, don't call it (remove the ()):
window.onload = sayHello;
Side note: The window load event happens very late in the page load cycle, only after all other resources are loaded, including all images. Most of the time, you want to run your code earlier. If so, just put it in a script tag that you include at the end of the HTML, just before the closing </body> tag.
Executing sayHello() , you arenot returning anystuff so it was not executed. Had sayHello been returning a function it would have invoked that onload.
var sayHello = (function() {
return function {
alert("Hello World")
};
})();
In this situation, one might use sayHello(), as its returning a function.
window.onload = sayHello;
function sayHello() {
alert("Hello World")
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript" src="contents.js"></script>
</body>
</html>
Put it inside the body tag like this.
<body onload="sayHello()"></body>

How to include a php page through javascript and update it every so often? [duplicate]

I got this code from a website which I have modified to my needs:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
</head>
<div id="links">
</div>
<script language="javascript" type="text/javascript">
var timeout = setTimeout(reloadChat, 5000);
function reloadChat () {
$('#links').load('test.php #links',function () {
$(this).unwrap();
timeout = setTimeout(reloadChat, 5000);
});
}
</script>
In test.php:
<?php echo 'test'; ?>
So I want test.php to be called every 5 seconds in links div. How can I do this right?
Try this out.
function loadlink(){
$('#links').load('test.php',function () {
$(this).unwrap();
});
}
loadlink(); // This will run on page load
setInterval(function(){
loadlink() // this will run after every 5 seconds
}, 5000);
Hope this helps.
Try using setInterval and include jquery library and just try removing unwrap()
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
var timeout = setInterval(reloadChat, 5000);
function reloadChat () {
$('#links').load('test.php');
}
</script>
UPDATE
you are using a jquery old version so include the latest jquery version
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
Try to not use setInterval.
You can resend request to server after successful response with timeout.
jQuery:
sendRequest(); //call function
function sendRequest(){
$.ajax({
url: "test.php",
success:
function(result){
$('#links').text(result); //insert text of test.php into your div
setTimeout(function(){
sendRequest(); //this will send request again and again;
}, 5000);
}
});
}
you can use this one.
<div id="test"></div>
you java script code should be like that.
setInterval(function(){
$('#test').load('test.php');
},5000);
<script type="text/javascript">
$(document).ready(function(){
refreshTable();
});
function refreshTable(){
$('#tableHolder').load('getTable.php', function(){
setTimeout(refreshTable, 5000);
});
}
</script>

Message EventListener returns cf-tick

My question is simple,
I have this.
<!DOCTYPE html>
<head>
<script>
window.addEventListener('message', messageHandler, false);
function messageHandler(event)
{
if(event.data) {
document.getElementById('test').innerHTML = event.data;
}
}
</script>
</head>
<body>
<span id="test"></span>
</body>
which returns me this,when it shouldn't return me anything
cf-tick
Why is this? and How can i stop this?
A live example is this: Test Page
You have cloudflare js
http://ajax.cloudflare.com/cdn-cgi/nexp/dok8v=221574e73d/cloudflare.min.js
loaded in your page which posts the message cf-tick. You can see the file posting a message if you search for the following code in the file :
a.postMessage("cf-tick","*")
If you remove the loading of CloudFlare script, no message will be posted to the webpage.
If you don't want the cf-tick to get caught in the event listener, you can check if the message is not cf-tick :
window.addEventListener('message', messageHandler, false);
function messageHandler(event){
if(event.data) {
if(event.data!="cf-tick")
document.getElementById('test').innerHTML = event.data;
}
}

Phonegap - How to call one javascript function in another file from index page?

I am an iOS and PhoneGap newbie. I have the index.html file and a javascript file called MyClass.js.
In my MyClass.js, I have a function -
var MyClass = {
testfunc: function() {
navigator.notification.alert("Success : \r\n");
}
}
I am trying to call it from the index.html function like -
MyClass.testfunc();
In my Phonegap.plist file I have an entry MyClass-Myclass as a key-value pair with the type String. However I don't get the alert. What am I doing wrong?
Have you included the following in your index.html:
<script src="MyClass.js"></script>
This will allow you to use the MyClass.js functions in your index.html file
Your markup for your alert is wrong...
navigator.notification.alert(
'Some Alert Text here', // alert message
successCallback, // callback function
'Alert Title, // alert title
'OK' // button text
);
Hi can you try following code:
// MyClass.js
var MyClass = {
testFunction: function() {
alert("hi there");
}
};
// index.html
<html>
<head>
</head>
<body>
<script src="MyClass.js"></script>
<script src="phonegap-1.3.0.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", function() {
navigator.notification.alert("hi there \r\n");
//alert("hi there \r\n");
});
</script>
</body>
</html>

Categories