아약스와 PHP가 작동하지 않는 Jcarousel

Question

아약스를 사용하여 데이터베이스에서 데이터를 가져 오는 수직 뉴스 피드를 만들려고합니다. 슬라이더는 php include 파일을 직접 호출하면 제대로 작동하지만 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/아약스 :

<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); 
    } 

}; 

Answer 1

변경해보십시오 :

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); 
     });