I want to show the result of the statement in my HTML page instead of console.log
i am new into this:)
This is the JS:
$.ajax({
url: 'xml/articles.json',
dataType: 'json',
type: 'get',
cache: false,
success: function(data) {
$(data.builds).each(function(index, value){
console.log(value.number);
});
}
});
And this is my HTML page:
<!DOCTYPE html>
<html>
<head>
<title> JSON RSS parser </title>
</head>
<body>
<div class="feed">
<ul> </ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/logic.js"></script>
</body>
</html>
I tried with this but it did not work:
$('.feed ul').append(
$('<li />', {
text: number
})
);
});
},
Any thoughts?
Try creating the nodes and appending them.
var ul = document.querySelector('div.feed > ul');
$(data.builds).each(function(index, value){
var li = document.createElement('li');
var text = document.createTextNode(value.number);
li.appendChild(text);
ul.appendChild(li);
});
Related
I'm going crazy trying to assign the text of a li to the value of an input.
I've read tons of discussion and it seems to be usually made the way I'm trying to do it, but I can't get to make it work.
Here is my HTML and my functions to populate the ul and to make the selection
$(".cityFilter").on("filterablebeforefilter", function(e, data) {
var $ul = $(this),
$input = $(data.input),
value = $input.val(),
html = "";
$ul.html("");
if (value && value.length > 2) {
$ul.html("<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>");
$ul.listview("refresh");
$.ajax({
url: "http://gd.geobytes.com/AutoCompleteCity",
dataType: "jsonp",
crossDomain: true,
data: {q: $input.val()}
}).then(function(response) {
$.each(response, function(i, val) {
html += "<li>" + val + "</li>";
});
$ul.html(html);
$ul.listview("refresh");
$ul.trigger("updatelayout");
});
}
});
$('.cityFilter').on('click', 'li', function(){
var $input = $(this).parent().parent().find('.resFilter')[0];
var $text = $(this)[0].textContent;
$text = $text.substr(0,$text.indexOf(","));
$input.fadeOut("fast").val($text).fadeIn("fast");
$(this).closest(".cityFilter").empty();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ui-block-a">
<div class="ui-field-contain">
<input class="resFilter" id="departing_city" data-type="search" placeholder="Partenza">
<ul id="dep_autocompl" class="cityFilter" data-role="listview" data-inset="true" data-filter="true" data-input="#departing_city"></ul>
</div>
</div>
No way to make it work :(
Any hint?
I couldn't get AutoCompleteCity to work, but here is an example with jsonplaceholder :
$(document).on("pagecreate", "#page-one", function() {
$(".cityFilter").on("filterablebeforefilter", function(e, ui) {
var $ul = $(this), $input = $(ui.input), value = $input.val(),
html = "";
$ul.empty();
if (value && value.length > 2) {
$.ajax({
url: "https://jsonplaceholder.typicode.com/users",
dataType: "json",
crossDomain: true,
beforeSend: function() {
$ul.html("<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>").listview("refresh");
}
}).then(function(response) {
$.each(response, function(i, val) {
html += '<li data-icon="false">' + val.name + '</li>';
});
$ul.html(html).listview("refresh");
});
}
});
$('.cityFilter').on('vclick', 'a', function(){
var text = $(this).text(), ul = $(this).closest('ul'), input = $(ul).data('input');
$(input).fadeOut('fast', function() {
$(ul).empty();
$(this).val(text).fadeIn('fast');
})
return false;
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div id="page-one" data-role="page">
<div role="main" class="ui-content">
<input class="resFilter" id="departing_city" data-type="search" placeholder="Partenza">
<ul id="dep_autocompl" class="cityFilter" data-role="listview" data-inset="true" data-filter="true" data-input="#departing_city">
</ul>
</div>
</div>
</body>
</html>
(Try it out by typing clem)
I am trying to multiply two values that script get from below two different api. I am using document.getelementbyid to get the two id that I need which is gbp and balance. The api script can display the data get from api. However, the multiply script is not working. Nothing is showing. Help please?
first api
$(function() {
$.ajax({
type: "GET",
url: "https://min-api.cryptocompare.com/data/price?fsym=ETH&tsyms=ETH,GBP,HKD",
dataType: "json",
success: function (data) {
console.log(typeof data);
var json = data;
$('#gbp').html(json.GBP);
$('#hkd').html(json.HKD);
}
});
});
second api
$(function() {
$.ajax({
type: "GET",
url: "https://api.nanopool.org/v1/eth/reportedhashrate/1",
dataType: "json",
success: function (data) {
console.log(typeof data); // -- Object
var json = data;
$('#balance').html(json.data);
}
});
});
multiply javascript:
$(function () {
"use strict";
var $butbut =document.getElementById('gbp').html;
var $siksik =document.getElementById('balance').html;
var $lamlam = $butbut * $siksik;
document.getElementById('money').html=$lamlam;
});
html script
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="Untitled-4.js"></script>
</head>
<body>
<div id="balance"></div>
<div id="money"></div>
<div id="gbp"></div>
</body>
</html>
Getting the inner html of an element is .innerHTML, not .html
var $butbut = document.getElementById('gbp').innerHTML;
var $siksik = document.getElementById('balance').innerHTML;
document.getElementById('money').innerHTML = $lamlam;
Alternatively, you can use jquery
var $butbut = $('#gpb').html();
var $siksik = $('#balance').html();
$('#money').html($lamlam);
I'm new to JQuery and I really am not sure why this get and post request isn't working. I keep getting the error message. I'd appreciate any advice or resources to help figure this out. Thanks in advance.
$(document).ready(function(){
$.getJSON("http://api.github.com/users/noeladd", function(json){$.ajax({
type: "POST",
url: "http://httpbin.org/post",
data: json,
success: function(){
var parentDiv = document.getElementByClassName('container')[0];
var div = "<div><img src = 'json.avatar_url' width = '150px'></img><br> json.login <br> json.name</div>";
parentDiv.append(div);
} ,
error: function(){
alert("request failed!")
},
dataType: JSON
});});
})
I don't get it... but take it corrected.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sample</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
</div>
<script src="js/jquery/jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function(){
$.getJSON("http://api.github.com/users/noeladd", function(json){
$.ajax({
type: "POST",
url: "http://httpbin.org/post",
data: json,
success: function(data){
//You not using data... why???
var parentDiv = $('.container');
var div = "<div><img src = '"+json.avatar_url+"' width = '150px'></img><br> "+json.login+" <br> "+json.name+"</div>";
parentDiv.append(div);
} ,
error: function(){
alert("request failed!")
},
dataType: 'json'
});});
})
</script>
</body>
</html>
I don't know why you post the json to another website that only return the dada posted, but take a look at this example:
$(document).ready(function () {
$.getJSON("https://api.github.com/users/noeladd", function (json) {
$("<div />").append(
$("<img />").attr("src", json.avatar_url).css("width", 150),
$("<br />"),
$("<span />").text(json.login),
$("<br />"),
$("<span />").text(json.name)
).appendTo("div.container:eq(0)");
});
});
Working example on JSFiddle: https://jsfiddle.net/evandroprogram/Lbqbewsz/
I have a problem with animated number effect when grabbing data from json.
Animated number effect works correctly if it loads from html, but if I load it from json it doesn't work.
html code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.animateNumbers.js" type="text/javascript"></script>
</head>
<body>
Time from html (<span class="animate-number" data-value="2" data-animation-duration="600"></span>:<span class="animate-number" data-value="33" data-animation-duration="600"></span>h)
<div id="display_time"></div>
<script>
$('.animate-number').each(function(){
$(this).animateNumbers($(this).attr("data-value"), true, parseInt($(this).attr("data-animation-duration")));
})
</script>
<script>
$(function time(){
$.ajax({
type: "POST",
url: "data_time.php",
data: "get_time=true",
dataType:'json',
success: function(data){
$("#display_time").html(data.time);
}
});
});
</script>
</body>
</html>
data_time.php code:
<?php
if(isset($_POST['get_time']))
{
$time[] = 'Time from json (<span class="animate-number" data-value="2" data-animation-duration="600"></span>:<span class="animate-number" data-value="33" data-animation-duration="600"></span>h)';
echo json_encode(array('time' => $time ));
}
;?>
preview: click
I think the problem is with callback. Try this,
<script>
function runCallback(){
$('.animate-number').each(function(){
$(this).animateNumbers($(this).attr("data-value"), true, parseInt($(this).attr("data-animation-duration")));
})
}
</script>
<script>
$(function time(){
$.ajax({
type: "POST",
url: "data_time.php",
data: "get_time=true",
dataType:'json',
success: function(data){
$("#display_time").html(data.time);
runCallback();
}
});
});
</script>
Use $time instead of $time[]. There's no need for it to be an array.
Take out dataType:'json'. You are not SENDING json.
i have Something this type of xml with huge of data:-
<root>
<child1 id="4331" value="twenty-twenty">
<child2 id="4332" value="India">
<child4 id="4334" value="Mumbai Indian"></chlild4>
<child5 id="4335" value="Rajshthan Royal"></child5>
</child2>
<child3 id="4333" value="Pakishtan">
<child6 id="4336" value="Arngabad"></child6>
<child7 id="4337" value="Punjab"></child7>
</child3>
</child1>
</root>
i tried this
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
});
});
$(function() {
$.ajax({
type: "GET",
url: "atry.xml",
dataType: "xml",
success: function(xml) {
data = xml;
$(xml).find('*').each(function(){
console.log($(this).attr('id'));
console.log($(this).attr('value'));
});//close $.each(
}
}); //close click(
});
</script>
</head>
<body>
<!-- we will add our HTML content here -->
<button>Link</button>
</body>
</html>
i am try this but no output display...
import the all child attribute using jquery with click event...
thanks
You can try this code with jquery:
var xml = '<root><child1 id="4331" value="twenty-twenty"><child2 id="4332" value="India"><child4 id="4334" value="Mumbai Indian"></chlild4><child5 id="4335" value="Rajshthan Royal"></child5></child2><child3 id="4333" value="Pakishtan"><child6 id="4336" value="Arngabad"></child6><child7 id="4337" value="Punjab"></child7></child3></child1></root>';
var $root = $(xml);
$root.find('*').each(function(){
console.log($(this).attr('id'));
console.log($(this).attr('value'));
});
You may try like this
$(document).ready(function() {
$("button").click(function() {
$.ajax({
type: "GET",
url: "atry.xml",
dataType: "xml",
success: function(xml) {
data = xml;
$(xml).find('*').each(function(){
console.log($(this).attr('id'));
console.log($(this).attr('value'));
});//close $.each
}
}); //cloase ajax
}); //close button click
}); //close ready