Question

I have a Javascript function that prints various information from a json file and displays it in a table of contents fashion. It parses the information and prints it into a "ui-grid-b" div because i want them in rows of 3. I had a problem with the javascript printing repeatedly every time the page was opened so I added in a function to clear the div every time it prints. However, when I open a new seperate page with a "ui-grid-b" div in it it clears that and prints the table of contents again. Here's the js code and I hope you can help:

            <script type="text/javascript">

        var grid= new Array();
        grid[0]= "a";
        grid[1]= "b";
        grid[2]= "c";
        var j=0;

        var color= new Array();
        color[0]= '#00c6c4;';
        color[1]= '#6fc41b;';
        color[2]= '#ffbd0c;';
        color[3]= '#ff84f1;';
        color[4]= '#1fbbff;';
        color[5]= '#ff1700;';
        color[6]= '#976833;';
        var k=0;


        $(document).on("pageinit", "#Page1", function(){


          var imp= "Json/empirical.json";
          $.getJSON(imp, function(data) {
           j=0;
           k=0;
           var toc= '';
           $.each(data.tcontent, function(index, item) {
            if (j > 2) { j = 0; }
            if (k > 6) { k = 0; }
            toc += "<div class='ui-block- ' " + grid[j] + " '>" + item.url + '<div class="grid" style="background-color: ' + color[k] + ' ">' + "<p class='gridtext'>"  + item.Name  + "</p>" +  "</div>" + "</a>" + "</div>"
            j++;
            k++;
          });


           $(".ui-grid-b").empty().append(toc);
         });
        });


        </script> 
Was it helpful?

Solution

Assign your toc grid a unique ID:

<div id="theTOC" class="ui-grid-b"></div>

Then in your code instead of:

$(".ui-grid-b").empty().append(toc);

do

$("#theTOC").empty().append(toc);

Make sure this id is unique accross all pages. Also make sure your pages have unique IDs (i.e. only one page called "Page1").

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top