简体   繁体   中英

Javascript function printing into div on separate page jquery-mobile

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> 

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 (ie only one page called "Page1").

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM