Uncaught TypeError: $(…).flexslider is not a function using gulp and bower

Question

I am currently having an issue configuring flexslider on my site. I am using elixir laravel and bower.

I have all my scss, less and js files compiled but when I add anything code relating to the slider on my homepage I get this error:

Uncaught TypeError: $(...).flexslider is not a function using

nothing seems to be showing up on my page at all

I added the javascript in the layout.blade file just to test

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Creative Forces Enrichment</title>
    <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700' rel='stylesheet' type='text/css'>
   <link rel="stylesheet" href="{{ elixir('css/app.css') }}">
   <link rel="stylesheet" href="{{ elixir('css/style.css') }}">
</head>
    <body id="app-layout">
        <div class="line"></div>
        <header id="header" role="banner">
 <div class="container">

                   <!--    <button class="hamburger hamburger--collapse" type="button">
                        <span class="hamburger-box">
                            <span class="hamburger-inner"></span>
                        </span>
                    </button> -->
<div class="container text-xs-center">
  <nav class="nav nav-inline">
    <a class="nav-link" href='{{ url("/") }}'>Home</a>
    <a class="nav-link" href='{{ url("/team") }}'>Our Team</a>
    <a class="nav-link" href='{{ url("/media") }}'>Media</a>
    <a href='{{ url("/") }}' class="nav-link"><img src="./images/zipzap.png" alt=""></a>
    <a class="nav-link" href='{{ url("/about") }}'>About Us</a>
    <a class="nav-link" href='{{ url("/contact") }}'>Contact Us</a>
    <a class="nav-link" href='{{ url("/donate") }}' id="donate">Support Us</a>
  </nav>   
</div>
    </div>
   </header>


        @yield('content')
        <div class="container">
        <div class="row">
        <div class="text-xs-center spacing">

             <hr>

    <div class="text-center copy">&copy; Zip Zap Zop Enrichment <?php echo date("Y") ?></div>

 </div>

         </div>
     </div>

        <!-- JavaScripts -->
         <script src="{{ elixir('js/app.js') }}" type="text/javascript"></script>


     <script type="text/javascript">
        var metaslider_158 = function($) {
            $('#metaslider_158').addClass('flexslider'); // theme/plugin conflict avoidance
            $('#metaslider_158').flexslider({ 
                slideshowSpeed:3000,
                animation:"fade",
                controlNav:false,
                directionNav:false,
                pauseOnHover:true,
                direction:"horizontal",
                reverse:false,
                animationSpeed:600,
                prevText:"&lt;",
                nextText:"&gt;",
                slideshow:false
            });
        };
        var timer_metaslider_158 = function() {
            var slider = !window.jQuery ? window.setTimeout(timer_metaslider_158, 100) : !jQuery.isReady ? window.setTimeout(timer_metaslider_158, 1) : metaslider_158(window.jQuery);
        };
        timer_metaslider_158();
    </script>




    </body>
</html>

here is the page I want my slider to show up on:

@extends('layout')

@section('content')

<!-- Place somewhere in the <body> of your page -->
<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
  <ul class="slides">
    <li>
      <iframe id="player_1" src="http://player.vimeo.com/video/39683393?api=1&player_id=player_1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    </li>
    <li>
      <img src="./images/maja.jpg" />
    </li>
    <li>
      <img src="./images/maja.jpg" />
    </li>
    <li>
      <img src="./images/maja.jpg" />
    </li>
  </ul>
</div>
<div class="container">
    <div class="content-wrapper">
        <div class="color-wrapper">
            <div class="main-container">
                <div class="gdlr-item gdlr-post-slider-item style-post-right post-slider"></div>
            </div>
        </div>
    </div>
</div>


@endsection

and here is my gulp.js file

var elixir = require('laravel-elixir');

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for our application, as well as publishing vendor resources.
 |
 */

elixir(function(mix) {
    // Copy Styles
    mix.copy('bower_components/bootstrap/scss/', 'resources/assets/sass/libraries/bootstrap/')
       .copy('bower_components/css-hamburgers/_sass/hamburgers', 'resources/assets/sass/libraries/hamburgers/')
       .copy('bower_components/flexslider/css', 'resources/assets/less/libraries/flexslider/')

    // Copy Scripts
    .copy('bower_components/jquery/dist/jquery.js', 'resources/assets/js/libraries/jquery.js')
    .copy('bower_components/bootstrap/dist/js/bootstrap.js', 'resources/assets/js/libraries/bootstrap.js')
    .copy('bower_components/flexslider/jquery.flexslider.js', 'resources/assets/js/libraries/flexslider.js')


    // Compile App Assets
    .sass('app.scss','public/css/app.css')
    .less('app.less','public/css/style.css')

    .scripts([
    'libraries/jquery.js',
    'libraries/bootstrap.js',
    'libraries/flexslider.js',
    'app/**/*.js'
    ], 'public/js/app.js', 'resources/assets/js')

    // Create version
    .version(['css/app.css', 'css/style.css', 'js/app.js']);
});

any help would be appreciated!

Answer 1

For compatibility reasons, you should wrap your jQuery code like this:

(function($){

  // jQuery code is in here

})(jQuery);

Answer 2

You need to make sure the document is loaded completely before executing or your JavaScript in app.js may actually take longer than anticipated to include your library, which will result in this error.

Instead, we can both alias $ to jQuery and we can bind to the .ready() handler like this:

jQuery(function($){
    //your code
});

This alleviates the need to alias jQuery to $ in a closure and then execute a ready function within.

Uncaught TypeError: $(…).flexslider is not a function using gulp and bower

Question

2 answers

solution1
0 2016-07-13 20:39:53

solution2
0 2016-07-13 20:50:06

Uncaught TypeError: $(…).flexslider is not a function using gulp and bower

Question

2 answers

solution1 0 2016-07-13 20:39:53

solution2 0 2016-07-13 20:50:06

solution1
0 2016-07-13 20:39:53

solution2
0 2016-07-13 20:50:06