Я пытаюсь создать вертикальную ленту новостей, которая будет извлекать данные из базы данных, используя 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> <? 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/">⟩ 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);
}
};
Попробуйте изменить:
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);
});
Других решений пока нет …