2012-06-26 9 views
24

Il seguente errore viene gettata in di Google Chrome sviluppatori strumenti:TypeError Uncaught: Impossibile leggere proprieta 'className' undefined

Uncaught TypeError: Cannot read property 'className' of undefined

Il codice su cui viene generata l'errore è:

var oTable = $('#resultstable').dataTable({ 
          "bAutoWidth" : true, 
          "iDisplayLength" : 10, 
          "bFilter" : false, 
          "bLengthChange" : false 
         }); 

resultstable è l'id di una tabella in HTML:

<table cellpadding="0" cellspacing="0" border="0" id="resultstable" 
        name="resultstable" class="display datatable"> 

la cosa strana è che un Dopo il tag table c'è un'istruzione if. La tabella funziona perfettamente e il CSS si presenta correttamente quando il programma viene inviato nella sezione if{}, ma genera l'errore precedente e nessun CSS viene applicato quando si trova nella sezione if{}.

Aiuto per favore!

+2

per favore, includi il codice completo con "else if" che menzioni. – Kaii

+0

è un sacco di codice perché ci sono datatables e cose che vengono passati e modificati. Un sacco di codice che è lì dentro dovrebbe essere nella pagina del server, ma non ho ancora avuto la possibilità di spostarlo, ma tutte le classi che impostano tr e td css sono uguali sia nel if che nell'altro se –

+0

puoi metterlo su [jsfiddle] (http://jsfiddle.net/) o [github gists] (http://gist.github.com) in modo che la gente possa guardarlo? – bokonic

risposta

2

Ho ottenuto un errore identico a quello che stai ottenendo ora. Una volta ho riscontrato un errore molto simile usando la libreria Scelta. Il problema era (nel caso di Chosen) che venivano usati gli ID con i caratteri [], quindi confondendo Javascript tra selettori css e id (ricordate che in CSS possiamo usare [] per specificare gli attributi).

Nel caso di DataTables, tuttavia, ho notato che lo script DataTables stesso era in fase di preparazione class = " " prima del primo elemento in ogni elemento tr all'interno di tbody.

La ragione per questo era perché l'output HTML dal php aveva un errore logico. Il codice ha provocato l'errore:

<?php 
for ($currentRow = 0 ; $currentRow <= $query_length; $currentRow++) { 
     ?> 
     <tr> 
     <?php 
     list($job_id, $company_id, $job_title, $industry_id, $profession_int, $job_openings, $job_city, $job_salary_start, $job_end_date, $job_start_date, $job_skills, $company_name, $isConfidential, $job_experience_level) = dbRow($query_results, $currentRow); 
     echo "<td class = \"detailed-job-row\">" . $job_title . "</td>"; 
     echo "<td class = \"detailed-job-row\">" . $company_name . "</td>"; 
     echo "<td class = \"detailed-job-row\">" . $industry_id . "</td>"; 
     echo "<td class = \"detailed-job-row\">" . $profession_int . "</td>"; 
     echo "<td class = \"detailed-job-row\">" . $job_openings . "</td>"; 
     echo "<td class = \"detailed-job-row\">" . $job_city . "</td>"; 
     echo "<td class = \"detailed-job-row\">" . $job_salary_start . "</td>"; 
     echo "<td class = \"detailed-job-row\">" . $job_end_date . "</td>"; 
     echo "<td class = \"detailed-job-row\">" . $job_start_date . "</td>"; 
     echo "<td class = \"detailed-job-row\">" . $job_skills . "</td>"; 
     echo "<td class = \"detailed-job-row\">" . $job_experience_level . "</td>"; 
     ?> 
     </tr> 
     <?php 
    } ?> 
    </tbody> 
    </table> 
<?php 
} 
?> 

C'è stato un errore nella parte inferiore del lungo tavolo, lungo, indicando che Postgres non potevano saltare a remare 208. Questo mi ha detto che avevo bisogno di fermarsi a loop i - 1 o $currentRow - 1.

Quindi il codice di lavoro fisso:

