Basically I've been successfully printing a json file with a js function in html. I have since switched over to jquery mobile and tried to modify my function to match with the jquery mobile syntax. I have manually added what the function should be printing out and it displays correctly so there is a problem with the function. I am trying to print in ui-grid-d and have an array looping through each of the blocks in order to keep correct syntax
JS Function:
<script type="text/javascript">
var grid= new Array();
grid[0]= "<div class='ui-block-a'>";
grid[1]= "<div class='ui-block-b'>";
grid[2]= "<div class='ui-block-c'>";
grid[3]= "<div class='ui-block-d'>";
var j=0;
$(function (){
var imp = "Json/contents.json"
$.getJSON(imp, function(data) {
var toc="";
var pos=grid[j];
$.each(data.tcontent, function(index, item) {
toc += pos + item.url + '<div class="grid">' + "<p class='gridtext'>" + item.Chapter + ":" + item.Name + "</p>" + "</div>" + "</a>" + "</div>"
});
//incriment j
j++;
//if j is out of bounds return j to 0
if(j==4){
j=0;
}
$(toc).appendTo(".ui-grid-d");
//alert(toc)
});
});
</script>
Json File (forget about the background attribute):
{
"tcontent": [{
"Chapter": "1",
"Name": "General Principles of Antibiotic Perscribing",
"url":"<a href='general_principles.html'>",
"Background":"yellow"
}, {
"Chapter": "2",
"Name": "Note on meticillin resistant SA",
"url":"<a>",
"Background":"background-color:red"
}, {
"Chapter": "3",
"Name": "Empirical Therapy Guidelines:",
"url": "<a href='empirical.html'>",
"Background":"background-color:red"
}, {
"Chapter": "4",
"Name": "Treatment of Malaria",
"url":"<a>",
"Background":"background-color:red"
}, {
"Chapter": "5",
"Name": "Antibiotic Prophylaxis:",
"url":"<a>",
"Background":"background-color:red"
}, {
"Chapter": "6",
"Name": "Aminoglycoside and Glycopeptide dosing and monitoring:",
"url":"<a>",
"Background":"background-color:red"
}, {
"Chapter": "7",
"Name": "Splenectomy: vaccination and antibiotic prophylaxis",
"url":"<a>",
"Background":"background-color:red"
}, {
"Chapter": "8",
"Name": "Restricted Antimicrobials",
"url":"<a>",
"Background":"background-color:red"
}, {
"Chapter": "9",
"Name": "Topical Antibiotics",
"url":"<a>",
"Background":"background-color:red"
}, {
"Chapter": "10",
"Name": "Antimicrobials and Renal Failure",
"url":"<a>",
"Background":"background-color:red"
}, {
"Chapter": "11",
"Name": "Antimicrobials and Hepatic Disease",
"url":"<a>",
"Background":"background-color:red"
}, {
"Chapter": "12",
"Name": "Administration of IV Antimicrobials",
"url":"<a>",
"Background":"background-color:red"
}, {
"Chapter": "13",
"Name": "Penicillin allergy & other beta-lactam containing antibiotics",
"url":"<a>",
"Background":"background-color:red"
}]
}
Relevant HTML:
<body>
<div data-role="page" data-theme="a" id="Page1">
<div data-role="header" data-theme="c">
<a data-rel="back" data-role="button" class="ui-btn-left" data-transition="flip" data-icon="back"> Back </a>
<a href="info.html" data-role="button" class="ui-btn-right" data-transition="flip" data-icon="info"> Info </a>
<h2>Main Menu</h2>
</div>
<div data-role="content" data-theme="c" id="Page1_Content">
<div class="ui-grid-d">
</div>
<div data-role="footer" data-theme="c">
<h2>(c) Darragh O'Connor </h2>
</div>
</div>
</body>
If anyone could see the problem I'd much appreciate it. I've been racking my brains for hours. Thanks
Here is a DEMO
You need to increment j
within the $.each()
and also set it to 0 if j > 3. You also had a missing <a>
tag or and extra </a>
within the text. Your variable pos would also never change because it is outside the each() loop. For 4 columns, the grid class should be ui-grid-c
.
$(document).on("pageinit", "#Page1", function(){
var toc= '';
$.each(json.tcontent, function(index, item) {
if (j > 3) { j = 0; }
toc += grid[j] + item.url + '<div class="grid">' + "<a><p class='gridtext'>" + item.Chapter + ":" + item.Name + "</p>" + "</div>" + "</a>" + "</div>"
j++;
});
$(toc).appendTo(".ui-grid-c");
});
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.