JQuery — Jcarousel с Ajax и PHP не работает

Я пытаюсь создать вертикальную ленту новостей, которая будет извлекать данные из базы данных, используя ajax. Слайдер работает правильно, если я напрямую вызываю включаемый файл php, но не работает при вызове через ajax. При этом все результаты отобразятся в списке, и никакие функции слайдера работать не будут.

PHP:

$hospitalId = 1;
$todaysDate = date("Y-m-d");

?><ul>
<?

$getNews1 = "SELECT * FROM  cms_content, cms_contentJoin
WHERE cms_content.contentId = cms_contentJoin.contentId1
AND contentId2 = '13'
AND liveStatus = '1'
AND templateId = '5'
AND cms_content.hospitalId = '$hospitalId'
AND joinType = 'newsCategory'
AND publishDate <= '$todaysDate'
ORDER BY publishDate Desc
LIMIT 0,30";
$getNews2 = mysql_query($getNews1) or die ("Unable to content");

$i = 0;
while($getNews3 = mysql_fetch_array($getNews2)) {?>
<li>
<div class="item<? if ($i == 0) { echo " active"; } ?>"><? $title = strip_tags("$getNews3[contentTitle]");if ($moduleId == "Home") { $titleLength = 20; } else {  $titleLength = 30; }

if ((strlen($title) > $titleLength) && (strlen($title) > 1)) {
$whitespaceposition = strpos($title," ",$titleLength-5);
$title = substr($title, 0, $whitespaceposition)."...";
}  ?>

<span class="name"><a href="<? echo "$getNews3[navUrl]"; ?>">
<? echo $title; ?>
</a></span>

<?
$article = strip_tags("$getNews3[contentMain]");

if ($moduleId == "Home") { $articleLength = 50; } else {  $articleLength = 90; }

if ((strlen($article) > $articleLength) && (strlen($article) > 1)) {
$whitespaceposition = strpos($article," ",$articleLength-5);
$article = substr($article, 0, $whitespaceposition)."...";
}

?>
<div class="story"><p>&nbsp;<? echo $article; ?></p><a href="<? echo "$getNews3[navUrl]"; ?>">
Read more...
</a></div><div class="clearfix"></div>
</div>
</li>

<? $i++; ?>
<? } ?>

</ul><div class="col-md-9">

<div class="morenews">
<a href="/news/ncategory/13/Business News/">&rang; See More...</a>
</div>

</div>

<div class="col-md-3">
<a href="#" id="newslist-prev" class="jbutton"></a>
<a href="#" id="newslist-next" class="jbutton"></a>
</div>`

HTML / Ajax:

<div id="newslist" >
<?php //include("system-files/website/templates/includes/modules/BusinessNews.php"); ?></div><script>/*$('#newslist').load('/system-files/website/templates/includes/modules/BusinessNews.php');
jQuery('#newslist').jcarousel('reload');

var Url = '/system-files/website/templates/includes/modules/BusinessNews.php';
var postData   = new Object();
jQuery.ajax({
url:Url,
type: "POST",
data:postData,
success:function(data) {

jQuery('#newslist')
.append(data);

// Reload carousel
jQuery('#newslist').jcarousel('reload');
}
});*/

var Url = '/system-files/website/templates/includes/modules/BusinessNews.php';
var postData   = new Object();
jQuery.ajax({
url:Url,
type: "POST",
data:postData,
success:function(data) {
$('#newslist').html(data);
$('#newslist').jcarousel();
},
error: function(error){
console.log("Error:");
console.log(error);
}
});

Jquery:

/************************************************************************/// // NEWS ///************************************************************************/

/**
* We use the initCallback callback
* to assign functionality to the controls
*/
function mycarousel_initCallback(carousel) {

jQuery('#newslist-next').bind('click', function() {
carousel.next();
return false;
});

jQuery('#newslist-prev').bind('click', function() {
carousel.prev();
return false;
});
};// Ride the carousel...
jQuery(document).ready(function() {

jQuery("#newslist").jcarousel({
scroll: 1,
initCallback: mycarousel_initCallback,
itemFallbackDimension: 300,
buttonNextHTML: null,
buttonPrevHTML: null,
vertical: true,
auto: 1,
itemLastOutCallback: {
onAfterAnimation: disableCustomButtons
},
itemLastInCallback: {
onAfterAnimation: disableCustomButtons
}
});
});function disableCustomButtons(carousel){

var prev_class = 'jcarousel-prev-disabled jcarousel-prev-disabled-vertical';
if (carousel.first == 1) {
$('#newslist-prev').attr('disabled', 'true').addClass(prev_class);
} else {$('#newslist-prev').removeAttr('disabled').removeClass(prev_class);
}

var next_class = 'jcarousel-next-disabled jcarousel-next-disabled-vertical';
if (carousel.last == carousel.size()) {
$('#newslist-next').attr('disabled', 'true').addClass(next_class);
} else {
$('#newslist-next').removeAttr('disabled').removeClass(next_class);
}

};

0

Решение

Попробуйте изменить:

    var Url = '/system-files/website/templates/includes/modules/BusinessNews.php';

var postData   = new Object();
jQuery.ajax({
url:Url,
type: "POST",
data:postData,
success:function(data) {
$('#newslist').html(data);
jQuery("#newslist").jcarousel({
scroll: 1,
initCallback: mycarousel_initCallback,
itemFallbackDimension: 300,
buttonNextHTML: null,
buttonPrevHTML: null,
vertical: true,
auto: 1,
itemLastOutCallback: {
onAfterAnimation: disableCustomButtons
},
itemLastInCallback: {
onAfterAnimation: disableCustomButtons
}
});
},
error: function(error){
console.log("Error:");
console.log(error);
});
0

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]