jQuery Single Page app dynamic divs
Question
I have a jQuery Single Page app that works but not the way I want it to. I have a list of counties that is read from a JSON file (the list can be filtered). When one is chosen, it appears as a hyperlink that links to another "page" with a town from that county (the "page" is actually just a div in the same page). The trouble is I have to manually create the divs beforehand. Eg if there are five items in the JSON file and I want to add one more, I have to manually add an extra div in the page. It works OK for the counties, I can add extra counties to the JSON and it builds an extra hyperlink but for the "page" it links to I need to create a new div in the html. When I create the divs dynamically (under the inner "each" in the Javascript code) nothing happens when you click on the link as the div does not exist in the html. Is there a solution to this? (see code below)
HTML (with js):
<!doctype html>
<html>
<head>
<script src="js/jquery-1.11.2.min.js"></script>
<script src="jquery.mobile-1.4.5/jquery.mobile-1.4.5.js"></script>
<link rel="stylesheet" href="jquery.mobile-1.4.5/jquery.mobile-1.4.5.css"></script>
<title>How to Parse a JSON file using jQuery</title>
</head>
<body>
<div data-role="page">
<a href="#myKoolPanel" class="ui-btn ui-icon-navigation ui-btn-icon-left" data-iconpos="notext">Menu</a>
<div data-role="content">
<div id="results">
<ul id="mynewlist" data-role ="listview" data-autodividers="true" data-filter="true" data-filter-reveal="true">
</ul>
</div>
</div>
<div data-role="panel" class="cd-panel from-left" data-position="left" data-position-fixed="false" data-display="reveal" id="myKoolPanel" data-theme="a">
<ul id ="myul" data-role="listview" data-theme="a" data-divider-theme="a" style="margin-top:-16px;" class="nav-search">
<li>
<a href="Test1.html">Towns in Ireland</a>
</li>
<li>
<a href="Test2.html">Map of Ireland</a>
</li>
</ul>
</div>
</div>
<script>
$(document).ready(function(){
$.getJSON( "data.json", function( data ) {
var items = [];
var z=0;
$.each( data, function( i, item ) {
z=z+1;
items.push('<li><a href=#textcontainer'+z+'>' + i + '</a></li>');
$.each(item, function(property, value) {
$('#textcontainer'+z).append(value);
});
});
$('#mynewlist').append( items.join('') );
});
});
</script>
<div id ="textcontainer1"> </div>
<div id ="textcontainer2"> </div>
<div id ="textcontainer3"> </div>
<div id ="textcontainer4"> </div>
<div id ="textcontainer5"> </div>
</body>
</html>
JSON file:
{
"Kerry": {
"town": "Kenmare"
},
"Cork": {
"town": "Mallow"
},
"Limerick": {
"town": "Charleville"
},
"Meath": {
"town": "Trim"
},
"Waterford": {
"town": "Lismore"
}
}
1 answers
solution1
1 2015-06-18 11:47:19
Using AngularJs you can solve it.
Define js file as below
var app = angular.module('app', []);
app.controller('ctrl', function ($scope) {
var data;
$scope.data =[{
"name":"Kerry",
"town": "Kenmare"
},
{
"name":"Cork",
"town": "Mallow"
},
{
"name":"Limerick",
"town": "Charleville"
},
{
"name":"Meath",
"town": "Trim"
},
{
"name":"Waterford",
"town": "Lismore"
}] ;
});
HTML file code :
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"> </script>
<script language="javascript" type="text/javascript" src="fileName.js"> </script>
</head>
<body>
<div ng-controller="ctrl">
<div ng-repeat="d in data">
{{d.name}} : {{d.town}}
</div>
</div>
</body>
</html>
I hope this will help.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.