El siguiente código carga un archivo json en mi aplicación para completar algunos datos de la tabla. Se hace el trabajo.

function init_main () {
    $('html').hide().fadeIn('slow');

    // popuate from index.json
    var json = $.getJSON(chrome.extension.getURL('js/index.json'), function(json) {
        // CREATE SETTINGS TABLE WITH GIVEN INDEX
        for (var property in json) {
            var table = $('<table></table>').addClass('table');
            var header = $('<thead></thead>').addClass('thead-inverse');
            var head_r = $('<tr></tr>');
            var h1 = $('<th></th>').text(property);
            var h2 = $('<th></th>').text('check to remove: ');
            head_r.append(h1);
            head_r.append(h2);
            header.append(head_r);
            table.append(header);
            var body = $('<tbody></tbody>');
            table.append(body);
            for (var tag in json[property]) {
                var body_r = $('<tr></tr>');
                var d1 = $('<td></td>').text(tag);
                var d2 = $('<td></td>')     // maybe change to class?
                $('<input />', { type: 'checkbox', id: tag}).appendTo(d2);
                body_r.append(d1);
                body_r.append(d2);
                body.append(body_r);
            }
            $('#tableWrap').append(table);
        }
    });
}

//bind events to dom elements
document.addEventListener('DOMContentLoaded', init_main);

Sin embargo, a diferencia del resto de mi marcado html, solo estos elementos no usarán la biblioteca de arranque para alterar mi CSS . El resto del marcado html utiliza con éxito la biblioteca bootstrap.

He intentado mover el código fuera de la devolución de llamada sin suerte. No hay errores en la consola.

¿Alguien tiene alguna idea de por qué bootstrap no entrará en vigor durante el fragmento de código anterior? Creo que tiene algo que ver con la carga de la página, pero hasta ahora no he visto ningún éxito con window.onPageLoad ()

Aquí están las importaciones de mi script en mi html para referencia:

<html>
    <head>
        <!-- load stylesheets: Bootstrap v2.3.0 - http://twitter.github.com/bootstrap/index.html -->
        <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"></link>

        <!-- load javascript: jQuery 1.9.1 - http://jquery.com/ -->
        <script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>

        <!-- load javascript: Bootstrap v2.3.0 - http://twitter.github.com/bootstrap/ -->
        <script type="text/javascript" src="../js/bootstrap.min.js"></script>

        <!-- load stylesheets: internal -->
        <link rel="stylesheet" type="text/css" href="../css/global.css"></link>
        <link rel="stylesheet" type="text/css" href="../css/main.css"></link>
    </head>
    <body>  
        <div class="navbar">
        <div class="navbar-inner">
            <a id="home" id="active" class="brand" href="#">
            <!-- UNCOMMENT THE CSS VALUES TO TEST OTHER DIMENTIONS -->
            <img src="../images/icon.png" alt=""> 
            <span class="icon-bar"></span>
            Fluff 1.0
            </a>
            <a id="settings" class ="brand" href="#" >
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            Settings</a>
            <a id="run" class ="brand" href="#" >
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            Run</a>
        </div>
        </div>
        <div id="outer">
            <!-- Main Page -->
            <div id="main-inner">
                <div id="main-title"> Fluff 1.0 </div>
                <div id="textblock">Donate or contact block here</div>
            </div>
            <!-- Settings Page -->
            <div id="settings-inner">
                <h5 id="directions"> <span></span> Select Tags to Remove from Automated Browser Queries </h5>
                <div id="tableWrap">

                </div>
            </div>
            <!-- Run Page -->
            <div id="run-inner">
                <table class='table'>
                    <thead>
                        <tr>
                            <td> 1 </td>
                            <td> 2</td>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>

        <!-- load javascript: unique html page javascript file -->
        <script type="text/javascript" src="../js/main.js"></script>
    </body>

editar: sample.json - la tecla 'num' no es relevante en ninguna de las preguntas o códigos

{
    "sex": {
        "M":{   
                "num":13,
            },
        "F": {
                "num":13,
            },
        "T": {
                "num":0
        }
    },
    "politics": {
        "L": {  
                "num":10,
            },
        "R": {
                "num":10,
        }
    },
    "race": {
        "AMI":{
                "num":6,
        },
        "ASI":{
                "num":7,
        },
        "AFA":{
                "num":7,
        },
        "PCI":{
                "num":0
        },
        "WHT":{
                "num":2,
                "3":"-"
        },
        "HSP":{
                "num":5,
                "6":"-"
        },
        "MDE":{
                "num":6,
        }
    },
    "orientation": {
        "STR": {
                "num":0
        },
        "GAY": {
                "num":0
        },
        "OTH": {
                "num":0
        }
    },
    "interests": {
        "GARD":{
                "num":4,
        },
        "NHL":{
                "num":1,
        },
        "NBA":{
                "num":1,
        },
        "TECH":{
                "num":0
        }
    }
}
0
Lamar 4 abr. 2017 a las 06:43

2 respuestas

La mejor respuesta

Resuelto cambiando div id='tableWrap' a table id='tableWrap' en html

Mesas dentro de mesas ...

0
Lamar 4 abr. 2017 a las 06:30

No entiendo su problema exactamente, pero puse su muestra en jsfiddle eliminando algún archivo html inútil para que sea fácil de leer y esto funciona. El único código incorrecto es var json = $.getJSON. ¿Por qué lo haces? sin embargo, no tiene ningún valor devuelto y, si lo fuera, nunca funciona en funciones asíncronas como get. ¡El segundo problema es que nunca llamas a tu función!

Vea este código y comparta su idea conmigo:

jsfiddle

0
Siamak Ferdos 4 abr. 2017 a las 05:38