Does anyone know why my jquery won't run? I've tried running on button click or page load but it isn't working. Thanks
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<iframe style="width:100%;height:700px;" id="frame" src="bing.com">
<script>
$(document).ready(function() {
alert("working");
});
</script>
</body>
You need to close your iframe tag and put in the complete url like this:
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<iframe style="width:100%;height:700px;" id="frame" src="http://bing.com"></iframe>
<script>
$(document).ready(function() {
alert("working");
});
</script>
</body>
Related
Here's what works:
<head>
<script type="text/javascript" src="scripts/jquery-ui-1.11.0.custom/jquery.min.js"></script>
<script type="text/javascript">
function getElemWidth(){
var x = $( "#menuDiv").width();
alert(x);
}
</script>
</head>
<body onLoad="getElemWidth()" />
<div id="menuDiv" style="width:250px" />
</body>
Here's what doesn't work:
<head>
<script type="text/javascript" src="scripts/jquery-ui-1.11.0.custom/jquery.min.js"></script>
<script type="text/javascript" src="scripts/common.js"></script>
</head>
<body onLoad="getElemWidth()" />
<div id="menuDiv" style="width:250px" />
</body>
Contents of "common.js":
function getElemWidth(){
var x = $( "#menuDiv").width();
alert(x);
}
It is calling the function in both cases. I can use jquery in both cases, for example:
x = $(window).width();
works just fine. For some reason I can't get the document elements from within the .js included file. Is there something I'm missing?
I even added this right below the "common.js" include:
<script type="text/javascript">
$(document).ready(function(){
alert($('#menuDiv').width());
});
</script>
That works perfectly fine. I can reference #menuDiv from within the same file that menuDiv appears, but not in an included javascript file. Is this normal?
The problem is that the DOM is probably not ready for jQuery to act on it. The safest point at which to operate on the DOM is after the document is ready. The page may be loaded but not fully rendered. Your common.js should really look like this:
function getElemWidth(){
var x = $("#menuDiv").width();
alert(x);
}
$(document).ready(function(){
getElemWidth();
});
And your HTML like this:
<head>
<script type="text/javascript" src="scripts/jquery-ui-1.11.0.custom/jquery.min.js"></script>
<script type="text/javascript" src="scripts/common.js"></script>
</head>
<body>
<div id="menuDiv" style="width:250px"></div>
</body>
<head>
<script type="text/javascript" src="scripts/jquery-ui-1.11.0.custom/jquery.min.js"></script>
<script type="text/javascript" src="scripts/common.js"></script>
</script> <-- this is wrong, remove this extra tag
Depending on update question:
you should call the function within jQuery DOM ready
$(function (){
getElemWidth();
});
and HTML should be
<head>
<script type="text/javascript" src="scripts/jquery-ui-1.11.0.custom/jquery.min.js"></script>
<script type="text/javascript" src="scripts/common.js"></script>
</head>
<body> <!-- remove onload -->
<div id="menuDiv" style="width:250px" />
</body>
I am just learning jQuery and the page with the following code does not load. Any help will be greatly appreciated.
<!DOCTYPE html>
<html>
<head>
<title>First jQuery-Enabled Page</title>
<script type="text/javascript" src="jquery-1.11.0.js"></script>
<script type="text/javascript">
$("document").ready(function() {
alert("The page just loaded!");
});
</script>
</head>
<body>
</body>
</html>
$(document).ready(function() {
alert("The page just loaded!");
});
remove quotes from around document in jquery selector.
Does the below js function automatically being called when the html loads?
How can I manually call it? (using event or click)
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#divId").load("http://google.com");
});
</script>
</head>
<body>
<div id="divId" style="display:none;"></div>
</body>
</html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$('#btn').on('click', function() {
$("#divId").load("http://google.com", function() {
$(this).show(); // it's display:none ?
});
});
});
</script>
</head>
<body>
<button id="btn">click to load</button>
<div id="divId" style="display:none;"></div>
</body>
</html>
Note that loading Google won't work due to the same origin policy and Google's headers.
When document is ready:
<head>
<script>
$(document).ready(function () {
$("#divId").load("http://google.com"); <!-- I don't know what you are trying to do here? -->
});
</script>
</head>
<body>
<div id="divId" style="display:none;"></div>
</body>
On a click
<head>
<script>
$(document).ready(function() {
$(".button a").click(function(e) {
e.preventDefault();
$("#divId").load("http://google.com"); <!-- Load Google won't work -->
});
});
</script>
</head>
<body>
<li class="button">Load</li>
<div id="divId" style="display:none;"></div>
</body>
It is working
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>Toggle between slide up and slide down for a p element</button>
</body>
</html>
But when i move
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
Before <body> tag is it is not working, because i want Put JavaScript at bottom, but i can't put document.ready part after jquery library, what will be solution.
One: your code MUST come after the jquery library.
Two: If your moving the code to the bottom of the page, you don't need $(document).ready(....
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>This is a paragraph.</p>
<button>Toggle between slide up and slide down for a p element</button>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$("button").click(function(){
$("p").slideToggle();
});
</script>
</body>
</html>
If you absolutely must have your page specific code above the jquery library, you'll likely need a queue system so that when jquery is available, the queue will be processed. Below is an example
<!DOCTYPE html>
<html>
<head>
<!-- this would need to be part of the CMS header -->
<script>
window.initQueue = [];
</script>
<!-- here's your page specific js -->
<script>
window.initQueue.push(function(){
$("button").click(function() {
$("p").slideToggle();
});
})
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>Toggle between slide up and slide down for a p element</button>
<!-- cms footer -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$.each(window.initQueue,function(i,fn){
fn();
})
</script>
</body>
</html>
<script>
window.onload = function() {
$("button").click(function() {
$("p").slideToggle();
});
}
</script>
I've got a sample script as below. I wanna see if local.js or online/latest.js failed to load. Is it possible?
<html>
<title>My JQuery Test</title>
<head>
<!--<script type="text/javascript" src="jquery/jquery.local.js"></script>-->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#Buttons-theTestAlert").click(function () {
alert("`Test Alert` clicked");
});
});
</script>
</head>
<body>
<button id="Buttons-theTestAlert">Test Alert</button>
</body>
</html>
You can test
if (myFunction) myFunction()
else alert('not loaded (yet)')