[英]Bootstrap Selectpicker not working on a global modal
I made a global modal with this 我为此做了一个全球模式
<div id="GlobalModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<style>
#GlobalModal .modal-body .body-content {
margin:0;
width: 100%;
}
</style>
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="background:#337ab7;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="color:white">Not set...</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
</div>
</div>
</div>
and this is my button for calling the modal 这是我调用模态的按钮
<button id="new-communication" type="button" class="btn btn-info btn-sm">NEW <i class="glyphicon glyphicon-plus"></i></button>
and this is the content 这就是内容
<div class="hidden">
<div id="mc-communication">
<form id="loginForm" class="form-horizontal" role="form" method="POST" action="" >
<div class="form-group">
<label class="col-sm-2 control-label">Type</label>
<div class="col-sm-10">
<select class="form-control selectpicker show-tick" name="SingleSelectFieldType">
<option></option>
<option>Mobile - Private</option>
<option>Mobile - Office</option>
<option>Others</option>
</select>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Value</label>
<div class="col-sm-10 col-md-10">
<input class="form-control" type="tel" id="input-mobile-number" placeholder="" name="MobileNumberFieldType">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"></label>
<div class="col-sm-10">
<div class="[ form-group ]">
<input type="checkbox" checked />
<span></span><span> </span></label>
<label>Primary</label>
</div>
</div>
</div>
</form>
</div>
</div>
and this is my jQuery of calling the content to get into the modal class.modal.js 这是我的jQuery,它调用内容以进入模态类。modal.js
var Modal = {
Me: $('#GlobalModal'),
Title: 'Undefined Title',
Width: { xs: '25%', sm: '40%', md: '55%', lg: '70%', xl: '85%', full: '95%' },
Show: function (params) {
this.Me.find('.modal-body').empty();
this.Me.find('.modal-title').text((this.Title == null) ? this.Title : params.Title);
if(params.Content.substr(0, 1) == '#') { //To Check if content may come from a view or a div
this.Me.find('.modal-body').append($(params.Content).clone());
} else {
this.Me.find('.modal-body').load(params.URI);
}
this.Me.find('.modal-dialog').css('width', this.Width[params.Width]);
this.Me.modal('show');
}
}
and the script to call in my view 和在我看来要调用的脚本
$(document).ready(function(){
$('#new-communication').on('click', function(){
Modal.Show({
Title: 'Communication',
Content: '#mc-communication',
Width: 'sm'
});
});
});
The thing is I can see the contents inside my select, but I can't select it and I also got a checkbox there and I can't check it. 关键是我可以看到我选择的内容,但是我无法选择它,并且在那里也有一个复选框,我无法检查它。 I tried making a new modal that is not global, but just for the communication, and it worked, I don't know what's wrong with my code.
我尝试制作一个新的模式,该模式不是全局的,仅用于通信,并且有效,我不知道我的代码有什么问题。
You will have to reinitialize the selectpicker
after appending the html 附加html后,您将不得不重新初始化
selectpicker
if(params.Content.substr(0, 1) == '#') { //To Check if content may come from a view or a div
this.Me.find('.modal-body').append($(params.Content).clone());
// This will reinitialize selectpicker. You may need to revalidate this logic since you are appending data and not replacing.
$('.selectpicker').selectpicker();
} else {
this.Me.find('.modal-body').load(params.URI, function() {
// Initialize the selectpicker after loading the data
$('.selectpicker').selectpicker();
});
}
The reason y this is happening is, the html data is dynamic and selectpicker
is not initialized in newly added html elements 发生这种情况的原因是,html数据是动态的,并且
selectpicker
没有在新添加的html元素中初始化
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.