I have a problem getting a specific value to append on my progressbar.
My code is like this:
HTML:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JQueryUI Progressbar with JSON</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="progressbar"></div>
</body>
</html>
and my js is like this:
$(function() {
$.ajax({ dataType:"json",
url: "https://api.myjson.com/bins/l3gwv",
success: function(data){
$( "#progressbar" ).progressbar({
value: data.ID
});
console.log(data.ID);
}
});
});
I just want to get my selected id to be my progressbar, and my json its look like this :
[{"ID":71,"Harga":"2.000.000","Bird_Name":"Eurasian Collared-Dove"},
{"ID":82,"Harga":"8.000.000","Bird_Name":"Bald Eagle"},
{"ID":93,"Harga":"19.000.000","Bird_Name":"Cooper's Hawk"}]
Try this:
$(function() {
$.ajax({ dataType:"json",
url: "https://api.myjson.com/bins/l3gwv",
success: function(data){
var len = data.length;
var i;
for (i = 0; i < len; i++) {
$( "#progressbar" ).progressbar({
value: data[i].ID
});
console.log(data[i].ID);
}
}
});
});
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JQueryUI Progressbar with JSON</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="progressbar"></div>
</body>
</html>
data is an array so manage it in the loop.
Related
FULL Code here: https://jsfiddle.net/zw9sy5ew/2/
this code will generate two tables based on JSON keys,.
How do i create Jquery tabs and put the first table in one tab and the other table in another tab
$.each(data.user, function(key, value) {
var row = $("<tr/>");
if ($('table#main_table_' + value.id).length)
table = $("#main_table_" + value.id);
else
table = $('<table></table>');
table.attr('id', 'main_table_' + value.id);
row.append($("<td/>").text(value.name));
row.append($("<td/>").text(value.id));
table.append(row);
$("#list_table_json").append(table);
$("#list_table_json").append("<br>");
});
Tables grouped by value.id:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test jQuery Tabs</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="tabs">
<ul id="ul-tabs">
</ul>
</div>
<script type="text/javascript">
var data = $.parseJSON("{\"version\":\"5.2\",\"user_type\":\"online\",\"user\":[{\"name\":\"John\",\"id\":50},{\"name\":\"Mark\",\"id\":50},{\"name\":\"Johnny\",\"id\":57}]}");
const setTables = new Set();
$.each(data.user, function(key, value) {
let table;
var row = $("<tr/>");
if ($('table#main_table_' + value.id).length)
table = $("#main_table_" + value.id);
else
table = $('<table></table>');
table.attr('id', 'main_table_' + value.id);
row.append($("<td/>").text(value.name));
row.append($("<td/>").text(value.id));
table.append(row);
if(!setTables.has(value.id)) {
setTables.add(value.id);
$( "#ul-tabs" ).append("<li>"+value.id+"</li>");
$( "#tabs" ).append("<div id=\"tabs-"+value.id+"\">"+table.prop('outerHTML')+"</div>");
}
});
$( "#tabs" ).tabs();
</script>
</body>
</html>
I took an example from JQuery ui tabs and I modified it for your needs:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test jQuery Tabs</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="tabs">
<ul id="ul-tabs">
</ul>
</div>
<script type="text/javascript">
var data = $.parseJSON("{\"version\":\"5.2\",\"user_type\":\"online\",\"user\":[{\"name\":\"John\",\"id\":50},{\"name\":\"Mark\",\"id\":50},{\"name\":\"Johnny\",\"id\":57}]}");
$.each(data.user, function(key, value) {
let table;
var row = $("<tr/>");
if ($('table#main_table_' + value.id).length)
table = $("#main_table_" + value.id);
else
table = $('<table></table>');
table.attr('id', 'main_table_' + value.id);
row.append($("<td/>").text(value.name));
row.append($("<td/>").text(value.id));
table.append(row);
console.log(table);
$( "#ul-tabs" ).append("<li>"+value.name+"</li>");
$( "#tabs" ).append("<div id=\"tabs-"+value.name+"\">"+table.prop('outerHTML')+"</div>");
});
$( "#tabs" ).tabs();
</script>
</body>
</html>
So I retrieve a JSON result from a webservice(created with spring) which looks like this:
[
{"id":34,"nachname":"Mozart","vorname":"Wolfgang Amadeus","namenspraedikat":"","instrumentId":0,"geburtsdatum":"27.01.1756","herkunftsland":"Salzburg","sterbedatum":"05.12.1791","plz":null,"ort":null,"straße":null,"handy":null,"fax":null,"email":"","discriminator":"Komponist"}
]
I got a jsp file with following HTML markup:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/repertoireController.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Insert title here</title>
</head>
<body>
<div></div>
<div class="komponist-id"></div>
<div class="komponist-name"></div>
</body>
</html>
I want to add the "nachname" and the "id" from the JSON object to the divs with the classes: komponist-id and komponist-name
I tried the following which is from the springIo guides https://spring.io/guides/gs/consuming-rest-jquery/
$(document).ready(function() {
$.ajax({
url: "myurl"
}).then(function(data) {
$('.komponist-id').append(data.id);
$('.komponist-name').append(data.nachname);
});
});
Unfortunately it doesn't work. When i use alert(data.id) it shows that it is undefined what am I doing wrong?
The problem is that your JSON is an array. So you just need to get the first object of it like: data[0] and then get the id/nachname.
var data = [
{"id":34,"nachname":"Mozart","vorname":"Wolfgang Amadeus","namenspraedikat":"","instrumentId":0,"geburtsdatum":"27.01.1756","herkunftsland":"Salzburg","sterbedatum":"05.12.1791","plz":null,"ort":null,"straße":null,"handy":null,"fax":null,"email":"","discriminator":"Komponist"}
];
$(document).ready(function() {
$('.komponist-id').append(data[0].id);
$('.komponist-name').append(data[0].nachname);
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/repertoireController.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Insert title here</title>
</head>
<body>
<div></div>
<div class="komponist-id"></div>
<div class="komponist-name"></div>
</body>
</html>
In one of my jsp file I am calling the "basicEn.js" in the head
<head>
<meta charset="UTF-8">
<meta name=viewport
content="width=device-width, initial-scale=1, maximum-scale=1">
<META http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="index.css">
<script src="javascript/jquery-3.1.0.min.js"></script>
<script src="javascript/basicEn.js"></script>
<title>Insert title here</title>
</head>
However when I checked from the firebug the "basic.js" is running. Probably, I am missing a tiny thing but I am really stuck.
//basicEn.jsp
$(document).ready(function() {
// Your event
$('li').click(function() {
var id = $(this).attr('id');
$.ajax({
url:'GetPhone',
data:{id : id},
dataType:"text",
type:'get',
cache:false,
success:function(data){
//alert(data);
var successUrl = "SelectedFeature-en.jsp";
window.location.href = successUrl;
},
error:function(){
alert('error');
}
}
);
});
});
Normaly I load a javascript file in html:
<script src="v/0.2/strapdown.js"></script>
This file strapdown.js itself loads css files (line 69 - 83): Github > strapdown.js
// Stylesheets
var linkEl = document.createElement('link');
linkEl.href = originBase + '/themes/'+theme+'.min.css';
linkEl.rel = 'stylesheet';
document.head.appendChild(linkEl);
var linkEl = document.createElement('link');
linkEl.href = originBase + '/strapdown.css';
linkEl.rel = 'stylesheet';
document.head.appendChild(linkEl);
var linkEl = document.createElement('link');
linkEl.href = originBase + '/themes/bootstrap-responsive.min.css';
linkEl.rel = 'stylesheet';
document.head.appendChild(linkEl);
Now I want to load this javascript file dynamically with jQuery.getScript():
$.getScript("v/0.2/strapdown.js").done( function( ) { console.log( "loaded" ) } );
The javascript file is loaded, but it does not load the css files.
When I state the css file directly in the html file it works:
<link rel="stylesheet" href="v/0.2/strapdown.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="v/0.2/themes/cerulean.min.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="v/0.2/themes/bootstrap-responsive.min.css" type="text/css" media="screen" charset="utf-8">
But I want to have it dynamically, as it worked before.
Heres the code with the missing css files. Available on Github > test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Jerik's this and that</title>
<meta name="description" content="Some stuff that I want to mention" />
<!-- added stylesheet manually, normaly strapdown does this for me autoamatically. Does not work now -->
<!-- link rel="stylesheet" href="v/0.2/strapdown.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="v/0.2/themes/cerulean.min.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="v/0.2/themes/bootstrap-responsive.min.css" type="text/css" media="screen"
charset="utf-8"-->
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<xmp theme="cerulean" style="display:none;"></xmp>
<script type="text/javascript" charset="utf-8">
function showmd( value ) {
$( "xmp" ).html( value );
$.getScript("v/0.2/strapdown.js").done( function( ) { console.log( "loaded" ) } );
}
$.get( "readme.md", function( data ) {
showmd( data );
}, 'text');
</script>
</body>
</html>
How do I get the css files dynamically loaded via the original script, that I load via jQuery.getScript()?
If you try to load local resources with Ajax, you will face problems with your browser security.
This is what I faced when I used your code without modifications.
Here is the code i used to make it work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Jerik's this and that</title>
<meta name="description" content="Some stuff that I want to mention" />
<!-- added stylesheet manually, normaly strapdown does this for me autoamatically. Does not work now -->
<!-- link rel="stylesheet" href="v/0.2/strapdown.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="v/0.2/themes/cerulean.min.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="v/0.2/themes/bootstrap-responsive.min.css" type="text/css" media="screen"
charset="utf-8"-->
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<xmp theme="cerulean" style="display:none;"></xmp>
<script type="text/javascript" charset="utf-8">
// http://stackoverflow.com/questions/11917734/jquery-ajax-call-success-how-do-i-change-a-global-variable-in-the-wrapper-javas
// http://stackoverflow.com/questions/7598821/return-responsetext-from-jquery-get
function showmd( value ) {
$( "xmp" ).html( value );
$.getScript("http://strapdownjs.com/v/0.2/strapdown.js").done( function( ) { console.log( "loaded" ) } );
}
$.ajax({
url: "https://raw.githubusercontent.com/jerik/jerik.github.io/master/readme.md",
method: "GET",
success: function(data) {
showmd(data);
}
});
</script>
</body>
</html>
You have to download the css, wait for it to finish download and them use it
$.ajax({
url: 'includes/page/message/index.css',
dataType: 'text',
success: () => {
$("head").append("<link>");
let css = $("head").children(":last");
css.attr({
rel: "stylesheet",
type: "text/css",
href: 'includes/page/message/index.css'
});
}
});
Found a solution that works with http and https requests. I create an script tag with the required information and append it to the head tag. Firebugs reports a waring Synchrone XMLHttpRequests in the Main-Thread should not be used... but it works for me.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Jerik's this and that</title>
<meta name="description" content="Some stuff that I want to mention" />
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<xmp theme="cerulean" style="display:none;"></xmp>
<script type="text/javascript" charset="utf-8">
function showmd( value ) {
$( "xmp" ).html( value );
$( 'head' ).append( '<script src="v/0.2/strapdown.js"><\/script>' );
}
$.get( "readme.md", function( data ) {
showmd( data );
}, 'text');
</script>
</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>