I'm working on an asp.net mvc project and i have a problem with some javascripts functions.
I would like to execute functionA (from layout) & functionB (from a webpage) when the page is loading.
_Layout.cshtml:
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
</body>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
function functionA() {
alert("Hello from Layout");
}
window.onload = functionA;
</script>
</html>
Webpage.cshtml:
#{
ViewData["Title"] = "***";
}
<div>
...
</div>
#section Scripts
{
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
function functionB() {
alert("Hello from WebPage");
}
window.onload = functionB;
</script>
}
window.onload is only working for the layout so when i'm going the the Webpage i can see "Hello from Layout" and not "Hello from Webpage".
Do you have an idea to perform both functions?
Thanks :) .
I managed to make it work like this:
window.onload = function () {
myFunction();
}
Related
I have a form with a button written in a .asp page and when it's clicked, it calls for a js function. I need to figure a way to debug this using developer tools.
<html>
<head>
<title>Test</title>
<script type="text/javascript">
$(document).ready(function() {
$("#butReport").bind("click", butReport_onClick);
});
function butReport_onClick() {
var cReportOptions = null;
//some code
};
</script>
</head>
<body>
some code.
</body>
</html>
I don't think this has anything to do with classic ASP.
You are missing the jQuery definition in this code, see here https://www.w3schools.com/jquery/jquery_get_started.asp
I added this
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<title>Test</title>
<script type="text/javascript">
$(document).ready(function() {
$("#butReport").bind("click", butReport_onClick);
});
function butReport_onClick() {
var cReportOptions = null;
//some code
console.log("Hello");
};
</script>
</head>
<body>
<div id="butReport">some code.</div>
</body>
</html>
When I click it I get this:
I hope this helps
button written in asp with id="butReport". Using javascript:
<button id="butReport"></button>
<script type="text/javascript">
var elem=document.getElementById('butReport').onclick = function(){
// some code
// test not using console.log();
document.getElementById('hasilnya').innerHTML = 'test';
}
</script>
<div id="hasilnya" style="margin-top:1em;"></div>
I want to find the load time of a locally hosted website. Is this way efficient? How can I display the time in a dialogue box?
<head>
<script type="text/javascript">
var loadTime = window.performance.timing.domContentLoadedEventEnd- window.performance.timing.navigationStart;
</script>
</head>
<body>
<script type="text/javascript">
window.onload = function () {
var loadTime = ((window.performance.timing.domComplete- window.performance.timing.navigationStart)/1000)+" sec.";
console.log('Page load time is '+ loadTime);
}
</script>
</body>
#Samrat Shrestha This snippet work for you
<doctype html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<head>
<script type="text/javascript">
$(document).ready(function() {
console.log("Time until DOMready: ",window.performance.timing.loadEventEnd-window.performance.timing.navigationStart);
});
</script>
<!-- do all the stuff you need to do -->
</head>
<body>
</body>
</html>
The ready event occurs after the HTML document has been loaded.
window.onload fires when the entire page loads (images, styles, etc.)
window.onload vs $(document).ready()
https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API#Examples
https://developer.mozilla.org/en-US/docs/Web/API/PerformanceTiming/loadEventEnd
I have a Javascript file named loader.js which contains a function called initialize(). I want to call this function via jQuery. This is my HTML file:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="loader.js" ></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(document).on("click", ".link", function(e) {
e.preventDefault();
var a= $(this).text();
window.initialize= function{
};
initialize(a);
});
});
</script>
</head>
<body >
<h1>welcome to my website </h1>
link1
link2
<div id="main">
</div>
</body>
</html>
This is loader.js:
function initialize(a) {
$('#main').html= a;
}
I do not know what is wrong with this script, I have debug it jquery is working fine but funtion is not working correctly.
also I want that whenever the function is clicked again the div should be refreshed for example first it contain link1 but when link2 is clicked link1 should be removed inside the div how can i accomplish this task????
thanks in advance
You're not including the loader script. Add <script src='loader.js'></script> before the jQuery code.
The code in loader.js should be inside a jQuery(document).ready callback since it's now using jquery (the html method).
Also as #jiihoo pointed out you should use $('#main').html(a); instead of $('#main').html = a;.
You should change to code of loader.js to this.
function initialize(a) {
$('#main').html(a);
}
Heres the whole thing you could do.
Html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
<script src="loader.js"></script>
</head>
<body >
<h1>welcome to my website </h1>
link1
link2
<div id="main"></div>
</body>
</html>
Loader.js
jQuery(document).ready(function() {
jQuery(document).on("click", ".link", function(e) {
e.preventDefault();
var a = $(this).text();
initialize(a);
});
});
function initialize(a) {
$('#main').html(a);
}
I need a pure JavaScript equivalent of this Jquery code:
because the use of libraries isnt allowed in my current project,
File handler.js
$(document).ready(function(){
$("#some_button").click(function(){
alert('ok. works');
});
});
File index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="handler.js"></script>
<head>
<body>
<button id="some_button">Btn</button>
</body>
</html>
Put this in your handler.js file:
window.onload = function() {
document.getElementById('some_button').addEventListener('click',
function() {
alert('ok. works');
}, true);
};
NB: this won't work on older IE versions that don't support addEventListener. You could be lazy and use the DOM0 element.onclick method instead.
function buttonClick() {
alert('ok. works');
}
File index.html
<!DOCTYPE html>
<html>
<head>
<head>
<body>
<button id="some_button" onclick="buttonClick()">Btn</button>
</body>
</html>
For example suppose I have
function myTest() {
return "test";
}
defined in <head>
In body if I try to call myTest() it fails. How can I make functions and variables accessible from body?
Script in the head tag will get parsed first, so your variables and functions are accessible from script in the body tag. Your problem must be elsewhere, because the following example works:
<!doctype html>
<html>
<head>
<script type="text/javascript">
function myTest() {
return "test";
}
</script>
</head>
<body>
<script type="text/javascript">
alert(myTest());
</script>
</body>
</html>
You need to place all JavaScript into <script>...</script> tags, OR, place it in event handling attributes (like onclick).
<html>
<head>
<script type="text/javascript">
function myTest() {
alert("hi");
}
</script>
</head>
<body>
<input type="button" onclick="myTest();" />
</body>
</html>
This is Your function in Head..
function myFunction(a)
{
return (a)
}
Then call like below
<script type="text/javascript">
myFunction(12);
</script>