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>
Related
I am trying to built code player that shows result of html page including script in iframe. but something seems to be wrong here. it seems javascript not working every time i click button i see error in console.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="codemirror/lib/codemirror.css">
<link rel="stylesheet" href="codemirror/theme/solarized.css">
<script src="codemirror/lib/codemirror.js"></script>
<script src="codemirror/mode/xml/xml.js"></script>
<script src="codemirror/mode/htmlmixed/htmlmixed.js"></script>
</head> <style> .CodeMirror{border:1px solid black} </style>
<body>
<form>
<div id="editorContainer" style="width:50%">
<textarea id="code" name="code" class="CodeMirror">
<button id="btn" onclick="say()">hello</button>
<script>
function say(){
alert('test')
}
</script>
</textarea>
</div>
</form>
<button>click</button>
<iframe id="frame"></iframe>
<script type="text/javascript">
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
mode: "text/html",
lineNumbers: true
});
$("button").click(function(){
var code= editor.getValue();
$("iframe").contents().find("html").html(code);
})
</script>
</body>
</html
>
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>
When I click the button it support to fade in and out the red button, but it doesn't so what is the problem ?
My code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
${"button").click(function(){
$("div").fadeToggle();
});
});
</script>
</head>
<body>
<button>Click Here To FadeToggle</button><br><br>
<div style="width:80px;height:80px;background-color:red;"></div>
</body>
</html>
Change:
${"button")
^---------------
To:
$("button")
^---------------
$(document).ready(function(){
$("button").click(function(){
$("div").fadeToggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button>Click Here To FadeToggle</button><br><br>
<div style="width:80px;height:80px;background-color:red;"></div>
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)')