jQuery Flipster "Uncaught TypeError: undefined is not a function"

Navigation
0

I'm using the jQuery Flipster plugin and it's giving the error "Uncaught TypeError: undefined is not a function"

Follow 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>
    
asked by anonymous 05.11.2014 / 00:04

2 answers

0

Hello, the problem happens when the constructor looks for the next "li" and they have already been scanned, so the each function 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 can also use 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.

    
05.11.2014 / 02:57
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 do not even need to use this within the "onItemSwitch", it can stay in some script. If not, I'm sorry. Thanks!

    
05.11.2014 / 12:15
How to display images by url in a ListView SELECT with JOIN return an Object with Internal List