0
私はモーダルにコンテンツを読み込み、チェックボックスを使用して電子メールアドレスを「受信者」テキストフィールドに設定します。コンテンツをハードコードすると、これは正常に動作しますが、外部リソースからロードすると、チェックされた電子メールアドレスは受信者フィールドに入力されません。動的コンテンツのモーダルはテキストフィールドに値を設定しません
ここの記事は動的コンテンツ用のローカルリソースをロードしないので、コードを二重にしなければならないことに気付きました....まずは実際のコードとそれから作業。
オリジナル
jQuery(document).ready(function() {
$('.openContacts').on('click', function() {
$('.modal-body').load('modalcontacts', function() {
$('#contactsModal').modal({
show: true
});
});
});
$('#contactsearch').hideseek({
highlight: true,
nodata: 'No results found'
});
$(':checkbox[name="addcontact"]').change(function() {
var assignedTo = $(':checkbox[name="addcontact"]:checked').map(function() {
return this.id;
})
.get();
$("input[name='recipients']").val(assignedTo.join("; "));
});
/*
* form validator
*/
$('#ci-form').validator();
/*
* TinyMCE WYSIWYG Editor
*/
tinymce.init({
selector: 'textarea',
theme: 'modern',
plugins: 'autosave code paste print preview searchreplace autolink directionality visualblocks visualchars image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor imagetools contextmenu colorpicker textpattern',
paste_data_images: true,
branding: false,
skin: "lightgray",
height: 300
});
});.modal-body {
max-height: calc(100vh - 210px);
overflow-y: auto;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css" />
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" name="recipients" value="" id="recipients" maxlength="" class="form-control" placeholder="Email to">
<span class="input-group-btn">
<button data-toggle="modal" data-target="#contactsModal" class="btn btn-info openContacts" type="button">Contacts</button>
</span>
</div>
</div>
<!-- Contacts Modal -->
<div id="contactsModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<input id="contactsearch" name="search" class="form-control" placeholder="Search..." type="text" data-list=".contactlist" autocomplete="off">
</div>
<div class="modal-body">
<p>Loading....</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Send</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.6.7/tinymce.min.js"></script>
<script src="https://cdn.rawgit.com/vdw/HideSeek/master/jquery.hideseek.min.js"></script>のように動作するはずこの
jQuery(document).ready(function() {
$('.openContacts').on('click', function() {
$('.modal-body').load('modalcontacts', function() {
$('#contactsModal').modal({
show: true
});
});
});
$('#contactsearch').hideseek({
highlight: true,
nodata: 'No results found'
});
$(':checkbox[name="addcontact"]').change(function() {
var assignedTo = $(':checkbox[name="addcontact"]:checked').map(function() {
return this.id;
})
.get();
$("input[name='recipients']").val(assignedTo.join("; "));
});
/*
* form validator
*/
$('#ci-form').validator();
/*
* TinyMCE WYSIWYG Editor
*/
tinymce.init({
selector: 'textarea',
theme: 'modern',
plugins: 'autosave code paste print preview searchreplace autolink directionality visualblocks visualchars image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor imagetools contextmenu colorpicker textpattern',
paste_data_images: true,
branding: false,
skin: "lightgray",
height: 300
});
});.modal-body {
max-height: calc(100vh - 210px);
overflow-y: auto;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css" />
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" name="recipients" value="" id="recipients" maxlength="" class="form-control" placeholder="Email to">
<span class="input-group-btn">
\t \t \t <button data-toggle="modal" data-target="#contactsModal" class="btn btn-info openContacts" type="button">Contacts</button>
\t \t </span>
</div>
</div>
<!-- Contacts Modal -->
<div id="contactsModal" class="modal fade in" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<input id="contactsearch" name="search" class="form-control" placeholder="Search..." type="text" data-list=".contactlist" autocomplete="off">
</div>
<div class="modal-body">
<div class="contactlist">
<h3>A</h3>
<div class="list-group">
<div class="list-group-item">
<strong class="list-group-item-heading">Aaron Aaberg</strong>
<p class="list-group-item-text">
<span class="checkbox">
<label><input type="checkbox" id="[email protected]" value="[email protected]" name="addcontact">[email protected]</label></span></p>
</div>
</div>
<div class="list-group">
<div class="list-group-item">
<strong class="list-group-item-heading">Aaron Aaby</strong>
<p class="list-group-item-text">
<span class="checkbox">
<label><input type="checkbox" id="[email protected]" value="[email protected]" name="addcontact">[email protected]</label></span></p>
</div>
</div>
<div class="list-group">
<div class="list-group-item">
<strong class="list-group-item-heading">Abbey Aadland</strong>
<p class="list-group-item-text">
<span class="checkbox">
<label><input type="checkbox" id="[email protected]" value="[email protected]" name="addcontact">[email protected]</label></span></p>
</div>
</div>
<div class="list-group">
<div class="list-group-item">
<strong class="list-group-item-heading">Abbie Aagaard</strong>
<p class="list-group-item-text">
<span class="checkbox">
<label><input type="checkbox" id="[email protected]" value="[email protected]" name="addcontact">[email protected]</label></span></p>
</div>
</div>
<div class="list-group">
<div class="list-group-item">
<strong class="list-group-item-heading">Abby Aakre</strong>
<p class="list-group-item-text">
<span class="checkbox">
<label><input type="checkbox" id="[email protected]" value="[email protected]" name="addcontact">[email protected]</label></span></p>
</div>
</div>
<div class="list-group">
<div class="list-group-item">
<strong class="list-group-item-heading">Abdul Aaland</strong>
<p class="list-group-item-text">
<span class="checkbox">
<label><input type="checkbox" id="[email protected]" value="[email protected]" name="addcontact">[email protected]</label></span></p>
</div>
</div>
<div class="list-group">
<div class="list-group-item">
<strong class="list-group-item-heading">Abe Aalbers</strong>
<p class="list-group-item-text">
<span class="checkbox">
<label><input type="checkbox" id="[email protected]" value="[email protected]" name="addcontact">[email protected]</label></span></p>
</div>
</div>
<div class="list-group">
<div class="list-group-item">
<strong class="list-group-item-heading">Abel Aalderink</strong>
<p class="list-group-item-text">
<span class="checkbox">
<label><input type="checkbox" id="[email protected]" value="[email protected]" name="addcontact">[email protected]</label></span></p>
</div>
</div>
<div class="list-group">
<div class="list-group-item">
<strong class="list-group-item-heading">Abigail Aalund</strong>
<p class="list-group-item-text">
<span class="checkbox">
<label><input type="checkbox" id="[email protected]" value="[email protected]" name="addcontact">[email protected]</label></span></p>
</div>
</div>
<div class="list-group">
<div class="list-group-item">
<strong class="list-group-item-heading">Abraham Aamodt</strong>
<p class="list-group-item-text">
<span class="checkbox">
<label><input type="checkbox" id="[email protected]" value="[email protected]" name="addcontact">[email protected]</label></span></p>
</div>
</div>
<div class="list-group">
<div class="list-group-item">
<strong class="list-group-item-heading">Abram Aamot</strong>
<p class="list-group-item-text">
<span class="checkbox">
<label><input type="checkbox" id="[email protected]" value="[email protected]" name="addcontact">[email protected]</label></span></p>
</div>
</div>
<div class="list-group">
<div class="list-group-item">
<strong class="list-group-item-heading">Ada Aanderud</strong>
<p class="list-group-item-text">
<span class="checkbox">
<label><input type="checkbox" id="[email protected]" value="[email protected]" name="addcontact">[email protected]</label></span></p>
</div>
</div>
<div class="list-group">
<div class="list-group-item">
<strong class="list-group-item-heading">Adah Aanenson</strong>
<p class="list-group-item-text">
<span class="checkbox">
<label><input type="checkbox" id="[email protected]" value="[email protected]" name="addcontact">[email protected]</label></span></p>
</div>
</div>
<div class="list-group">
<div class="list-group-item">
<strong class="list-group-item-heading">Adalberto Aanerud</strong>
<p class="list-group-item-text">
<span class="checkbox">
<label><input type="checkbox" id="[email protected]" value="[email protected]" name="addcontact">[email protected]</label></span></p>
</div>
</div>
<div class="list-group">
<div class="list-group-item">
<strong class="list-group-item-heading">Alda Abdo</strong>
<p class="list-group-item-text">
<span class="checkbox">
<label><input type="checkbox" id="[email protected]" value="[email protected]" name="addcontact">[email protected]</label></span></p>
</div>
</div>
<div class="list-group">
<div class="list-group-item">
<strong class="list-group-item-heading">Alden Abdon</strong>
<p class="list-group-item-text">
<span class="checkbox">
<label><input type="checkbox" id="[email protected]" value="[email protected]" name="addcontact">[email protected]</label></span></p>
</div>
</div>
<div class="list-group">
<div class="list-group-item">
<strong class="list-group-item-heading">Aldo Abdool</strong>
<p class="list-group-item-text">
<span class="checkbox">
<label><input type="checkbox" id="[email protected]" value="[email protected]" name="addcontact">[email protected]</label></span></p>
</div>
</div>
<div class="list-group">
<div class="list-group-item">
<strong class="list-group-item-heading">Alena Abdulmuniem</strong>
<p class="list-group-item-text">
<span class="checkbox">
<label><input type="checkbox" id="[email protected]" value="[email protected]" name="addcontact">[email protected]</label></span></p>
</div>
</div>
<h3>B</h3>
<div class="list-group">
<div class="list-group-item">
<strong class="list-group-item-heading">Bob Smith</strong>
<p class="list-group-item-text">
<span class="checkbox">
<label><input type="checkbox" id="[email protected]" value="[email protected]" name="addcontact">[email protected]</label></span></p>
</div>
</div>
<h3>C</h3>
<div class="list-group">
<div class="list-group-item">
<strong class="list-group-item-heading">Carl Grimes</strong>
<p class="list-group-item-text">
<span class="checkbox">
<label><input type="checkbox" id="[email protected]" value="[email protected]" name="addcontact">[email protected]</label></span></p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Send</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.6.7/tinymce.min.js"></script>
<script src="https://cdn.rawgit.com/vdw/HideSeek/master/jquery.hideseek.min.js"></script>