i have 2 buttons with same function, that's to Get data from API then convert to html then append it using jQuery to <div>
. Last, show it using slick jQuery plugin to show HTML element as slider.
However, after click 1st button, if i click 2nd button (or vice versa), the slick
(slider) does NOT work anymore.
The Javascript Code :
$(document).ready(function(){
/*
Description : Handle Day Button Event
*/
$('.dayList').on("click", function(event)
{
var dayChild = $(this).attr('id');
//::refresh day lline
$('.hour-to-hour-line').empty();
getHourList(dayChild,function()
{
/*
The Slick
*/
$('.hour-to-hour-line').slick({
dots: false,
infinite: false,
speed: 1000,
slidesToShow: 6,
slidesToScroll: 1,
focusOnSelect: true,
arrows: false,
slickSetOption: true
});
});
});
});
The HTML Code :
<div id="monday" class="dayList" data-daycount = "1" tabindex="1"> Monday </div>
<div id="tuesday" class="dayList" data-daycount = "2" tabindex="2"> Tuesday </div>
<br/>
<div id="hour2" class="hour-to-hour-line"></div>
The Javascript Code, getHourList()
function :
function getHourList(day,callback)
{
//::convert day to dayCount
var dayCount = 0;
switch(day) {
case "monday":
dayCount = 1;
break;
case "tuesday":
dayCount = 2;
break;
}
//::fetch data from API
jQuery.ajax({
type: 'GET',
url: 'http://localhost/api/1.0/schedule/items?day='+dayCount,
dataType: 'json',
beforeSend: function (xhr) {
xhr.setRequestHeader ("Authorization", "Basic WS8fkn5344WN8==");
},
success: function (data)
{
//::refresh <div class='hour-to-hour-list'> template
$('.hour-to-hour-line').empty();
//data definition
var iCounter_1 = 1;
var iCounter_2 = 1;
var iCounter_2_next = 1;
var timer = [];
//::exctract time from array=>data
jQuery.each( data.item, function( key, val )
{
timer[iCounter_1] = val.time;
iCounter_1++;
});
//::exract time from array=>timer
jQuery.each( data.item, function( key, val )
{
var time = val.time;
var parent_id = "hour_"+iCounter_2;
var hour_id = "this_hour_"+iCounter_2;
var next = iCounter_2 + 1;
$html =
"<div id="+parent_id+" class='fl hour-focus'>"+
"<div id="+hour_id+" class='fl kurohige-prev jaman' data-time="+time+">"+time+"-"+timer[next]+"</div>"+
"<div class='fl line-0'></div>"+
"</div>";
$('.hour-to-hour-line').append($($html));
iCounter_2++;
});
if (callback)
{
callback();
}
}
});
}
Anybody have solution for this ?
After calling an request, set timeout to initialize slick slider. Do not initialize slick slider at start. Just initialize after an AJAX with timeout. That should work for you.
Slick is a fresh new jQuery plugin for creating fully customizable, responsive and mobile friendly carousels/sliders that work with any html elements.
Here's the working code
tested for slick version 1.8.1
$('#slick-slider').slick('refresh');
The code below works for me
$('.my-slider')[0].slick.refresh()
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With