How to call jquery function from file on pageload? - javascript

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>

Related

jQuery's load() not working

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

javascript function that uses jquery isn't being called

I'm woking on a ASP.NET project and im trying to use the attr function,
when im putting in the script tag the src for the jquery file the function isnt being called when im calling it via c# code.
<script type ="text/javascript" src="jquery-3.1.1.min.js">
$(document).ready(function () {
function startGame(path) {
alert(path);
$("#test").attr("style", "color:Blue");
$("#game_param").attr("value", path);
$("#game_embed").attr("src", path);
}
});
</script>
I tried to write a simple javascript fucntion
<script type ="text/javascript" src="jquery-3.1.1.min.js">
function startGame(a) {
alert(a);
}
</script>
and it wasn't called either
im getting en error that startGame isn't defined, in both cases.
can someone expain to me what im doing wrong?
You need to include the jQuery source separately from your custom code. Otherwise I believe what is inside of the script tag is ignored.
<script type ="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var p = 'here/is/my/path';
function startGame(path) {
alert(path);
$("#test").attr("style", "color:Blue");
$("#game_param").attr("value", path);
$("#game_embed").attr("src", path);
}
startGame(p);
});
</script>
Your Javascript isn't correct.
When you do:
<script type ="text/javascript" src="jquery-3.1.1.min.js">
function startGame(a) {
alert(a);
}
</script>
You're setting the source of the JavaScript file to be the jQuery JS file. If you want to define your own functions, you have to put it in its own script tag, like so:
<script type ="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
function startGame(a) {
alert(a);
}
</script>
You actually have multiple errors.
Browsers will ignore any javascript written inside a script tag that has a src attribute. So you need to include jQuery separately, like so:
<script type ="text/javascript" src="jquery-3.1.1.min.js"></script>
<script>
// Your code here.
</script>
You're never actually calling the function, only declaring them. If you're only going to use this once, you don't even need a function:
<script type ="text/javascript" src="jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function () {
alert(path);
$("#test").attr("style", "color:Blue");
$("#game_param").attr("value", path);
$("#game_embed").attr("src", path);
});
</script>
Otherwise, you need to call the function after declaring it like so:
$(document).ready(function () {
function startGame(path) {
// Your code
}
startGame();
});
Function Declarations vs Expressions

Execute javascript from bundles in Document.ready

I use the MVC4 default template.
I add a script : MyScript.js in /Scripts/MyApp/ with a function :
function Testing()
{
alert('test');
}
In the global.asax :
bundles.Add(new ScriptBundle("~/bundles/myapp").Include(
"~/Scripts/MyApp/MyScript.js"));
I'd like call this method in /Views/Home/Index.cshml
I tried the code below but without success:
<script type="text/javascript" lang="javascript">
$(document).ready(function () {
Testing();
});
</script>
#Scripts.Render("~/bundles/myapp")
When I look the source code the link to MyScript.js is there and I can navigate to it (go to the source)
But the Testing() method in the $(document).ready is not executed.
Update1
<script type="text/javascript" lang="javascript">
$(document).ready(function () {
alert("test");
});
</script>
Try putting you inline script after the bundle inclusion. Also the lang attribute on the script tag is deprecated:
#Scripts.Render("~/bundles/myapp")
<script type="text/javascript">
$(document).ready(function () {
Testing();
});
</script>
UPDATE:
OK, I think you forgot to include jquery, so the $ function not defined :-)
So if you want to do it with bundles:
bundles.Add(new ScriptBundle("~/bundles/myapp").Include(
"~/Scripts/jquery-{version}.js", "~/Scripts/MyApp/MyScript.js")
);
or if you don't want to use bundles:
<script type="text/javascript" src="~/scripts/jquery-1.7.1.js"></script>
<script type="text/javascript" src="~/scripts/MyScript.js"></script>
<script type="text/javascript">
$(document).ready(function () {
Testing();
});
</script>

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