I'm trying to get the JSON file of a certain page on reddit and it cancels with no reason why..
Here's the URL i am trying to parse with JSON. http://reddit.com/r/VillagePorn/.json
UPDATED CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Sin título 1</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "GET",
dataType: "json",
url: "http://reddit.com/r/VillagePorn/.json?jsonp=?",
success: function (data) {
$.each(data.data.children, function(i,item){
$("<img/>").attr("src", item.data.url).appendTo("#res");
});
}
});
});
</script>
</head>
<body>
<div id="res"></div>
</body>
</html>
here is a working example : http://jsfiddle.net/fuRkG/
I think the issue is with the url , you need to add jsonp=? at the end
Answer based on this previous question : How to extract url data from Reddit API using JSON
Related
In website A I want to fetch an image from website B which has class xyz. So how can I do that with PHP or JS or JQuery?
Website A is the place where I want the image.
Website B:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<p>wdsadbsabd sad sa djsa dkj sakj dsa d asd jksa dkj asd ksa dkj asdjk </p>
<p>
<img src="" id="abc" />
<img src="dsad.jpg" class="xyz" />
</p>
</body>
</html>
You can use like this
$.ajax({
url:'http://www.yoursitelink.com/',
type:'GET',
success: function(data){
var html = data;
$("#img").attr('src');
}
});
also set the header to get the data from any other url.Hope this will help you.
I need to use onunload event of body. But its not working. I have following code for that. Please help me.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body onunload="myFunction();">
</body>
</html>
<script type="application/javascript">
function myFunction()
{
alert("hello");
}
</script>
</html>
<script type="application/javascript">
function myFunction()
{
alert("hello");
}
</script>
you should use this inner html like
<html>
<head>
....
<script type="application/javascript">
function myFunction()
{
alert("hello");
}
</script>
</head>
<body onunload="...">
Yes i got the solution. Thanks to #artm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="application/javascript">
window.onbeforeunload=before;
window.onunload=after;
function before(evt)
{
$.ajax({
type:'POST',
url:'addVar.php',
dataType:'text',
data:{
},
success:function(data){
},
error:function(XMLHttpRequest,textStatus,errorThrown){
}
});
//return "asd";//If the return statement was not here, other code could be executed silently (with no pop-up)
}
function after(evt)
{
//This event fires too fast for the application to execute before the browser unloads
}
</script>
</head>
<body >
</body>
</html>
Your <script> tag is outside of your <html> tag. Try moving it into your <head>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="application/javascript">
function myFunction()
{
alert("hello");
}
</script>
</head>
<body onunload="myFunction();">
</body>
</html>
My code works inside an html but not from an external .js file.
In my external .js, I have a function like .animate() and hide() etc. working fine but
just for functions like .text() or .html() it is not working in the external file.
I even deleted all my code and just kept this script, still it didn't work, but when I copy pasted into my html it worked.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body >
<div id="demo"> --- </div>
<button>click me</button>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$("button").click(function(){
$("#demo").html("text");
});
</script>
</html>
Try this in your JS
$(function() {
$("button").click(function(){
$("#demo").html("text");
});
});
your html code is fully messed up!! update your code with the below
HTML
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
</head>
<body>
<div id="demo"> --- </div>
<button>click me</button>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("button").on("click", function() {
$("#demo").html("text");
});
});
</script>
</body>
</html>
I have a page.... http://kingola.com/test.html that i'm working on for my mobile app, but for some reason, the image doesn't display on my Android mobile browser, but i see it on Firefox on my mac.
Also... for some reason it doesn't work in IE.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<title>Reading XML with jQuery</title>
<script>
$(document).ready(function(){
$.ajax({
type: "GET",
url: "http://kingola.com/podcast/",
dataType: "xml",
success: function(xml) {
$(xml).find('item').each(function(){
// var id = $(this).attr('guid');
var title = $(this).find('title').text();
var url = $(this).find("enclosure").attr('url');
var description = $(this).find('description').text();
var img = $(this).find("itunes\\:image").attr('href');
$('<div class="items" id="link_"></div>').html(''+title+'').appendTo('#page-wrap');
$('<div class="brief"></div>').html(description).appendTo('#page-wrap');
$('<div class="image"></div>').html('<img src="'+img+'">').appendTo('#page-wrap');
$('<div class="ima-link"></div>').html(img).appendTo('#page-wrap');
});
}
});
});
</script>
</head>
<body>
<div id="page-wrap">
<h1>Reading XML with jQuery</h1>
</div>
</body>
</html>
Your source is not being defined there for not showing, could you try this
$('<div class="image"></div>').html('<img src="'+img+'">').appendTo($("#page-wrap"));
the variable of img is undefined,because the selector of the node is wrong,try this
var img = $(this).find("image").attr('href');
because the name of the node of is image, the itunes is the namespace of these nodes
I would like to create multiple strings within this same function and make this code more useable across website.
My JS code look like this:
function() {$(".tool-tip-wrapper").click(function () {
$(".tool-tip",this).html("<img src='/images/ui-elements-sprite.png' class='top-arrow'><p>This is string one.</p><div class='close'></div>").toggle('fast');
});
My html code look like this:
<div class="tool-tip-wrapper"> click me
<div class="tool-tip"></div>
</div>
Below markup will solve the issue.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js" language="javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".tool-tip-wrapper").click(function(){
$(".tool-tip",this).html("<p>"+this.title+"</p><div class='close'></div>").toggle('fast');
});
});
</script>
</head>
<body>
<div class="tool-tip-wrapper" title="This is string one.">
click me
<div class="tool-tip"></div>
</div>
</body>
</html>