2012-05-03 5 views
1

私はこのbxsliderコードを持っています。jquery bxslider integrate ajax

$(function(){ 
    $('#slider1').bxSlider({ 
    infiniteLoop: false, 
    hideControlOnEnd: true 
    }); 
}); 

と、このAjaxコードIHAVE:

$(function() { 
$.get('/Scripts/PagedList/PagedList.Mvc.Template.html', function (pagerTemplate) { // get template for pager 
// create our pager control object 
var pagedList = $.pagedList(
$.template(null, pagerTemplate), // convert into compiled template 
function(pageNumber){ 
return '/home/ajax/#' + pageNumber; // give the pager control the url for loading this page 
}, 
{ pagesToDisplay: 10 } // optional page render options 
); 

function showNamesAndPagerControl(p) { 
$.getJSON("/home/ajaxpage", { page: p ? p : 1 }, function (data) { // default to page 1 
$("#namesList") 
.attr("start", data.pager.FirstItemOnPage) // update the <li> numbers 
.html($("#namesTemplate").tmpl(data.names)); // show the names for this page 
$("#namesPager").html(pagedList.render(data.pager)); // update the pager control 
}).error(function() { 
// if we hit an error (such as a 404), try loading the first page 
if (p !== 1) // don't do this if we just tried to load the first page 
showNamesAndPagerControl(1); 
}); 
} 

// get current url hash (ex: "#3" for page 3) 
var hash = window.location.hash; 
if (hash) 
hash = hash.slice(1); // chop off the leading "#" 

// load whatever the currently requested page is 
showNamesAndPagerControl(hash); 

$(".PagedList-pager a").live("click", function (ev) { 
ev.preventDefault(); // don't let the page actually navigate 
var pageNumber = $(this).data('page'); // load the pagenumber from the link's data-pager attribute 
showNamesAndPagerControl(pageNumber); 
window.location.hash = pageNumber; // update the url hash 
}); 
}); 
}); 

私はbxsliderこのAJAXを統合したいです。

どうすればいいですか?

答えて

1

これをajaxで使用するには、サーバーからデータがどのように戻ってくるかによって異なります。それは、サーバー側でフォーマットいない場合

$.getJSON({ 
    success:function(data){ 
       $(data).appendTo($('wherever')); 
       $(data).find('#yourItem').bxSlider(); 
      } 
} 

を、その後、あなたは自分のJavaScriptでそれをフォーマットしてから適用する必要があります。それが戻って来ると、すでにサーバ側でフォーマットされている場合は、あなただけ行うことができる必要がありますbxSlider()を呼び出します。私はおそらく私はあなたの質問をかなり得ていないように感じる?

問題が解決しない場合は、ajax部分に苦労している場合や、bxsliderをさらに適用してもう少し詳しく説明してください。

関連する問題