2017-04-10 38 views
0

我已經在視圖頁面上成功實現了滑塊,但在jquery響應中,我不明白y滑塊沒有移動,我不知道我在哪裏做錯了。其實我已經加載數據在jquery響應,這是來自數據庫。無法在jQuery響應中顯示滑塊

這裏是滑蓋我成功視圖頁面:

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-lg" style="width:640px;"> 
    <div class="modal-content"> 
     <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 



    <!-- Wrapper for slides --> 
    <div class="carousel-inner" id="slider"> 
    <?php $count=1; if($inspection_images !=''){ foreach($inspection_images as $img){?> 
    <div class="item <?php if($count==1){ echo 'active'; } ?>"> 
    <img class="img-responsive" src="<?php echo base_url();?>uploads/inspection/<?php echo $img->attachment_saved_name; ?>" alt="..."> 
     <div class="carousel-caption"> 
     <?php echo $img->attachment_name.' ('.$img->column_name.')'; ?> 
     </div> 
    </div> 
    <?php $count++; }} ?> 
    </div> 

    <!-- Controls --> 
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left"></span> 
    </a> 
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right"></span> 
    </a> 
</div> 
    </div> 
    </div> 
</div> 

它成功地產生這樣的: enter image description here

,現在我想要做同樣的事情在jQuery的效應初探設置在滑蓋的數據:

function galleryselectetemplate() 
{ 
    var c = $('#gallery option:selected').val(); 
    var gt = $('#templategallery option:selected').val(); 
// alert(gt); 
    $.ajax({ 
     cache: false, 
     dataType:'json', 
     type: 'POST', 
     url: site_url+'Gallery/inspection_gallery', 
     data: {client:c,gt:gt}, 
     success: function(resp) 
     { 
     // alert((JSON.stringify(resp))); 
      // var count=1; 
      var json_arr = JSON.parse(JSON.stringify(resp)); 
      <?php $count=1; ?> 
      if(json_arr != null) 
      { 
       <?php $count=1; ?> 
       $('#img').empty(); 
       for(var ind = 0;ind < json_arr.length;ind++) 
       { 
       /* $('#img').append('<a href=""><img src="<?php echo base_url(); ?>uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" class="img-responsive"></img></a>');*///shows fit smaller image 

        $('#img').append('<a onclick="viewImage(\''+json_arr[ind]['attachment_saved_name']+'\')" title="'+json_arr[ind]['attachment_original_name']+'" href="javascript:;"><img src="<?php echo base_url(); ?>uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" width="300" height="200" class="img-responsive"></img></a>');//showing very larger img and i dont know y it is not getting in viewImage? 

      /*  $('#slider').append('<img class="img-responsive " src="<?php echo base_url();?>uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" alt="..."></img>');*/ 

        $('#slider').html('<div class="item <?php if($count==1){ echo 'active'; } ?>"><img class="img-responsive " src="<?php echo base_url();?>uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" alt="..."></img></div>'); 

        <?php $count++; ?> 

       } 
      } 
     } 
     }); 
// var ins= $("#inspectionid").val(); 
// alert(c); 
// alert(gt); 
// alert(ins); 
} 

,但我得到這個只有:

enter image description here

,滑塊不動。任何想法在我的jQuery中,我做錯了什麼?

回答

0

Ajax響應後,當你在你的滑塊DIV結合HTML,你必須調用$('.carousel').carousel();

function galleryselectetemplate() 
{ 
    var c = $('#gallery option:selected').val(); 
    var gt = $('#templategallery option:selected').val(); 
// alert(gt); 
    $.ajax({ 
     cache: false, 
     dataType:'json', 
     type: 'POST', 
     url: site_url+'Gallery/inspection_gallery', 
     data: {client:c,gt:gt}, 
     success: function(resp) 
     { 
     // alert((JSON.stringify(resp))); 
      // var count=1; 
      var json_arr = JSON.parse(JSON.stringify(resp)); 
      <?php $count=1; ?> 
      if(json_arr != null) 
      { 
       <?php $count=1; ?> 
       $('#img').empty(); 
       for(var ind = 0;ind < json_arr.length;ind++) 
       { 
       /* $('#img').append('<a href=""><img src="<?php echo base_url(); ?>uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" class="img-responsive"></img></a>');*///shows fit smaller image 

        $('#img').append('<a onclick="viewImage(\''+json_arr[ind]['attachment_saved_name']+'\')" title="'+json_arr[ind]['attachment_original_name']+'" href="javascript:;"><img src="<?php echo base_url(); ?>uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" width="300" height="200" class="img-responsive"></img></a>');//showing very larger img and i dont know y it is not getting in viewImage? 

      /*  $('#slider').append('<img class="img-responsive " src="<?php echo base_url();?>uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" alt="..."></img>');*/ 

        $('#slider').html('<div class="item <?php if($count==1){ echo 'active'; } ?>"><img class="img-responsive " src="<?php echo base_url();?>uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" alt="..."></img></div>'); 

        <?php $count++; ?> 

       } 
      } 

      $('.carousel').carousel(); 

     } 
     }); 
// var ins= $("#inspectionid").val(); 
// alert(c); 
// alert(gt); 
// alert(ins); 
} 
+0

NT發生相同的結果,不知道ÿ? – user3162878