web-dev-qa-db-fra.com

Erreur dans slick.js: "TypeError non capturé: impossible de lire la propriété 'ajouter' de null"

J'ai utilisé slick js pour la vue coulissante de l'image.

Voici mon code.

<div class="slider_wrap add-remove">
    <%= f.fields_for :images do |image_form| %>
      <%#= render 'images_fields', :f => image_form %>
        <div>
          <%= image_tag image_form.object.picture.url,:class=>"drop_down_link even img_prev" %>
        </div>
        <div class="image_upload_div">
          <div class="image-upload">
            <label>
              <i class="fa fa-cloud-upload">
                <%= image_form.file_field :picture ,:'data-role'=>"none",:onchange=>"readURL(this);" , :accept => 'image/jpeg , image/png' %>
              </i>
            </label>
          </div>
        </div>
    <% end %>
    <%= f.link_to_add "Add a picture", :images ,:id=>"add_pic" ,:class=>"js-add-slide", :style=>"display: none;"%>
</div>

<script>
function silder(){
    slideIndex = 0;
      $('.add-remove').slick({
        slidesToShow: 2,
        slidesToScroll: 2
      });
      $('.js-add-slide').on('click', function() {
        $('.add-remove').slick('slickAdd');
      });

      $('.js-remove-slide').on('click', function() {
        $('.add-remove').slick('slickRemove');
      });
});
function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
    $('.img_prev').last()
      .attr('src', e.target.result)
    };

    reader.readAsDataURL(input.files[0]);

    setTimeout(function(){
      $('#add_pic').trigger('click');
      silder();
    }, 100);
  }
}
</script>

Maintenant, avec ce code, j'ai fait fonctionner le curseur, mais cela ne vient pas correctement, je reçois une erreur:

TypeError non capturé: impossible de lire la propriété "ajouter" de null

jqueryruby-on-railsslidernested-formsslick.js
18
P_M

Cela est dû à appel à init deux fois . Cela fonctionne sans erreur:

$(".slider").not('.slick-initialized').slick()

De plus, "silder" ressemble à une faute de frappe.

S'appuyer sur un délai d'attente est également sujet aux erreurs. Malheureusement, Internet Explorer utilise un événement différent pour vous dire quand les éléments HTML et les bibliothèques JS ont été chargés. Il existe de nombreuses bibliothèques pour éviter les quelque 100 lignes de code inter-navigateurs, mais le populaire et jQuery relativement petit résout le problème de synchronisation comme ceci:

$(function() {
  // Handler for .ready() called. Put the Slick Slider etc. init code here.
})
67
Cees Timmerman