i want to add weather on my website. i tried to do it with json and jquery, but i have some problems. can you help me or advise me other way to do this, please? the problem is that in console show that these json links which i have in html page in are incorrect. please help me. what can i do?
here is my code
if("geolocation" in navigator){
navigator.geolocation.getCurrentPosition(function(position){
loadweather(position.coords.latitude + "," + position.coords.longitude);
});
}else {
loadweather("kolkata, in" );
}
$(document).ready(function(){
setInterval(getWeather, 10000);
});
function loadWeather (location, woeid){
$.simpleWeather({
location:location,
woeid:woeid,
unit:'c',
suncess:function(weather){
city = weather.city,
temp = weather.temp+'°';
wcode = '<img class="weathericon" src=images/weathericons/' + weather.code + '.svg';
wind = '<p>' + weather.wind.speed + '</p><p>' + weather.units.speed +'</p>';
humidity = weather.humidity + '%';
$(".location").text(city);
$(".temperature").html(temp);
$(".climate_bg").html(wcode);
$(".windspeed").html(wind);
$(".humidity").text(humidity);
},
error: function(error) {
$(".error").html('<p>' + error + '</p>');
}
});
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0">
<title>Weather App</title>
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700,inherit,400" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/standardize.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body class="body page-index clearfix">
<div class="container clearfix">
<p class="location"></p>
<p class="temperature"></p>
<div class="climate_bg"></div>
<div class="info_bg">
<img class="dropicon" src="images/Droplet.svg">
<p class="humidity"></p>
<img class="windicon" src="images/Wind.svg">
<div class="windspeed"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Related
I am trying to to display JSON data from an external location (3 images with a city name and tagline) onto my HTML page but getting an error:
"Uncaught ReferenceError: showPlaces is not defined
at places.json:1:1" even though I did define the function already in my JS file.
JSON data: https://www.selicaro.com/webd330/week6/places.json
https://codepen.io/stefan927/pen/MWOqxmN?editors=1111
*<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
integrity="sha384-
9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="jsonp.css" />
<title>Week 6 | Assignment | JSONP</title>
</head>
<body>
<div class="container">
<h3 class="card-title">
Assignment: Load JSONP from an External Server
</h3>
<form>
<div class="form-group">
<button
type="button"
class="btn btn-primary mx-auto d-block"
id="btn2"
>
Load JSON
</button>
</div>
</form>
<div id="output"></div>
</div>
<!-- Optional JavaScript -->
<script>
(function() {
var btn = document.getElementById('btn2');
btn.addEventListener('click', getJson);
function getJson() {
var output = document.getElementById('output');
output.setAttribute("class", "card-group");
var xhr = new XMLHttpRequest();
var url = 'https://www.selicaro.com/webd330/week6/places.json'
xhr.open('GET', url, true);
xhr.onload = function(data) {
if (this.readyState === 4) {
if (this.status === 200) {
var data = JSON.parse(this.responseText);
function showPlaces(data) {
var content = '';
for (i = 0; i < data.places.length; i++) {
content += '<div class="card" style="width: 20rem;">'
content += '<img class="card-img-top" src=" data.places[i]["img"]
+ '
" alt="
image of city ">';
content += '<div class="card-body">';
content += '<h5 class="card-title">' + data.places[i].loc '</h5>';
content += '<p class="card-text">tagline: ' + data.places[i]
["tagline"] + '</p>';
content += '</div></div>';
}
document.getElementById('output').innerHTML = content;
}
}
}
xhr.send(null);
}
}
})();
</script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<!--Your JS files go below this comment-->
<script src="week6.js"></script>
<script src="https://www.selicaro.com/webd330/week6/places.json"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
integrity="sha384-
cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
integrity="sha384-
uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
crossorigin="anonymous"
></script>
</body>
</html>*
Im creating a bus finder application. I want the user to be redirected to a new page after they have input information for the ajax api request. At the moment the information is inserted after page one but on the same page. How do I create a new page with the ajax results once the user has inout the information and sent the request. I have a variable created with the results as a virtual page.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dublin Concert Listings</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/custom.css" />
<link rel="stylesheet" href="css/theme.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Get Next Bus Details</h1>
</div>
<div data-role="content">
<div class="content-primary">
<div data-demo-html="true">
<div class="ui-input-search ui-shadow-inset ui-input-has-clear ui-body-inherit ui-corner-all">
<input data-type="search" placeholder="Bus Stop Id" id="bus_stop_id" name="bus_stop_id">
</div>
<input type="button" value="Get Current Update" id="button_get_bus">
</div>
</div>
</div>
</div>
<script type="text/javascript">
//On click of button this function get call
$('#button_get_bus').click(function(){
//Get Enter Bus Id
var bus_stop_id = document.getElementById("bus_stop_id").value;
//If Id is blank then given error
if(bus_stop_id == "")
{
alert("Please enter bus stop number");
return false;
}
// This Function post request to API with the given bus stop id
$.ajax({
url: "https://data.smartdublin.ie/cgi-bin/rtpi/realtimebusinformation?stopid="+bus_stop_id+"&format=json",
dataType: 'json',
success: function(results){
// It returnes json data
var str = JSON.stringify(results);
// Code for parsing json
var myObj = JSON.parse(str);
var destination = myObj.results[0].destination;
var origin = myObj.results[0].origin;
var arrivaldatetime = myObj.results[0].arrivaldatetime;
var departuredatetime = myObj.results[0].departuredatetime;
var routenumber = myObj.results[0].route
var virtualPage = "";
virtualPage +=
'<div data-role="page" data-theme="a" id="virtualPage">'
+ '<div data-role="header">'
+ '<h1>' + origin + '</h1>'
+ '<div data-role="content">'
+ '<h3>Venue: ' + destination + '</h3>'
+ '<h3>Date: ' + arrivaldatetime + '</h3>'
+ '<h3>Time: ' + departuredatetime + '</h3>'
+ '</div'
+ '<div class="wrapper"><a data-role="button" data-transition="slide" href="#pageone">Back</a></div>'
+ '</div>'
+ '</div>';
$(virtualPage).insertAfter($('#pageone'));
}
});
});
</script>
</body>
</html>
Before AJAX request
After AJAX request
I would like to fetch JSON data from this server:
http://eso.vse.cz/~xvojs03/studenti.json
to a table, but I do not know how to read Keys and Values and even the Array together to fetch them to the table.
This might be really stupid question but I am beginner in jQuery.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>getJSON - tabulka studentů</title>
<!-- bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script>
$(document).ready(function() {
$.getJSON("http://eso.vse.cz/~xvojs03/studenti.json")
.done(function(data) {
$.each(data, function(key, val) {
$.each(data.predmety, function() {
$("tr").append("<td>"
key + ": " + val + "</td><td>" + predmety.join(",") + " ")
});
});
});
});
</script>
</head>
<body>
<div class="container">
<h2>Následující JSON jsme získali Ajaxem ze serveru</h2>
<table>
<tr>
<th>Jméno</th>
<th>Příjmení</th>
<th>Stupeň</th>
<th>Semestr</th>
<th>Predměty</th>
</tr>
<tr></tr>
</table>
</div>
</body>
</html>
You can try this code with giving a id for the table and putting this js snippet:
$.each(data, function(key, val) {
$("#result-set").append("<tr><td>"+val.jmeno+"</td><td>"+val.prijmeni+"</td><td>"+val.stupen+"</td><td>"+val.semestr+"</td><td>"+val.predmety.join(",")+"</td></tr>");
});
Full page code would be:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>getJSON - tabulka studentů</title>
<!-- bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script>
$(document).ready(function(){
$.getJSON( "http://eso.vse.cz/~xvojs03/studenti.json" )
.done(function(data){
$.each(data, function(key, val) {
$("#result-set").append("<tr><td>"+val.jmeno+"</td><td>"+val.prijmeni+"</td><td>"+val.stupen+"</td><td>"+val.semestr+"</td><td>"+val.predmety.join(",")+"</td></tr>");
});
});
});
</script>
</head>
<body>
<div class="container">
<h2>Následující JSON jsme získali Ajaxem ze serveru</h2>
<table id="result-set">
<tr>
<th>Jméno</th>
<th>Příjmení</th>
<th>Stupeň</th>
<th>Semestr</th>
<th>Predměty</th>
</tr>
</table>
</div>
</body>
</html>
You might have a syntax error in this line:
$("tr").append("<td>"key + ": " + val + "</td><td>" + predmety.join(",") + " ")
Insert a + between your <td> tag and the word key like so:
$("tr").append("<td>" + key + ": " + val + "</td><td>" + predmety.join(",") + " ")
The first fix was to add the reference to your blank table, as answered by #Juyal Ahmed.
Giving the table an id here:
<table id="result-set">
And then doing a query to look it up here:
$("#result-set").append
The problem I'm seeing now is a Cross-Origin issue. Check out the console:
output of the console showing CORS error
I know this question has been asked several times, but i want to load a panel dynamic for all pages and it doesn't work.
Sometimes the css style is not loading or the panel does not open..
Any suggestions? ;(
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css"
href="css/jquery.mobile-1.4.5/jquery.mobile.black-sidebar-theme.css">
<link rel="stylesheet" type="text/css"
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" type="text/css" href="css/own.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
$(document).one('pagebeforecreate', function () {
$.mobile.pageContainer.find("div[data-role=page]").each(function () {
var panelHtml = $('<div data-role="panel" data-display="overlay" data-theme="g" id="panel_' + this.id + '">').load("templates/panel/panel.html", function (data) {
});
$(this).append(panelHtml);
$("#panel_" + this.id).panel();
$("#panel_" + this.id).panel().enhanceWithin();
$("#panel_" + this.id).enhanceWithin();
});
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="content">
<h2>Content</h2>
Open Panel
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<h2>Content</h2>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="content">
<h2>Content</h2>
</div>
</div>
</body>
</html>
My panel.html
<ul data-role="listview" data-theme="g" data-divider-theme="g">
<li data-role="list-divider">Panel</li>
<li>Page1</li>
<li>Page2</li>
<li>Pag3</li>
</ul>
Thank you for your tips... .one('pagebeforecreate',
It is not easy to load the same header and / or footer in all pages.
Finding the right event is really difficult.
I modified your solution a bit, it's more concise and can be faster.
$(document).one('pagebeforecreate', function () {
$.get('header.html').success(function(htmlHeader){
$.get('footer.html').success(function(htmlFooter){
$(htmlHeader).prependTo($('[data-role="page"]'));
$(htmlFooter).appendTo($('[data-role="page"]'));
$('body').enhanceWithin(); // All pages in once
});
});
});
#thanks to ezanker
- i didnt know that a external panel exist, thanks
- i tested it on jsfiddle and it worked but i didnt worked local, i dont know why
thats my solution
its a bit silly when you know external panels exist, but here it is
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css"
href="css/jquery.mobile-1.4.5/jquery.mobile.black-sidebar-theme.css">
<link rel="stylesheet" type="text/css"
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" type="text/css" href="css/own.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
$(document).one('pagebeforecreate', function () {
$.mobile.pageContainer.find("div[data-role=page]").each(function () {
var id = this.id;
var html = $('<div data-role="panel" data-display="overlay" data-theme="g" id="panel_' + this.id + '">').load("templates/panel/panel.html", function (data) {
$("#" + id).append(html);
$("#" + id).enhanceWithin();
});
});
$.mobile.pageContainer.find("div[data-role=page]").each(function () {
var id = this.id;
var html = $('<div data-role="header">').load("templates/header/header.html", function () {
$("#" + id).prepend(html);
$("#" + id).enhanceWithin();
});
});
$.mobile.pageContainer.find("div[data-role=page]").each(function () {
var id = this.id;
var html = $('<div data-role="footer" id="footer" data-position="fixed" data-tap-toggle="false">').load("templates/footer/footerUp.html", function () {
$("#" + id).append(html);
$("#" + id).enhanceWithin();
});
});
$.mobile.pageContainer.find("div[data-role=page]").each(function () {
var id = this.id;
var html = $('<div data-role="popup" id="popup_' + this.id + '" data-theme="a" class="ui-corner-all">').load("templates/popup/type_1/popup.html", function () {
$("#" + id).append(html);
$("#" + id).enhanceWithin();
});
});
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="content">
<h2>Content</h2>
Open Panel
<a href="#" onclick='$("#popup_page1").popup("open")'>Open PopUp</a>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<h2>Content</h2>
Open Panel
<a href="#" onclick='$("#popup_page2").popup("open")'>Open PopUp</a>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="content">
<h2>Content</h2>
Open Panel
<a href="#" onclick='$("#popup_page3").popup("open")'>Open PopUp</a>
</div>
</div>
</body>
</html>
Using jeasyui how could i post the result of the tree elements on the iframe inside the region:center?
Actual code based on Complex Layout demo from jeasyui.com:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="/jeasyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="/jeasyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="/jeasyui/demo.css">
<script type="text/javascript" src="/jeasyui/jquery.min.js"></script>
<script type="text/javascript" src="/jeasyui/jquery.easyui.min.js"></script>
</head>
<body>
<h2>Test</h2>
<div style="margin:20px 0;"></div>
<div class="easyui-layout" style="width:auto;height:565px">
<div data-options="region:'west',split:true", title='Menu' style="width:200%;">
<div class="easyui-accordion" data-options="fit:true,border:false">
<div title="Servers Index" style="padding:5px;">
<ul class="easyui-tree"
data-options="
url:'jj.json',
method:'get',
animate:true,
formatter:function(node){
s = node.text;
if (node.server){
s = '<a href=\'http://'+ node.server +'\'>'
+ node.server + '</a>';
}
return s;
}">
</ul>
</div>
</div>
</div>
<div data-options="region:'center',title:'Output',
iconCls:'icon-ok',href:''"
name="center" style="padding:10px">
<iframe name="iFrame" width="100%" height="90%"frameborder='0'>
</iframe>
</div>
<div data-options="region:'south',split:true" style="height:50px;">
</div>
</div>
</body>
</html>
json content:
[{
"id":1,
"text":"pick one",
"children":[{
"id":11,
"server":"www.google.com"
},{
"id":12,
"server":"www.altavista.com"
}]
}]
Thanks in advance.
I was able to solve it by simply adding target=\'iFrame\':
<ul class="easyui-tree"
data-options="
url:'jj.json',
method:'get',
animate:true,
formatter:function(node){
s = node.text;
if (node.server){
s = '<a href=\'http://'+ node.server +'\' target=\'iFrame\'>' + node.server + '</a>';
}
return s;
}
">
</ul>