jQuery Flipster "Uncaught Typeerror: Undefined is not a Function"

Asked

Viewed 542 times

0

I am using jQuery Flipster plugin and is giving error "Uncaught Typeerror: Undefined is not a Function"

Follows the HTML:

<input name="carvar" id="carvar" type="text">
<div id="Main-Content">
<div class="Container">
<!-- Flipster List -->  
    <div class="flipster">
      <ul class="flip-items">
        <li id="Coverflow-1" title="Cricket" data-flip-category="Fun Sports">
            <img src="Escudos/atletico1.png" data-title="Atletico">
            <p class="mostra-titulo"></p>
        </li>
        <li id="Coverflow-1" title="Cricket" data-flip-category="Fun Sports">
            <img src="Escudos/botafogo1.png" data-title="Botafogo">
            <p class="mostra-titulo"></p>
        </li>
        <li id="Coverflow-2" title="Surfing" data-flip-category="Fun Sports">
            <img src="Escudos/corinthians1.png" data-title="Corinthians">
            <p class="mostra-titulo"></p>
        </li>
        <li id="Coverflow-3" title="Baseball" data-flip-category="Boring Sports">
            <img src="Escudos/cruzeiro1.png" data-title="Cruzeiro">
            <p class="mostra-titulo"></p>
        </li>
        <li id="Coverflow-4" title="Running" data-flip-category="Boring Sports">
            <img src="Escudos/flamengo1.png" data-title="Flamengo">
             <p class="mostra-titulo"></p>
        </li>
        <li id="Coverflow-7" title="Air Kicking" data-flip-category="These are Sports?">
            <img src="Escudos/fluminense1.png" data-title="Fluminense">
            <p class="mostra-titulo"></p>
        </li>
        <li id="Coverflow-6" title="Extreme Bike Sitting" data-flip-category="These are Sports?">
            <img src="Escudos/vasco1.png" data-title="Vasco">
            <p class="mostra-titulo"></p>
        </li>
      </ul>
    </div>
<!-- End Flipster List -->

</div>
</div>

And here’s the code:

<script>
$(function($){
$(".flipster").flipster({style: 'carousel', enableTouch: true, start: 0, enableNavButtons: true,
onItemSwitch: $('li').each(function(){
var $this = $(this);     
var titulo = $this.find('img').data('title');  
document.getElementById("carvar").value = titulo; 

$this.find('.mostra-titulo').html(titulo); 

})
}); 
});
</script>
jquery

2 answers

0


Hello, the problem happens when the constructor picks up the next "li" and they have already been swept, so the function each will not be defined. The problem can be solved like this.

$(".flipster").flipster({
   style: 'carousel', 
   enableTouch: true, 
   start: 0, 
   enableNavButtons: true,
   onItemSwitch: function(){

      if($('li').length >= 1){
         $('li').each(function(){
              var $this = $(this);     
              var titulo = $this.find('img').data('title');  
              document.getElementById("carvar").value = titulo; 
              $this.find('.mostra-titulo').html(titulo); 
         });
      }
  }
});

You may also use it this way, https://github.com/drien/jquery-flipster/blob/master/demo/demo.html where they use the options:

itemContainer: 'ul',
itemSelector: 'li',

This way the problem can also be solved.

  • Thank you, Vinicius. The error is gone. But at each call of the "onItemSwitch", the code goes through all the "img" by placing in the textbox the value of the variable "title". Only I wanted the "title" variable to keep information only for the selected image. Thank you!

  • It would be something like recovering the "Selectedindex" or "Currentindex" image.

  • Thank you Vinicius Montanheiro! It worked perfectly. Abs!

0

For nothing. But to do this you do not need to search all "li". If I understand, I think you want to do this.

$(".flipster").flipster({
   style: 'carousel', 
   enableTouch: true, 
   start: 0, 
   enableNavButtons: true,
   onItemSwitch: function(){
     $('.flip-items li').on('click',function(){
         var titulo = $('img',this).attr('data-title');
         $('#carvar').val(titulo); 
         $('p',this).html(titulo); 
     });
  }
});

And maybe you don’t even need to use it inside the "onItemSwitch", it can get in some script. If it’s not that I’m sorry. Thanks!!!

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.