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
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 have three meta variables: Concept, DocType and Path that I want to add to my URL so that I up with something in my browser that looks like "http://www.mywebsite.com/page.html?concept=var1&doctype=var2&path=var3
Right now my page has the following code on it, but I am very new to JS and not sure if this is correct:
<!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>
<meta name="concept" content="product" />
<meta name="docType" content="template" />
<meta name="Path" content="offer" />
<script>
function refresh() {
var concept = document.querySelector('meta[name="concept"]');
var doctype = document.querySelector('meta[name="docType"]');
var path = document.querySelector('meta[name="Path"]');
this.document.location.href = "?concept=" + concept.content + "&doctype=" + doctype.content + "&path=" + Path.content;
}
</script>
</head>
<body>
Line of text
<script>
if (location.search.indexOf("concept") !== -1) refresh();
</script>
</body>
</html>
This gives me the following error with no changes to my url:
reflow: 0.1ms
reflow: 0.11ms
reflow: 0.14ms
1406128139877 Services.HealthReport.HealthReporter WARN No prefs data found.
Use querySelector instead of getElementByName, and instead of concept.value, use concept.content. So your code would look like this:
<meta name="concept" content="product" />
<meta name="docType" content="template" />
<meta name="Path" content="offer" />
<script>
function refresh() {
var concept = document.querySelector('meta[name="concept"]');
var doctype = document.querySelector('meta[name="docType"]');
var path = document.querySelector('meta[name="Path"]');
document.location.href = "?concept=" + concept.content + "&doctype=" + doctype.content + "&iapath=" + path.content;
}
</script>
Also, iapath.content is an error, use path.content, that's your variable's name.
In addition, you have to call the method refresh somewhere; otherwise it won't run:
<body>
Line of text
<script>
if (location.search.indexOf("concept") === -1) refresh();
</script>
</body>
This piece of (static) html works perfectly on my local server on all browsers I have access to (chrome, firefox, IE...):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="concept" content="product" />
<meta name="docType" content="template" />
<meta name="Path" content="offer" />
<title>Test</title>
<script>
function refresh() {
var concept = document.querySelector('meta[name="concept"]');
var doctype = document.querySelector('meta[name="docType"]');
var path = document.querySelector('meta[name="Path"]');
document.location.href = "?concept=" + concept.content + "&doctype=" + doctype.content + "&iapath=" + path.content;
}
</script>
</head>
<body>
Line of text
<script>
if (location.search.indexOf("concept") === -1) refresh();
</script>
</body>
</html>
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>
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
I am new to JavaScript and here is a problem when I trying out prototype.
I want to update sample.jsp with Ajax.updater after the it is loaded, but it doesn't work. Here the source of smaple.jsp.
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script src="prototype.js"></script>
<script>
function f1(){
var ajax = new Ajax.updater(
{success: 'state'},'part.html'
,{method:'get'});
}
document.observe('dom:loaded', function() {
f1();
});
</script>
</head>
<body>
state:
<div id="state"></div>
<br>
</body>
</html>
Could anyone tell me what's wrong with my code?
try "Ajax.Updater" (capital U) for starters
also I recommend that you try working with firefox and the firebug plugin, it's a great way to debug your javascript
I have tried another one and it works
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>AJAX Zip Checker </title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="prototype.js"></script>
<script type="text/javascript" language="JavaScript">
function checkZip() {
if($F('zip').length == 5) {
var url = 'checkzip.jsp';
var params = 'zip=' + $F('zip');
var ajax = new Ajax.Updater(
{success: 'zipResult'},
url,
{method: 'get', parameters: params, onFailure: reportError});
}
}
function reportError(request) {
$F('zipResult') = "Error";
}
</script>
</head>
<body>
<label for="zip">zip:</label>
<input type="text" name="zip" id="zip" onkeyup="checkZip();" />
<div id="zipResult"></div><p/>
</body>
</html>
checkzip.jsp
<%
String zip = request.getParameter("zip");
if (zip.equals("10009")) {
%>
new york
<%} else {%>
unknown
<% }%>
Could anyone tell me the difference?