javascript - Problems with initiating orbit slider multiple times - Stack Overflow

admin管理员组

文章数量:1291113

I am trying to initiate orbit slider multiple times, by following this example. but I can't get it to work.

This is my all.js file

$(document).ready(function() {

//add input field for external media
var max_fields      = 10; //maximum input boxes allowed
var wrapper         = $(".input_fields_wrap"); //Fields wrapper
var add_button      = $(".add_field_button"); //Add button ID

var x = 1; //initial text box count
$(add_button).click(function(e){ //on add input button click
    e.preventDefault();
    if(x < max_fields){ //max input box allowed
        x++; //text box increment
        $(wrapper).append('<div><input type="text" name="external_media[]"/><a href="#" class="remove_field"><button type="button" class="secondary button">Remove</button></a></div>'); //add input box
    }
});

$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
    e.preventDefault(); $(this).parent('div').remove(); x--;
})

//autoplete for challenge question
$("#challenge_question").autoplete({
    source: "/admin/challenges/autoplete",
    minLength: 2,
    select: function( event, ui ) {
        $('#challenge_question').val(ui.item.id);
    }
});

//slider
//var orbit = new Foundation.Orbit($('#slider'));
var sliderOptions = {};
var sliderInstances = [];

$(".slider").each(function(element) {
  sliderInstances.push(new Foundation.Orbit($(element), sliderOptions));
});

//chart views by category
$('#byCategory').highcharts({
   chart: {
       type: 'bar'
   },
   title: {
       text: 'Most read article type'
   },
   xAxis: {
       categories: icoop.categories
   },
   yAxis: {
       min: 0,
       title: {
           text: null
       },
       allowDecimals: false
   },
   legend: {
       reversed: true
   },
   plotOptions: {
       series: {
           stacking: null
       },
   },
   series: [{ name: 'Views', data: icoop.categoryViews }]
 });

 //chart views by chains
 $('#byChain').highcharts({
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Most read chain'
    },
    xAxis: {
        categories: icoop.chains
    },
    yAxis: {
        min: 0,
        title: {
            text: null
        },
        allowDecimals: false
    },
    legend: {
        reversed: true
    },
    plotOptions: {
        series: {
            stacking: null
        },
    },
    series: [{ name: 'Views', data: icoop.chainViews }]
  });

  //by time of the day
  $('#byTime').highcharts({
    chart: {
        type: 'column'
    },
    title: {
        text: 'Time of the day with most reads'
    },
    xAxis: {
        categories: ['0-2', '2-4', '4-6', '6-8', '8-10', '10-12', '12-14', '14-16', '16-18', '18-20', '20-22', '22-24']
    },
    yAxis: {
        min: 0,
        title: {
            text: null
        },
        allowDecimals: false
    },
    plotOptions: {
        column: {
            stacking: null
        }
    },
    series: [{ name: 'Views', data: icoop.viewsByTimeOFTheDay }]
  });
});

And when I have it like that, I get in the console

Uncaught TypeError: Object.defineProperty called on non-object     jquery.js:3718

When I move the code for the slider to the bottom of the file, I don't get any errors in the console, but also slider doesn't work either.

This is my view:

<div class="orbit slider" role="region" data-orbit>
    <ul class="orbit-container">
      <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
      <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
      @foreach($article->medias as $media)
        <li class="orbit-slide">
          {!! Html::image($media->path) !!}
        </li>
      @endforeach
      @foreach($article->externalMedias as $externalMedia)
          <li class="orbit-slide">
            <div class="flex-video">
              <iframe src="{{ $externalMedia->url }}"></iframe>
            </div>
          </li>
      @endforeach
    </ul>
  </div>

Also, since I was using for the first time elixir in Laravel, I am not sure if I have done correctly things there, so there might be also a problem of files conflicting. This is my gulpfile.js:

elixir(function(mix) {
mix.sass('app.scss', './public/css/app.css')

.styles([
  'foundation.min.css',
  'app.css'
])

.styles([
  'jquery.filer.css',
  'jquery.filer-dragdropbox-theme.css',
], "public/css/jquery-filer/jquery.filer.css")

.scripts([
  'zurb/jquery.js',
  'zurb/what-input.js',
  'zurb/foundation.js',
], "public/js/zurb/zurb.js")

.scripts([
  'jquery-filer/jquery.filer.js',
  'jquery-filer/image-uploader.js',
], "public/js/jquery-filer/jquery-filer.js")

.scripts([
  'editor/editor.js',
], "public/js/editor/editor.js")

.scripts([
  'app.js',
], "public/js")
});

