I'm trying to use jquery get method
this is jtest.html:
<!DOCTYPE html>
<html>
<body>
fdsffdsf
</body>
</html>
and this is the page that should get the data from jtest.html:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$.load("jtest.html", function(data){
alert("Data: " + data);
});
});
</script>
<body>
<h1>My First Heading</h1>
</body>
</html>
Nothing happens when I run it please help
Try Jquery code to get data from another page.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
jQuery.get('jtest.html', null, function(tsv) {
alert(tsv);
});
});
</script>
</head>
<body>
<h1>My First Heading</h1>
</body>
</html>
You need to put your <script> inside <html> and <head> tag:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
<script>
$(document).ready(function(){
$.load("jtest.html", function(data){
alert("Data: " + data);
});
});
</script>
</head>
<body>
<h1>My First Heading</h1>
</body>
</html>
Also make sure that jtest.html is located at the same directory as your current HTML file
You're missing the closing </script> tag when loading the jquery library!
Try this work perfectly:
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).load("jtest.html", function(data){
alert("Data: " + data);
});
});
</script>
</body>
</html>
Related
When having the following HTML page (index.html)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Parent</title>
</head>
<body>
<iframe src="iframe.html"></iframe>
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script>
$(function(){
console.log("document ready");
$("iframe").on("load", function(){
console.log("iframe loaded");
});
});
</script>
</body>
</html>
and the following iframe.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Child</title>
</head>
<body>
<p>Lorem ipsum</p>
</body>
</html>
the console output will look like:
However, the log "iframe loaded" is missing. It seems that .on("load") is not getting fired on the iframe.
Does anyone know why?
Edit:
Of course I am having JavaScript activated (otherwise I wouldn't see any log messages)
I can not edit iframe.html so using postMessage etc. is not a workaround for me
I have tested this in the latest FF (47.0a2) and Chrome (49)
The Code is working perfectly . Maybe the path that you provided for iframe is wrong. Check if they are in the same folder
Check if javascript is enabled in your browser
Edit:
or try to replace your index.html code with:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Parent</title>
<script type="text/javascript">
function handleOnLoad(el) {
// el is the actual iframe
console.log("iframe loaded");
}
</script>
</head>
<body>
<iframe src="iframe.html" onload="handleOnLoad(this)"></iframe>
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script>
$(function(){
console.log("document ready");
$("iframe").on("load", function(){
// console.log("iframe loaded");
});
});
</script>
</body>
</html>
Your code <script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script>
$(function(){
console.log("document ready");
$("iframe").on("load", function(){
console.log("iframe loaded");
});
});
</script>
has to be inside iframe.html
So your pages look like below post modifications.
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Parent</title>
</head>
<body>
<iframe src="iframe.html"></iframe>
</body>
</html>
iframe.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Child</title>
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script>
$(function(){
console.log("document ready");
$(window).on("load", function(){
console.log("iframe loaded");
});
});
</script>
</head>
<body>
<p>Lorem ipsum</p>
</body>
</html>
Hi I am trying to run Alert function on page load using jquery but it's not working for me.
Please let me know if I am wrong somewhere thanks.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#alertcall').load(function(d){
alert("Image loaded.");
})(document);
});
</script>
</head>
<body>
<div id="alertcall"></div>
</body>
</html>
Not sure I understand what you are doing, so you are trying to get jQuery to output an alert? Perhaps this will work.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div id="alertcall"></div>
<script>
$(document).ready(function () {
$('#alertcall').load(function(d){
alert("Div loaded");
})(document);
});
</script>
</body>
</html>
Try using this. You can check whether the element with id alertcall exists or not.
<script>
$(document).ready(function () {
if($('#alertcall').length){
alert("image loaded");
}
});
</script>
Looks like you are trying to perform some action when image loads. Use image instead of div.
$(function() {
$('#myImage').load(function(d) {
alert("Image loaded.");
});
}); < /script>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<img id="myImage" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/03/high-resolution-wallpapers-2.jpg" alt="high resolution image">
</body>
</html>
Change image URL to test again to avoid cached image
$(function() {
$('#myImage').load(function(d) {
alert("Image loaded.");
});
}); < /script>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<img id="myImage" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/03/high-resolution-wallpapers-2.jpg" alt="high resolution image">
</body>
</html>
I want to get data from other page with js or jquery or ajax but not php. I just found a sample on stack overflow. (here is the link) But when I write these codes on my index.html file, it doesn't work. I don't understand reason. Here is my codes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type=”text/javascript”>
var url='http://query.yahooapis.com/v1/public/yql?q=select * from html where url=\'https://stackoverflow.com/\' and xpath=\'//div[#id="question-mini-list"]//h3//a\'&format=json&callback=?';
$.getJSON( url, function(data){
$.each(data.query.results.a, function(){
$('body').append('<div>'+this.content+'</div>');
});
});
</script>
</head>
<body>
<div></div>
</body>
</html>
it works as it is...
var url='http://query.yahooapis.com/v1/public/yql?q=select * from html where url=\'http://stackoverflow.com/\' and xpath=\'//div[#id="question-mini-list"]//h3//a\'&format=json&callback=?';
$.getJSON( url, function(data){
$.each(data.query.results.a, function(){
$('body').append('<div>'+this.content+'</div>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div></div>
I solved my problem these codes, thank for your help
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
var url = 'deneme.html';
$.get(url, function(response) {
$('div#external').html($(response).find('#content>ul>li').html());
});
});
</script>
<style> body, html{padding: 0; margin:0;}</style>
</head>
<body>
<div id="external" >
</div>
</body>
</html>
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.
why does message box not appear? Many thanks.
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.8.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('<script>alert("hi");</' + 'script>').appendTo(document.body);
</script>
</head>
<body>
<span>my test</span>
</body>
</html>
You must wrap in in a $(document).ready.
Otherwise it won't be able to find body because it hasn't loaded yet.
$(document).ready(function() {
$('<script>alert("hi");</' + 'script>').appendTo(document.body);
})