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>
Related
I have two JS files called main.js and load.js.
In main.js I have:
function removeItem() {
alert('Item removed');
}
(function($) {
$(document).ready(function() {
});
})(jQuery);
In load.js I have:
(function($) {
$(document).ready(function() {
removeItem();
});
})(jQuery);
My files are loaded in this order:
<script type='text/javascript' src='https://code.jquery.com/jquery-3.6.0.min.js?ver=3.6.0' id='script-jquery-js'></script>
<script type='text/javascript' src='url/wp-content/themes/theme/assets/js/main.js?ver=1.0' id='script-js'></script>
<script type='text/javascript' src='url/wp-content/themes/theme/assets/js/load.js?ver=1.0' id='script-load-js'></script>
It throws me an error:
removeItem() is not defined.
How can I use the function from main.js in load.js?
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>
if i use this:
$(document).ready(function() {
pjs = Processing.getInstanceById("EyeCanvas");
console.log(pjs);
}
then pjs is always undefined
when i use this:
function test() {
pjs = Processing.getInstanceById("EyeCanvas");
console.log(pjs);
}
and trigger test() with a button then pjs = D.Processing, as it should be.
I load the scripts in this order:
<script type="text/javascript" src="processing-1.3.6.min.js"></script>
<script type="text/javascript" src="jquery1-7-1.js"></script>
<script type="text/javascript" src="script.js"></script>
How can i work with pjs without have people to press a button?
Please try this - just to also see if it is a timing issue - note the swapped scripts too:
<script type="text/javascript" src="jquery1-7-1.js"></script>
<script type="text/javascript" src="processing-1.3.6.min.js"></script>
<script type="text/javascript" src="script.js"></script>
var tId,pjs,cnt=0;
$(document).ready(function() {
tId=setInterval(function() {
pjs = Processing.getInstanceById("EyeCanvas");
console.log(cnt+':'+pjs);
if (pjs) clearInterval(tId);
},500);
});
and what does this say?
var tId,pjs,cnt=0;
$(document).ready(function() {
pjs = Processing.getInstanceById("EyeCanvas");
console.log(cnt+':'+pjs);
if (!pjs) tId=setInterval(function() {
pjs = Processing.getInstanceById("EyeCanvas");
console.log(cnt+':'+pjs);
if (pjs) clearInterval(tId);
},500);
});
Yes mplungjan wrote the true answer, but remember that, when you use JQuery plugins you must be load JQuery library first, all time.
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
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>