I had that problem when I was implementing jQuery autoplete, which wouldn't work until I have moved script zurb.js above jquery-ui.min.js. Now I am calling my scripts like this:

  <script src=".2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
  <script type="text/javascript" src="{{ asset('js/zurb/zurb.js') }}"></script>
  <script type="text/javascript" src="{{ asset('js/jquery-ui/jquery-ui.min.js') }}"></script>
  <script src="//cdn.tinymce/4/tinymce.min.js"></script>
  <script type="text/javascript" src="{{ asset('js/jquery-filer/jquery-filer.js') }}"></script>
  <script type="text/javascript" src="{{ asset('js/editor/editor.js') }}"></script>
  <script src=".js"></script>
  <script src=".js"></script>
  <script src="{{ asset('js/all.js') }}"></script>

I am trying to initiate orbit slider multiple times, by following this example. but I can't get it to work.

This is my all.js file

$(document).ready(function() {

//add input field for external media
var max_fields      = 10; //maximum input boxes allowed
var wrapper         = $(".input_fields_wrap"); //Fields wrapper
var add_button      = $(".add_field_button"); //Add button ID

var x = 1; //initial text box count
$(add_button).click(function(e){ //on add input button click
    e.preventDefault();
    if(x < max_fields){ //max input box allowed
        x++; //text box increment
        $(wrapper).append('<div><input type="text" name="external_media[]"/><a href="#" class="remove_field"><button type="button" class="secondary button">Remove</button></a></div>'); //add input box
    }
});

$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
    e.preventDefault(); $(this).parent('div').remove(); x--;
})

//autoplete for challenge question
$("#challenge_question").autoplete({
    source: "http://coop.app/admin/challenges/autoplete",
    minLength: 2,
    select: function( event, ui ) {
        $('#challenge_question').val(ui.item.id);
    }
});

//slider
//var orbit = new Foundation.Orbit($('#slider'));
var sliderOptions = {};
var sliderInstances = [];

$(".slider").each(function(element) {
  sliderInstances.push(new Foundation.Orbit($(element), sliderOptions));
});

//chart views by category
$('#byCategory').highcharts({
   chart: {
       type: 'bar'
   },
   title: {
       text: 'Most read article type'
   },
   xAxis: {
       categories: icoop.categories
   },
   yAxis: {
       min: 0,
       title: {
           text: null
       },
       allowDecimals: false
   },
   legend: {
       reversed: true
   },
   plotOptions: {
       series: {
           stacking: null
       },
   },
   series: [{ name: 'Views', data: icoop.categoryViews }]
 });

 //chart views by chains
 $('#byChain').highcharts({
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Most read chain'
    },
    xAxis: {
        categories: icoop.chains
    },
    yAxis: {
        min: 0,
        title: {
            text: null
        },
        allowDecimals: false
    },
    legend: {
        reversed: true
    },
    plotOptions: {
        series: {
            stacking: null
        },
    },
    series: [{ name: 'Views', data: icoop.chainViews }]
  });

  //by time of the day
  $('#byTime').highcharts({
    chart: {
        type: 'column'
    },
    title: {
        text: 'Time of the day with most reads'
    },
    xAxis: {
        categories: ['0-2', '2-4', '4-6', '6-8', '8-10', '10-12', '12-14', '14-16', '16-18', '18-20', '20-22', '22-24']
    },
    yAxis: {
        min: 0,
        title: {
            text: null
        },
        allowDecimals: false
    },
    plotOptions: {
        column: {
            stacking: null
        }
    },
    series: [{ name: 'Views', data: icoop.viewsByTimeOFTheDay }]
  });
});

And when I have it like that, I get in the console

Uncaught TypeError: Object.defineProperty called on non-object     jquery.js:3718

When I move the code for the slider to the bottom of the file, I don't get any errors in the console, but also slider doesn't work either.

This is my view:

