20
Я пытаюсь инициировать ползунок орбит несколько раз, следуя примеру this. но я не могу заставить его работать.Проблемы с начальным ползунком орбит несколько раз
Это мой all.js файл
$(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--;
})
//autocomplete for challenge question
$("#challenge_question").autocomplete({
source: "http://coop.app/admin/challenges/autocomplete",
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 }]
});
});
И когда я это так, я получаю в консоли
Uncaught TypeError: Object.defineProperty called on non-object jquery.js:3718
Когда я двигаю код для ползунка в нижней части файла, я не получаю никаких ошибок в консоли, но и слайдер тоже не работает.
Это мое мнение:
<div class="orbit slider" role="region" data-orbit>
<ul class="orbit-container">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>◀︎</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span>▶︎</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>
Кроме того, так как я использовал в первый раз эликсира в Laravel, я не уверен, если я сделал правильно там вещи, так что может быть также проблема файлы конфликтуют. Это мой 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")
});
я имел эту проблему, когда я был реализации JQuery автозаполнения, которая не будет работать, пока я не переехал zurb.js выше скрипт JQuery-ui.min.js. Теперь я называю мои сценарии, как это:
<script src="https://cdnjs.cloudflare.com/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.com/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.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="{{ asset('js/all.js') }}"></script>
Любые ошибки в консоли? – Yass
Я проверил его сейчас, и я получаю: foundation.js: 5474 Uncaught TypeError: Не могу прочитать данные свойства 'undefined – Marco
Какая версия Foundation вы? –