Процесс выглядит так.
Пользователь ищет любые слова в форме поиска. Ajax вызывает слово и получает данные, затем они будут показаны в модальном окне.
Итак, я попытался создать модальное окно динамически с помощью ajax.
Но модальное содержимое не изменилось после его вызова.
1) Эта функция включает форму поиска и вызывает модальное окно.
function answer() {
//console.log('answer');
var div = document.createElement('div');
div.className = 'row';
div.innerHTML = `<!-- file form start -->
<!-- file form end -->
<label class="col-md-2 col-form-label">문의내용</label>
<!-- text form start -->
{!! Form::open([ 'route' => ['qnamembercreate', $qnaMemberData->idx], 'method' => 'post', 'files' => true, 'accept-charset' => 'utf-8','class' => 'col-md-10 col-xs-9' ])!!}
<div class="col-sm-6 offset-md-6 p-0">
<div class="input-group">
<input type="text" id="f_search" name="f_search" class="form-control">
<span class="input-group-append">
<button type="button" class="btn waves-effect waves-light btn-inverse" onclick="faq_search()">Search</button>
</span>
</div>
</div>
<input type="hidden" name="subject" value="{{ $qnaMemberData->subject }}">
<textarea id="answer_content" class="mb-0" rows="20" style="width:100%;" name="add_answer"></textarea>
<div class="form-group">
<input name="fileToUpload" type="file" class="filestyle" data-input="false" id="filestyle-1" tabindex="-1" style="display: none;">
<div class="bootstrap-filestyle input-group">
<div style="position: absolute; width: 100%; height: 35.375px; z-index: -1;"></div>
<span class="group-span-filestyle " tabindex="0">
<label for="filestyle-1" style="margin-bottom: 0;" class="btn btn-secondary btn-sm fload-right">
<input type="file" name="fileToUpload" class="filestyle-1" data-placeholder="" data-buttontext="첨부파일" data-buttonname="btn-secondary">
</label>
</span>
</div>
</div>
<button type="button" class="btn btn-danger btn-sm float-right ml-1 mt-1" onclick="history.back()">취소</button>
<button type="submit" class="btn btn-success btn-sm float-right mt-1">등록</button>
{!! Form::close() !!}
<!-- text form end -->`;
document.getElementById('replyData').appendChild(div);
document.getElementById('answer').remove();
$('#answer_content').summernote({
// placeholder: {!! json_encode($qnaMemberData->content) !!},
tabsize: 2,
height: 200,
lang: 'ko-KR',
fontNames: ['Gulim', 'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', ],
fontNamesIgnoreCheck: ['Gulim'],
});
}
2) Это функция «faq_search», когда пользователь нажимает кнопку «поиск».
function faq_search() {
var word = $('#f_search')[0].value;
//console.log(word);
$.ajax({
url : '/guidesearch',
type : 'POST',
data : {
keyword: word
},
cache : false,
success : function(data, jqXHR, textStatus) {
console.log(data);
faq_popup(data);
}
});
}
3) Это функция 'faq_popup', которая вызывается после получения данных.
function faq_popup(data) {
var _data = data;
console.log("here", _data);
const appendedDiv = $(`
<div class="modal fade show" tabindex="-1" id="faqModal" role="dialog" style="positon:center;">
<div class="modal-dialog modal-dialog-centered">
<!-- Modal content-->
<div class="modal-content">
<div class="table-responsive">
<table class="table mb-0">
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
`);
const tbody = appendedDiv.find('tbody')[0];
_data.forEach(({ content, subject }, i) => {
//console.log(i);
const tr = tbody.appendChild(document.createElement('tr'));
tr.innerHTML = `
<th scope="row">${i + 1}</th>
<td><a style="cursor:pointer">${subject}</a></td>
`;
tr.querySelector('a').addEventListener('click', () => getContent(content));
});
$('#modal_place').append(appendedDiv);
$('#faqModal').modal('show');
}
Я попытался сбросить модальное окно с помощью этого кода ниже. Но проблема в том, что после очистки модального содержимого новые данные не вызываются вообще.
$(document).ready(function(){
$('body').on('hidden.bs.modal', '.modal', function () {
console.log("modal closed");
$(this).find('tbody td').html("");
});
});
Я действительно не понимаю. Поскольку я вызываю faq_popup после того, как ajax получил данные, новые данные должны быть показаны. Но это не работает, как я думаю.
Что я здесь не так?
** Я также пытался стереть все модальное содержимое. Модальное содержимое не отображается вообще.
$('body').on('hidden.bs.modal', '.modal', function () {
console.log("modal closed");
$(this).find('.modal-content').html("");
});