我已经成功地在视图页面上实现了滑块,但是在jquery响应中我不明白y滑块没有移动,而且我不知道我在哪里做错了。实际上,我已经在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>
成功生成以下代码:
现在我想在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);
}
但是我只有这个
,滑块不动。知道在我的jquery中我做错了什么吗?
最佳答案
在Ajax响应之后,将HTML绑定到滑块div中时,必须调用$('.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);
}
关于javascript - 无法在jquery响应中显示滑块,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43320095/