<div class="orbit slider" role="region" data-orbit>
    <ul class="orbit-container">
      <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
      <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
      @foreach($article->medias as $media)
        <li class="orbit-slide">
          {!! Html::image($media->path) !!}
        </li>
      @endforeach
      @foreach($article->externalMedias as $externalMedia)
          <li class="orbit-slide">
            <div class="flex-video">
              <iframe src="{{ $externalMedia->url }}"></iframe>
            </div>
          </li>
      @endforeach
    </ul>
  </div>

Also, since I was using for the first time elixir in Laravel, I am not sure if I have done correctly things there, so there might be also a problem of files conflicting. This is my gulpfile.js:

elixir(function(mix) {
mix.sass('app.scss', './public/css/app.css')

.styles([
  'foundation.min.css',
  'app.css'
])

.styles([
  'jquery.filer.css',
  'jquery.filer-dragdropbox-theme.css',
], "public/css/jquery-filer/jquery.filer.css")

.scripts([
  'zurb/jquery.js',
  'zurb/what-input.js',
  'zurb/foundation.js',
], "public/js/zurb/zurb.js")

.scripts([
  'jquery-filer/jquery.filer.js',
  'jquery-filer/image-uploader.js',
], "public/js/jquery-filer/jquery-filer.js")

.scripts([
  'editor/editor.js',
], "public/js/editor/editor.js")

.scripts([
  'app.js',
], "public/js")
});

I had that problem when I was implementing jQuery autoplete, which wouldn't work until I have moved script zurb.js above jquery-ui.min.js. Now I am calling my scripts like this:

  <script src="https://cdnjs.cloudflare./ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
  <script type="text/javascript" src="{{ asset('js/zurb/zurb.js') }}"></script>
  <script type="text/javascript" src="{{ asset('js/jquery-ui/jquery-ui.min.js') }}"></script>
  <script src="//cdn.tinymce./4/tinymce.min.js"></script>
  <script type="text/javascript" src="{{ asset('js/jquery-filer/jquery-filer.js') }}"></script>
  <script type="text/javascript" src="{{ asset('js/editor/editor.js') }}"></script>
  <script src="https://code.highcharts./highcharts.js"></script>
  <script src="https://code.highcharts./modules/exporting.js"></script>
  <script src="{{ asset('js/all.js') }}"></script>

• javascript
• jquery
• slider
• zurb-foundation

Share Improve this question Follow edited May 23, 2017 at 12:34 CommunityBot 111 silver badge asked May 4, 2016 at 8:31 LudwigLudwig 1,8211414 gold badges7070 silver badges142142 bronze badges 15

• Any errors in the console? – Yass Commented May 4, 2016 at 20:08
• I checked it now and I get: foundation.js:5474 Uncaught TypeError: Cannot read property 'data' of undefined – Ludwig Commented May 5, 2016 at 7:22
• What version of Foundation are you on? – Colin Marshall Commented May 8, 2016 at 2:33
• The latest one, v6.2.1. – Ludwig Commented May 8, 2016 at 8:09
• @Marco by default it should be working fine jsfiddle/8c4ztmut – codefreaK Commented May 15, 2016 at 23:35

 |  Show 10 more ments

3 Answers 3

Sorted by: Reset to default 1

First of all be sure that there's no conflict because of the variety of your scripts. I think changing the code to:

$(".slider").each(function($element) {
  sliderInstances.push(new Foundation.Orbit($element, sliderOptions));
});

or

$(".slider").each(function() {
   sliderInstances.push(new Foundation.Orbit($(this), sliderOptions));
});

will help.

Im unable to test out your code but I noticed a small discrepency that might be causing you some issue.

$(".slider").each(function(element) {
  sliderInstances.push(new Foundation.Orbit($(element), sliderOptions));
});

The each statement is missing an argument. The first argument returns the index and the second one returns the element. The Element is returning the index count of the loop not the element that you are hoping for. It should be...

$(".slider").each(function(index, element) {
  sliderInstances.push(new Foundation.Orbit($(element), sliderOptions));
});

That might be one reason why you having issues initiating the oribit slider.

The "element" parameter that $.each returns doesn't need to be within $(), try like this and let's see what happens.

$(".slider").each(function(element) { 
    sliderInstances.push(new Foundation.Orbit(element, sliderOptions)); 
});

本文标签： javascriptProblems with initiating orbit slider multiple timesStack Overflow