i want to display json data from online URL to HTML table?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>JSON Sample</title>
</head>
<body>
<div id="placeholder"></div>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$.getJSON('test.json', function(data) {
var output="<ul>";
for (var i in data.items) {
output+="<li>" + data.items[i].Id + " " + data.items[i].name + "--" + data.items[i].old+"</li>";
}
output+="</ul>";
document.getElementById("placeholder").innerHTML=output;
});
</script>
</body>
</html>
how i can change test.json with online URL ?
its doesn't show any result can you please help me
Related
I want to open a new window on click of a button. It is opened successfully but I can't write data and set title simultaneously.
Does anybody have any idea?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title And Data Both</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
var filename ="console.log";
var newwin = window.open("","","width=200,height=100");
newwin.document.title="Title";
newwin.document.write("<h1>XXXX</h1>");
});
});
</script>
</head>
<body>
<button type="button">Get Substring</button>
</body>
</html>
The document.write() overwrites all existing HTML(including the title).
One way you could do it, is to set the title after the write.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title And Data Both</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
var filename = "console.log";
var newwin = window.open("", "", "width=200,height=100");
newwin.document.write("<h1>XXXX</h1>");
newwin.document.title = "Title";
});
});
</script>
</head>
<body>
<button type="button">Get Substring</button>
</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>
Experimenting with JS/Jquery and the JQuery .get function. I'm getting the pop up/alert to open but there is no text after "Data Loaded:"
What am I missing?
I have a .js file (called lab1.js) that looks like this:
var person = prompt("Please enter your name", "Harry Potter");
if (person != null) {
document.getElementById("demo").innerHTML =
person + "'s Favorite Links:";
}
$(document).ready(function(){
$.get("/Users/rabdelaz/Desktop/Labs/lab1.txt", function(data){
alert("Data Loaded: " + data);
});
});
With the following in my lab1.txt file:
"a line of text of your choosing"
Finally here is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="lab1.css">
<meta charset="utf-8"/>
<title>Lab 1</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
</head>
<body>
<p id="demo"></p>
<ul>
<li>www.akamai.com</li>
<li>aloha.akamai.com</li>
<li>agora.akamai.com</li>
<li>ask.akamai.com</li>
<li>luau.akamai.com</li>
<li>mydrive.akamai.com</li>
<li>act.akamai.com</li>
<li>GSS Tools</li>
</ul>
<script src="lab1.js"></script>
</body>
</html>
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'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>