<?php 
for ($currentRow = 0 ; $currentRow <= $query_length - 1; $currentRow++) { 
     ?> 
     <tr> 
     <?php 
     list($job_id, $company_id, $job_title, $industry_id, $profession_int, $job_openings, $job_city, $job_salary_start, $job_end_date, $job_start_date, $job_skills, $company_name, $isConfidential, $job_experience_level) = dbRow($query_results, $currentRow); 
     echo "<td class = \"detailed-job-row\">" . $job_title . "</td>"; 
     echo "<td class = \"detailed-job-row\">" . $company_name . "</td>"; 
     echo "<td class = \"detailed-job-row\">" . $industry_id . "</td>"; 
     echo "<td class = \"detailed-job-row\">" . $profession_int . "</td>"; 
     echo "<td class = \"detailed-job-row\">" . $job_openings . "</td>"; 
     echo "<td class = \"detailed-job-row\">" . $job_city . "</td>"; 
     echo "<td class = \"detailed-job-row\">" . $job_salary_start . "</td>"; 
     echo "<td class = \"detailed-job-row\">" . $job_end_date . "</td>"; 
     echo "<td class = \"detailed-job-row\">" . $job_start_date . "</td>"; 
     echo "<td class = \"detailed-job-row\">" . $job_skills . "</td>"; 
     echo "<td class = \"detailed-job-row\">" . $job_experience_level . "</td>"; 
     ?> 
     </tr> 
     <?php 
    } ?> 
    </tbody> 
    </table> 
<?php 
} 
?> 

Eseguendo questa modifica permesso DataTables per eseguire correttamente.

Quindi, anche se non riesco a fornire una soluzione funzionante, ti consiglio di controllare il markup html, in quanto potrebbe essere la fonte del tuo problema (ad esempio, la tua tabella ha un tbody?).

+0

+1 per guardare il markup html. Ho avuto lo stesso errore perché era fuori da un ciclo di foreach (e quindi solo l'ultima riga era chiusa) – Flion

49

L'altra risposta mi ha messo sulla strada giusta.

Più succintamente, l'errore era che la tabella che stavo creando non era corretta.

mie colonne di intestazione (all'interno di un thead ovviamente), non ha prodotto risultati con i miei colonne fila (all'interno del tbody)

Nella mia situazione, ho avuto troppe colonne all'interno dell'intestazione.

8

Datatables richiede che la tabella html sia perfetta. Ho scoperto che ho ricevuto questo errore quando non avevo una quantità uguale di <th> e <td>. Assicurati di non avere un'intestazione aggiuntiva.

+0

G8 .. rispondi .. grazie molto caro !!! – social

+0

Great Justin, Grazie fratello :) –

11

Un'altra possibile causa è se si elencano più colonne nell'attributo "aoColumnDefs" di quanto non ci siano elementi "td" nella tabella.

+0

Questo era perfetto! :) Grazie – Veeru

1

Nel mio caso specifico, ho avuto le proprietà aTargets impostate con indici di array al di fuori dei limiti per i miei elementi.

$('.datatable').dataTable({ 
    aoColumnDefs: [ 
    { 
     bSortable: false, 
     aTargets: [0, 6] 
    } 
    ], 
    aaSorting: [] 
}); 

Questo set che ci sono stati 7 colonne td, ma c'erano solo 6. La modifica al seguente corresse:

$('.datatable').dataTable({ 
    aoColumnDefs: [ 
    { 
     bSortable: false, 
     aTargets: [0, 5] 
    } 
    ], 
    aaSorting: [] 
}); 
0

Sta gettando questo errore perché quando dom primi carichi in uso prima dichiarare.

per questo errore ho avuto una soluzione scritto sotto:

è possibile aggiungere se la condizione particolare elemento non è definito come di seguito

if(document.getElementsByTagName('button') !== undefined){ 
    // and write your needed code here 
} 
0

incontrato problema simile. Il caso di root era che mentre dataTable stava per assumere il controllo del tavolo, il nostro codice ha anche provato a manipolare le proprietà della tabella nello stesso tempo. Il messaggio di errore non lo dice, tuttavia, una volta che il tavolo è stato lasciato per essere gestito esclusivamente da dataTable, il problema era sparito.

Problemi correlati