jQuery's load() not working - javascript

I have a simple script that's supposed to load comments every second but for some reason it doesn't work. Here's code
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js">
var auto_refresh = setInterval(
(function () {
$("#comments").load('url to comments.php');
}), 1000);
</script>
</head>
<body>
<div id="comments"></div>
</body>
I tried few things like changing "url to comments.php" to just "comments.php" but to no avail. JQuery won't even load simple .txt file. I checked and ID and .php file name are 100% correct. What's wrong?

The issue is you have setInterval() call within <script> with src pointing to jQuery. There are also extra parentheses at setInterval function which are not necessary. Use .ready() handler to wait until document is loaded before calling setInterval.
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js">
</script>
<script>
$().ready(function() {
var auto_refresh = setInterval(function () {
$("#comments").load('url to comments.php');
}, 1000);
});
</script>
</head>

The problem is you need to enclose your function within the <script> , right now it is started for <script src="jquery">
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script>
var auto_refresh = setInterval(
(function () {
$("#comments").load('url to comments.php');
}), 1000);
</script>
</head>
DEMO

Related

How to call jquery function from file on pageload?

I want to my jquery function initDatePicker() into a js file. The function should require a parameter. I want the function being called on pageload.
Tried the following, but I'm probably missing some pieces here?
datepicker.js:
$(function initDatePicker(startDate) {
...
});
html:
<script type="text/javascript" src="#{/js/datepicker.js}">
$(function() {
initDatePicker('-1d');
});
</script>
Is my function definition correct in datepicker.js?
How do I correctly call the function on pageload with providing a parameter?
With the help of #deltab I could solve it as follows:
function initDatePicker(startDate) {
...
};
<script type="text/javascript" src="#{/js/datepicker.js}"></script>
<script type="text/javascript"><
$(function() {
initDatePicker('-1d');
});
</script>
<script type="text/javascript">
$(document).ready(function () {
initDatePicker('-1d');
}
</script>

Using multiple window.onload events in a separate file

I've got a problem and can't figure it out and would be glad if anyone of you could help me. So basically what I am trying to do is to put multiple window.onload events in a seperate file which starts my scripts. To get clear what I mean her is my situation:
Let's say I got these files:
index.html
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<script type="text/javascript" src="kalkevent.js"></script>
<script type="text/javascript" src="reckevent.js"></script>
<script type="text/javascript" src="winonload.js"></script>
</head>
<body>
<div id="topColumn">
...
</div>
<div id="bottomColumn">
...
</div>
</body>
</html>
kalk.js
function kalkInit() {
Array.prototype.slice.call(document.forms[0].elements).forEach(function(element) {
...
});
};
reck.js
function reckInit() {
...
};
So I want to load kalkInit and reckInit on window.onload . This should be handled in a separate file. What I already tried is:
winonload.js
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
};
}
};
addLoadEvent(kalkInit);
addLoadEvent(reckInit);
But it's not working at all. So my question is if it possible what I am trying to do or not. And if it is could someone pls help me out? :)
You can consider using jQuery..
In your winonload.js you need only:
$(window).on("load", kalkInit);
$(window).on("load", reckInit);
Maybe you have to call your onloadfunction:
<body onload="addLoadEvent();">

Winow.setInterval js not working

I am trying to usesetInterval for a javascript function of mine to be called every 5 seconds. Here is what I have for code:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="#routes.Assets.at("bootstrap/dist/css/bootstrap.css")" rel="stylesheet"/>
<script src="#routes.Assets.at("javascripts/patientmonitor.js")"/>
<script type="text/javascript">
window.setInterval("myFunction()",1000);
</script>
</head>
I know the function is being loaded in to the window, because I can call it via window.myFunction() and it performs as expected.
Thanks!
In your code this <script> has not closing tag but it is being self closed which is wrong
<script src="#routes.Assets.at("javascripts/patientmonitor.js")"/>
that's why setInterval code is not executing.
Your code have quote "" problem also.
<script src="#routes.Assets.at('javascripts/patientmonitor.js')"/>
//-----------------------------^convert it into single quote-^
<link href="#routes.Assets.at('bootstrap/dist/css/bootstrap.css')" rel="stylesheet"/>
JS
function myFunction (){
alert("your code here");
}
window.setInterval(myFunction, 1000);
Try this:
myInterval = setInterval(function() { myFunction() }", 5000);

Can someone find an error with this code?

When I run this code in the browser, it says that there is no 'fadeIn' method. Is there a reason to it?
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
function showDiv1() {
$("#blackback").fadeIn(500);
$("#contactform").fadeIn(500);
$("#blackback").click(function () {
hideDiv1();
});
}
function hideDiv1() {
$("#blackback").fadeOut(500);
$("#contactform").fadeOut(500);
}
</script>
Thanks!
have you included jquery js ? like
<script src="http://code.jquery.com/jquery-latest.js"></script>
refer http://api.jquery.com/delay/
Two points
Like stated above, do you have the query library included?
When you're calling your functions, are you waiting for the dom to load before firing them, i.e. document ready?
I took your code and added in document ready and the jquery library and it seemed to work fine
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#blackback").hide();
$("#contactform").hide();
showDiv1();
});
function showDiv1() {
$("#blackback").fadeIn(500);
$("#contactform").fadeIn(500);
$("#blackback").click(function () {
hideDiv1();
});
}
function hideDiv1() {
$("#blackback").fadeOut(500);
$("#contactform").fadeOut(500);
}
</script>
</head>
<body>
<div id="blackback">ONE</div>
<div id="contactform">contact Form</div>
</body>
</html>
An example of this running is here
It is jquery function, you have to register jquery javascript framework first

How do you use onPageLoad in Javascript?

I tried using
onPageLoad: function() {
alert("hi");
}
but it won't work. I need it for a Firefox extension.
Any suggestions please?
If you want to do this in vanilla javascript, just use the window.onload event handler.
window.onload = function() {
alert('hi!');
}
var itsloading = window.onload;
or
<body onload="doSomething();"></body>
//this calls your javascript function doSomething
for your example
<script language="javascript">
function sayhi()
{
alert("hi")
}
</script>
<body onload="sayhi();"></body>
EDIT -
For the extension in firefox On page load example
Assuming you meant the onload-event:
You should use a javascript library like jQuery to make it work in all browsers.
<script type="text/javascript">
$(document).ready(function() {
alert("Hi!");
});
</script>
If you really don't want to use a javascript library (Don't expect it to work well in all browsers.):
<script type="text/javascript">
function sayHi() {
alert("Hi!");
}
</script>
<body onload="javascript:sayHi();">
...
<script language="javascript">
window.onload = onPageLoad();
function onPageLoad() {
alert('page loaded!');
}
</script>

Categories