2012-07-17 24 views
18

Estoy desarrollando una aplicación Rails con un módulo para la carga de imágenes dinámicas - ajax - en la galería. Lo hago basándome en this app - multi-file-upload-demo. No estoy muy interesado en Javascript y esas cosas, así que copio mucha lógica de esa implementación.Carga de archivos Rails y ajax: no se puede leer la propiedad 'innerHTML' del error nulo

me hice a la aplicación después de toda la lógica de la ronda de demostración, he incluido todas las gemas y bibliotecas javascript, y me sale un error:

Uncaught TypeError: Cannot read property 'innerHTML' of null 

en la consola de cromo, que se refiere a tmpl.js archivo

tmpl.load = function (id) { 
    return document.getElementById(id).innerHTML; 
}; 

Mi conocimiento de JS no me deja claro qué parte del código desencadena esa función, así que puedo ir más allá.

¿Me puede recomendar cuáles son los próximos pasos para investigar el origen de este problema? Espero que las posibles razones sean varias, por lo que no quiero pegar todo el código de la aplicación.

Respuesta

2

mensaje de error El nos dice que document.getElementById(id) está volviendo null, por lo que no hay ningún elemento actualmente en el documento con la id. especificada

Para depurar, trate de añadir una llamada a console.log(id); antes de la declaración return. Una vez que lo haga, puede encontrar el valor de id que está causando el problema. Esperemos que el error sea el resultado de un simple error tipográfico, recuerde que el valor de id distingue entre mayúsculas y minúsculas. Si un error tipográfico no es el problema, al menos puede establecer un punto de interrupción condicional ya que ahora conoce el valor de id que desea romper. Después de llegar al punto de interrupción, solo es cuestión de pasar a las funciones de llamada para "ver qué elemento de código desencadena esa función". Espero que esto ayude.

+0

esto funcionó para mí, ya que recogí un error al mirar detenidamente la identificación de mi script script – thorne51

33

Esto es antiguo, pero encontré una solución real para esto. Cambie su requerimiento en application.js a //=require jquery-fileupload/basic en lugar de //= require jquery-fileupload.

+0

gracias;), me ayudó – jizak

+0

Muchas gracias @BlakeWilliams! Esto debe marcarse como la respuesta correcta, por cierto ... –

+0

Parece que ahora funciona, ahora tengo que comprobar que toda la funcionalidad sobre la carga de archivos está funcionando ... y me gustaría saber la diferencia entre requerir jquery-fileupload/basic y jquery-fileupload ... para evitar sorpresas –

18

La razón por la que recibe este error es porque le falta una etiqueta de script id = "template-upload" o id = "template-download" o ambas.

Ejemplo de la demo en: http://blueimp.github.com/jQuery-File-Upload/ versión

<script id="template-upload" type="text/x-tmpl"> 
{% for (var i=0, file; file=o.files[i]; i++) { %} 
    <tr class="template-upload fade"> 
     <td class="preview"><span class="fade"></span></td> 
     <td class="name"><span>{%=file.name%}</span></td> 
     <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td> 
     {% if (file.error) { %} 
      <td class="error" colspan="2"><span class="label label-important">Error</span> {%=file.error%}</td> 
     {% } else if (o.files.valid && !i) { %} 
      <td> 
       <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="bar" style="width:0%;"></div></div> 
      </td> 
      <td class="start">{% if (!o.options.autoUpload) { %} 
       <button class="btn btn-primary"> 
        <i class="icon-upload icon-white"></i> 
        <span>Start</span> 
       </button> 
      {% } %}</td> 
     {% } else { %} 
      <td colspan="2"></td> 
     {% } %} 
     <td class="cancel">{% if (!i) { %} 
      <button class="btn btn-warning"> 
       <i class="icon-ban-circle icon-white"></i> 
       <span>Cancel</span> 
      </button> 
     {% } %}</td> 
    </tr> 
{% } %} 
</script> 
<!-- The template to display files available for download --> 
<script id="template-download" type="text/x-tmpl"> 
{% for (var i=0, file; file=o.files[i]; i++) { %} 
    <tr class="template-download fade"> 
     {% if (file.error) { %} 
      <td></td> 
      <td class="name"><span>{%=file.name%}</span></td> 
      <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td> 
      <td class="error" colspan="2"><span class="label label-important">Error</span> {%=file.error%}</td> 
     {% } else { %} 
      <td class="preview">{% if (file.thumbnail_url) { %} 
       <a href="{%=file.url%}" title="{%=file.name%}" data-gallery="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a> 
      {% } %}</td> 
      <td class="name"> 
       <a href="{%=file.url%}" title="{%=file.name%}" data-gallery="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a> 
      </td> 
      <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td> 
      <td colspan="2"></td> 
     {% } %} 
     <td class="delete"> 
      <button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}"{% if (file.delete_with_credentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}> 
       <i class="icon-trash icon-white"></i> 
       <span>Delete</span> 
      </button> 
      <input type="checkbox" name="delete" value="1"> 
     </td> 
    </tr> 
{% } %} 
</script> 

La interfaz de usuario depende de estar presente estas dos plantillas.

Estaba teniendo el mismo problema y decidí retirar lo que faltaba.

Espero que ayude.

10

Me encontré con este mismo problema también. Sin embargo, cargar la versión básica del complemento de carga de archivos no era una opción para mí, ya que uso la vista previa para una carga, pero no para la otra. Puede deshabilitar la funcionalidad de "vista previa" y el intento de procesamiento de template-upload y template-download caso por caso estableciendo las opciones uploadTemplateId y downloadTemplateId para el complemento de carga de archivos en null.

+0

¿Por qué está esto downvoted? –

+3

Gracias, esta es, por cierto, la mejor solución "sólida". –

+1

Funcionó para mí, aplausos – JMK

1

estoy usando este plugin para unos pocos meses, hoy me di cuenta de que carga de archivos no funcionaba, y me sale un error

"cannot read property 'innerHTML' of null error". 

miré en él, y su porque una simple razón. la ruta del archivo

http://blueimp.github.io/JavaScript-Load-Image/js/load-image.min.js 

cambió a

http://blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js 

en el TGI de blueimp. como se puede ver aquí

https://github.com/blueimp/jQuery-File-Upload 

el camino cambiado en este archivo.

https://github.com/blueimp/jQuery-File-Upload/blob/master/index.html 

me cambió por el camino correcto y sus obras. espero que esta respuesta ayude a alguien aquí que tiene el mismo problema.

Cuestiones relacionadas