[]
Flexslider (ajax ile çalışmaması sorunu)
olabildiğince açıklayıcı olmaya çalışacağım ve kodumu da paylaşacağım en sonda. sıkıntım şu: pushstate ile url'le değişikliğinde sayfanın yeniden yüklenmemesini ve bulundğum sayfanın ajax ile basılmasını sağladım.
bu ne demek? url değişiyor, ama sayfa yenilenmiyor ve "main-div"im'in içine ajax ile yeni veriler yükleniyor, değişen linke göre.
şimdi, main-div'imin içinde bir adet slider var. ve bu slider, ajax ile main-div'in içine yüklendiği için çalışmıyor. (normalde bu sıkıntıyı .live() fonksiyonu ile çözüyoruz, ancak flexslider kullandığım için, bu sorunu çözemedim)
umarım açıklayıcı olmuşumdur. ajax ile basılan verilerde js'nin çalışmaması gibi bir sorun yaşıyorum kısaca.
bu soruna çözüm üretebilecek biri var mı?
kodlarımı paylaşıyorum:
1. pushstate kodlarım.
$(function() {
$('a').click(function(e) {
$("#loading").show();
href = $(this).attr("href");
loadContent(href);
startGame();
// HISTORY.PUSHSTATE
history.pushState('', 'New URL: '+href, href);
e.preventDefault();
});
// THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
window.onpopstate = function(event) {
$("#loading").show();
console.log("pathname: "+location.pathname);
var cont = window.location.href;
var strs = cont.split("?");
loadContent(strs[1]);
startGame();
};
});
function loadContent(url){
// USES JQUERY TO LOAD THE CONTENT
$.ajax({
type: "GET",
data: url,
url: "tema/project/content.php",
success: function(e){
$(".main-div").empty();
$(".main-div").append(e);
}
});
}
2. flexslider kodlarım:
$(function(){
SyntaxHighlighter.all();
});
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
direction: "vertical",
animationSpeed: 300,
start: function(slider){
$('body').removeClass('loading');
}
});
});
bu ne demek? url değişiyor, ama sayfa yenilenmiyor ve "main-div"im'in içine ajax ile yeni veriler yükleniyor, değişen linke göre.
şimdi, main-div'imin içinde bir adet slider var. ve bu slider, ajax ile main-div'in içine yüklendiği için çalışmıyor. (normalde bu sıkıntıyı .live() fonksiyonu ile çözüyoruz, ancak flexslider kullandığım için, bu sorunu çözemedim)
umarım açıklayıcı olmuşumdur. ajax ile basılan verilerde js'nin çalışmaması gibi bir sorun yaşıyorum kısaca.
bu soruna çözüm üretebilecek biri var mı?
kodlarımı paylaşıyorum:
1. pushstate kodlarım.
$(function() {
$('a').click(function(e) {
$("#loading").show();
href = $(this).attr("href");
loadContent(href);
startGame();
// HISTORY.PUSHSTATE
history.pushState('', 'New URL: '+href, href);
e.preventDefault();
});
// THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
window.onpopstate = function(event) {
$("#loading").show();
console.log("pathname: "+location.pathname);
var cont = window.location.href;
var strs = cont.split("?");
loadContent(strs[1]);
startGame();
};
});
function loadContent(url){
// USES JQUERY TO LOAD THE CONTENT
$.ajax({
type: "GET",
data: url,
url: "tema/project/content.php",
success: function(e){
$(".main-div").empty();
$(".main-div").append(e);
}
});
}
2. flexslider kodlarım:
$(function(){
SyntaxHighlighter.all();
});
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
direction: "vertical",
animationSpeed: 300,
start: function(slider){
$('body').removeClass('loading');
}
});
});
sorunun çözümü: flexslider kodlarınızı bir fonksiyona atıyorsunuz. örneğin:
function startGame() {
$('.flexslider').flexslider({
animation: "slide",
direction: "vertical",
animationSpeed: 300,
start: function(slider){
$('body').removeClass('loading');
}
});
}
ardından bu fonksiyonu settimeout ile döngüye sokuyorsunuz ve bu döngüyü de, ajax kodlarınızın hemen sonuna yerleştiriyorsunuz örnek:
setTimeout(function () {
startGame();
}, 500);
function startGame() {
$('.flexslider').flexslider({
animation: "slide",
direction: "vertical",
animationSpeed: 300,
start: function(slider){
$('body').removeClass('loading');
}
});
}
ardından bu fonksiyonu settimeout ile döngüye sokuyorsunuz ve bu döngüyü de, ajax kodlarınızın hemen sonuna yerleştiriyorsunuz örnek:
setTimeout(function () {
startGame();
}, 500);
- kamera motor (24.05.13 18:07:35)
1