Les fonctions javascript ne fonctionnent pas lorsqu'elles sont placées dans des fichiers différents

Question

Je suis novice dans ce domaine, et je suis en train de créer une application web qui dépend fortement des pages html chargées dynamiquement dans un div sur la page principale.

La page principale contient des liens vers divers fichiers js, y compris jquery et certains de mes fichiers. En outre, chacun des fichiers html chargés est lié à son propre fichier js pour contrôler l'interaction de l'utilisateur. Et certains d'entre eux ont aussi un div dans lequel les pages html sont chargées. Une chose que je remarque est que certaines pages html réagissent plus lentement aux scripts chargés dans la page principale. Des choses globales comme surligner des boutons quand on clique dessus doivent être modifiées pour qu'elles soient même perceptibles sur certaines pages.

Une autre chose qui arrive, ce qui m'ennuie vraiment, c'est que certains scripts ne fonctionneront pas lorsqu'ils sont dans des fichiers séparés, qu'ils soient liés à la page principale ou aux différentes pages enfants. J'ai besoin de mettre les fonctions réelles dans le fichier js de la page enfant réelle.

Cette fonction simple pour alimenter une table HTML à partir d'une base de données est l'un de ces ...

function fill_grid(collection, columns){ 

    var jsonObj = JSON.stringify(columns); 

    param = "collection=" + collection + "&columns=" + jsonObj; 

     // Ajax call ~~~~~> 

    $.ajax({ 
     type:   'POST', 
     url:   'back/fill_grid.php', 
     processData: false, 
     data:   param, 
     dataType:  'json', 
     success:  function(data){ 

          $('.grid_foot').text(data.rows.length + ' records'); 

          $.each(data.rows, function(count, item) { 

           var c = 0; 
           var cells = ''; 

           while (c < columns.length) { 

            cells += '<td class="'+ columns[c] +'">' + item['cell'][c] + '</td>'; 

            c++; 
           } 

           var newTr = '<tr id="' + item['id'] + '">'+ cells +'</tr>'; 
           $('.grid_wrapper table').append(newTr); 
          }); 

          var c = 0; 

          while (c < columns.length) { 

           var min_width = $('div.' + columns[c]).css('min-width'); 
           $('td.' + columns[c]).width(min_width); 

           var col_width = $('td.' + columns[c]).width(); 
           $('div.' + columns[c]).width(col_width); 

           c++; 
          } 

          var c = columns.length - 1; 

          var col_width = $('div.' + columns[c]).width(); 
          $('td.' + columns[c]).width(col_width); 
         }  
    }); 
} 

... même si, comme vous pouvez voir son conçu pour une application modulaire. Les paramètres de l'appel ajax et de la construction de la table lui sont passés. Mais il ne fonctionnera pas quand il est dans un fichier séparé, bien que firebug et dom inspector ne montrent aucune erreur, et bien sûr, il fonctionnera quand il est collé dans la console des deux.

Pourquoi cela se produit-il? Est-ce à cause des pages html imbriquées? Y a-t-il une limite au nombre de scripts que vous pouvez charger dans une page? Est-ce que d'autres scripts pourraient l'interférer? Comment puis-je le déboguer?

EDIT: Firebug et Dom Inspector me disent maintenant que 'data_grid()' n'est pas défini et qu'il ne peut pas trouver l'événement datagrid.js bien que j'aie utilisé le bon chemin dans le tag de script, et l'ai inclus avant même les pages principales possèdent le fichier js! J'ai même vidé la mémoire cache de mon navigateur et l'ai redémarrée, mais ça dit toujours ça.

EDIT: Après un peu d'espionnage, j'ai trouvé un lien bum sur l'une des pages enfants, et après la réparation, je n'ai plus d'erreur 404 fichier introuvable. Mais je reçois toujours une erreur non définie.

Answer 1

Je viens de supprimer le jquery "$ (document) .ready (function() {});" à partir du fichier et cela a fonctionné parfaitement! Maintenant, je me demande si cela va provoquer que ça marche parfois.