looping through getJSON results to display json object in <li> - only returns last element - json object has full results? looping through data[i] should give me all?
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no">
<link href="http://jqmdesigner.appspot.com/gk/lib/jquery.mobile/1.4.2/flatui/jquery.mobile.flatui.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<title>get the html from a website</title>
<script>
$( document ).ready(function() {
$.getJSON("tt_json.php", function(data){
for (var i = 0; i < data.length; i++) {
$.each(data[i], function(key, val) {
//alert(key + ":" + val);
$('#myUL').html("<li>" + key + " : " + val + "</li>");
});
}
});
</script>
</head>
<body>
<!-- Page: home -->
<div id="home" data-role="page">
<div data-role="header" data-position="fixed" data-theme="b">
<h3>GET WEB DATA</h3>
</div>
<div role="main1" id="mainone" class="ui-content">
<ul data-role='listview' id='myUL' data-inset='true' class='ui-listview ui-listview-inset ui-corner-all ui-shadow'>
</ul>
</div>
<div role="main" id="mainzero" class="ui-content">
</div>
</div>
</body>
you seem to set the html tag with id myUL in the loop of your javascript function. this overwrites the inner html of that tag each time. Try to add the li element instead of overwriting.
Related
Here's the Plunk Code can Verify Now also
http://next.plnkr.co/edit/vrI2haNy1zYPDcCWh7gj?p=preview&utm_source=legacy&utm_medium=worker&utm_campaign=next&preview
Java Script Code: it is containing dummy json there root node is Admin System and there sub menu are Like Angular, Linux, Server
Here UI will be shown as Given Below Format and this Menu will be able to Expendable and Close able or collapse so this will be fetch the data as from Service and same way can be use in project
angular.module('myapp', ['ui.bootstrap'])
.controller("MainController", ["$scope",
function($scope){
$scope.bodyText = "Test Menu";
$scope.showSubmenu = function(item) {
if($scope.activeParentIndex === item){
$scope.activeParentIndex = "";
}else{
$scope.activeParentIndex = item;
}
}
$scope.isShowing = function(index) {
if($scope.activeParentIndex === index){
return true;
} else{
return false;
}
};
$scope.modulos =
[{"module":"Admin System ",
"adm_modulo_id":1,
"submodule":[{"res":"Angular","url":"#/admin/1"},
{"res":"Linux","url":"#/admin/2"},
{"res":"Server","url":"#/admin/3"}
]
}];
}]);
Html Code: it will show dummy json code as menu and sub-menu
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap-css#3.x" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.2.x" src="http://code.angularjs.org/1.2.9/angular.js" data-semver="1.2.9"></script>
<script data-require="ui-bootstrap#*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="app.js"></script>
</head>
<body>
<h1>Test</h1>
<div ng-controller="MainController">
{{bodyText}}
<ul class="sidebar-menu" ng-repeat="m in modulos">
<li class="treeview" ng-repeat="(itemIndex, item) in modulos">
<a ng-click="showSubmenu(itemIndex)">
<i class="fa fa-table"></i> <span>{{item.module}}</span>
</a>
<ul class="sub-nav" ng-show="isShowing(itemIndex)">
<li ng-repeat="sub_element in m.submodule">
{{sub_element.res}}
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I want to have a google map on my website, but the map does not show up if I first open index.html and navigate to map.html.
But if I directly open map.html or refresh the browser window while being on map.html the map shows up.
How can the map show up when navigating from index.html to map.html?
I'm using the standalone Pjax JavaScript module v0.1.4 stable (no jquery).
I added document.write("rendered at: "+ Date.now()) In my example code for better understanding.
index.html
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link rel= "stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="https://raw.githubusercontent.com/MoOx/pjax/a17a6b90bebefd8f5209e6a6f7d8c5d59296232a/src/pjax.js"></script>
<script type="text/javascript" src='example.js'></script>
</head>
<body>
<div class="col-sm-2">
<div class="list-group dynamic">
Start
Map
</div>
</div>
<div class="col-sm-10">
<h1>STATIC HEADING</h1>
<script type="text/javascript">document.write("rendered at: "+ Date.now())</script>
<div class="dynamic">
<h4>this is a dynamic line, this is site 1</h4>
</div>
</body>
</html>
map.html
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link rel= "stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="https://raw.githubusercontent.com/MoOx/pjax/a17a6b90bebefd8f5209e6a6f7d8c5d59296232a/src/pjax.js"></script>
<script type="text/javascript" src='example.js'></script>
</head>
<body>
<div class="col-sm-2">
<div class="list-group dynamic">
Start
Map
</div>
</div>
<div class="col-sm-10">
<h1>STATIC HEADING</h1>
<script type="text/javascript">document.write("rendered at: "+ Date.now())</script>
<div class="dynamic">
<h4>this is a dynamic line, this is the map site</h4>
<!-- map is not displayed currently -->
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var latLng = new google.maps.LatLng(50.0, 10.0)
var mapOptions = {center: latLng,zoom: 4,mapTypeId: google.maps.MapTypeId.ROADMAP}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas"></div>
</div>
</div>
</body>
</html>
style.css
#map-canvas {
width: 90%;
height: 500px;
}
example.js
document.addEventListener("DOMContentLoaded", function() {
var pjax = new Pjax({
selectors: [".dynamic"]
})
console.log("Pjax initialized.", pjax)
})
Assign the style explicitly to the map div the map work .. could be you have an error in the path for style.css
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link rel= "stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="https://raw.githubusercontent.com/MoOx/pjax/a17a6b90bebefd8f5209e6a6f7d8c5d59296232a/src/pjax.js"></script>
<script type="text/javascript" src='example.js'></script>
</head>
<body>
<div class="col-sm-2">
<div class="list-group dynamic">
Start
Map
</div>
</div>
<div class="col-sm-10">
<h1>STATIC HEADING</h1>
<script type="text/javascript">document.write("rendered at: "+ Date.now())</script>
<div class="dynamic">
<h4>this is a dynamic line, this is the map site</h4>
<div id="map-canvas" style="width:90%; height:500px;"></div>
</div>
</div>
<!-- map is not displayed currently -->
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var latLng = new google.maps.LatLng(50.0, 10.0)
var mapOptions = {center: latLng,zoom: 4,mapTypeId: google.maps.MapTypeId.ROADMAP}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script type="text/javascript" src='example.js'></script>
</body>
</html>
This is the code for the page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Ian Kenji Part 2 Web Development</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="Description" lang="en" content="Ian Kenji Part 2 Web Development">
<meta name="author" content="Ian Kenji">
<meta name="robots" content="index, follow">
<script>
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML =
h + ":" + m + " o'clock";
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script>
<script>
function greetings(){
var now = new Date();
if (now.getHours() < 5) {
document.getElementById('greeting').innerHTML =
"What are you doing up so late?";
}
else if (now.getHours() < 9) {
document.getElementById('greeting').innerHTML =
"Good Morning!";
}
else if (now.getHours() < 17) {
document.getElementById('greeting').innerHTML =
"No surfing during working hours!";
}
else {
document.getElementById('greeting').innerHTML =
"Good Evening!";
}
}
</script>
<!-- icons -->
<link rel="apple-touch-icon" href="assets/img/apple-touch-icon.png">
<link rel="shortcut icon" href="favicon.ico">
<!-- Override CSS file - add your own CSS rules -->
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<div class="container">
<div class="header">
<h1 class="header-heading">James Bond Spectre</h1>
</div>
<div class="nav-bar">
<ul class="nav">
<li>Home</li>
<li>Images</li>
<li>Video</li>
<li>Audio</li>
<li>Text</li>
<li>Documentation</li>
<li>Validation</li>
<li><a><p><br></p><body onload="greetings(); startTime()"><div id="txt"></div><div id="greeting"></div></a></li>
</ul>
</div>
<div class="content">
<div class="main">
<h1>Images</h1>
<hr>
<hr>
<h4>Bond, James Bond</h4>
<center><img src="assets/img/Spectre1.jpg" alt="Spectre" style="width:100%;height:100%;"></center>
<p><br><p>
<center><img src="assets/img/pic5.jpg" alt="Spectre" style="width:100%;height:100%;"></center>
<p><br><p>
<center><img src="assets/img/pic2.jpg" alt="Spectre" style="width:100%;height:100%;"></center>
<p><br><p>
<center><img src="assets/img/pic3.jpg" alt="Spectre" style="width:100%;height:100%;"></center>
<p><br><p>
<center><img src="assets/img/pic4.jpg" alt="Spectre" style="width:100%;height:100%;"></center>
<p><br><p>
<!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/7GqClqvlObY" frameborder="0" allowfullscreen></iframe> -->
</div>
</div>
<div class="footer">
© Copyright 2015 Ian Kenji
</div>
</div>
</body>
</html>
It is really sloppy I know but I am a little new to this. This is my question, when running it through a validator I get this error
start tag body seen but an element of the same type was already open.
From line 72, column 28; to line 72, column 67
<li><a><p><br></p><body onload="greetings(); startTime()"><div id="txt"></div><div id="greeting"></div></a></li>
In addition I am told that the use of <center> to center the pictures is obsolete and that I should use the CSS. However, I have a problem with that as I need some of the pictures to be centered, and some of them not to be. How can I make it so that some are, and some aren't?
And what can I do to fix that error?
You have 2 body tags. Replace the 1st with the 2nd and remove the 2nd.
Add class center to your css
something like this
img.center {
display: block;
margin-left: auto;
margin-right: auto
}
and put that class on image tag that you want to center then remove the center tag.
<img src="assets/img/Spectre1.jpg" class="center" />
Read more about css here: http://www.w3.org/Style/Examples/007/center.en.html
I am new to Angularjs and quite not sure where to start from,i need to display data(coming from a json) under each date in datepicker.
I have my datepicker calendar ready.
<!doctype html>
<html ng-app="720kb">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="http://720kb.github.io/csshelper/assets/ext/src/helper.css">
<link rel="stylesheet" type="text/css" href="src/css/angular-datepicker.css">
<title>Angularjs Datepicker</title>
</head>
<body>
<div class="separator50"></div>
<div class="col6 offset-left2">
<div class="col3">
<div class="datepicker"
date-format="MMMM d, y"
button-prev='<i class="fa fa-arrow-circle-left"></i>'
button-next='<i class="fa fa-arrow-circle-right"></i>'>
<input ng-model="date2" type="text" class="angular-datepicker-input"/>
</div>
Date 2 is: {{date2}}
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-route.min.js"></script>
<script type="text/javascript" src="src/js/angular-datepicker.js"></script>
<script type="text/javascript" src="assets/js/index.js"></script>
</body>
</html>
This is an example of getting JSON Data in Angular Js , can u give us some more information about what the structure of the Json ?
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://www.w3schools.com/angular/customers.php")
.success(function (response) {$scope.names = response.records;});
});
</script>
I'm on a phonegap project.
I was doing this project with Jquery Mobile Framework. But its results and performance arre so bad at many devices (f.e. my device android 2.3.3 - jquery mobile works nice on android 4.x.x devices i think)
After that, i found this nice and fast framework.
Now, i'm trying to carry my jquery mobile project to Jqmobi.
But there are some problems when i'm trying to carry. I am stucked with the function that i need to show current/active/chosen/opened panel when i click from the navigation.
Why do i need this. Because, "i want to work the functions when the user chooses that panel" that is what i want.
Here is what i have tried in jqmobi;
HTML SIDE ;
<!DOCTYPE html>
<html>
<head>
<title>Live Score</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" type="text/css" href="css/icons.css" />
<link rel="stylesheet" type="text/css" href="css/jq.ui.css" />
<link rel="stylesheet" type="text/css" href="css/add.css" />
<script type="text/javascript" charset="utf-8" src="js/jq.ui.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jq.mobi.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/myscripts.js"></script>
</head>
<body>
<div id="jQUi">
<div id="content">
<div title="Home" id="index" class="panel" selected="true">
<img src="img/fanatik.jpg" width="320" height="120" alt="">
<ul class="index_list">
<li><span>Football </span>Live Scores</li>
<li><span>Football </span>League Tables</li>
<li><span>Football </span>League Fixtures</li>
<li><span>Program </span>Settings</li>
</ul>
</div>
<!---------------------------------------------------------------------------------------------------->
<div title="LiveScores" id="contents01" class="panel" scrolling="no">
</div><!-- livescores page -->
<!---------------------------------------------------------------------------------------------------->
<div title="LeagueTables" id="contents02" class="panel">
</div><!-- leaguetable page -->
<!---------------------------------------------------------------------------------------------------->
<div title="LeagueFixtures" id="contents03" class="panel">
</div><!-- leaguefixture page -->
<!---------------------------------------------------------------------------------------------------->
<div title="Settings" id="contents04" class="panel">
</div><!-- settings page -->
<!---------------------------------------------------------------------------------------------------->
</div>
<div id="navbar">
home
live
tables
fixtures
settings
</div>
<!---------------------------------------------------------------------------------------------------->
</div>
</body>
</html>
Javascript Side (not working)
$(document).bind('pageshow', function () {
var id = $.ui.activeDiv[0].id;
if (id=="contents01"){
ctx="livescores";
$("#contents01 [class='panel']").text(ctx);
}
else
if (id=="contents02"){
ctx="leaguetables";
$("#contents02 [class='panel']").text(ctx);
}
else
if (id=="contents03"){
ctx="leaguefixtures";
$("#contents03 [class='panel']").text(ctx);
}
});
function getLiveMatches(){
$.getJSON("MY WEB API URL", function (data){
ctx='<ul>';
$.each(data, function (index, value) {
ctx+="<li><table border='1' class='imagetable'><tr><td rowspan='3' width='18%'>" + value.MinuteOrShortStatus + "</td><td>" + value.HomeTeam.Name + "</td><td width='8%'>" + (value.CurrentHomeTeamScore == null ? "-" : value.CurrentHomeTeamScore) + "</td></tr><tr><td>" + value.AwayTeam.Name + "</td><td width='8%'>" + (value.CurrentAwayTeamScore == undefined ? "-" : value.CurrentAwayTeamScore) + "</td></tr></table></li>";
});
ctx+='</ul>';
injectContext("contents01",ctx);
});
}
function injectContext(target, context){
$("#"+target+" [class='panel']").html(context);
}
How can i determine the active panel or page or div in Jqmobi / Appframework..
Please help about it.
Thanks.
You can run a function whenever a panel becomes active.
Add the attribute data-load="func_name" to the panel's div tag.
For Example
<!DOCTYPE html>
<!--HTML5 doctype-->
<html>
<head>
...
<script>
function onPanel1Activated() {
do task for panel1
}
function onPanel2Activated() {
do task for panel2
}
</script>
...
</head>
<body>
<div id="afui" class='ios'>
<!-- Header ------------------------------------------------------->
<div id="header"></div>
<!-- Content Start ------------------------------------------------>
<div id="content">
<!-- Panel 1 -------------------------------------------------->
<div class="panel" title="Panel 1" id="panel1" selected="true" data-load="onPanel1Activated">
...
</div>
<!-- Panel 2 -------------------------------------------------->
<div class="panel" title="Panel 2" id="panel2" data-load="onPanel2Activated">
...
</div>
...
</div>
</div>
</body>
</html>