The initial phase of the project I'm working on is almost over, and I'm adjusting things done in a not very well done way.
One of these things was that I left two modal elements of residue in my% base% to use them in the response of requests, I found this very bad but only now I thought about how to get around this.
There are 3 functions inside a javascript pseudo-class:
function ajaxCall(functions, settings, values) {
$(document).trigger("onRequireByAjax");
$.ajax({
type: settings['method'],
url: "callers.php",
data: {function: functions['function'], target: functions['target'], values},
dataType: settings['dataType'],
success: function (data)
{
if (functions['action'] === 'fill-element') {
$('.' + functions['element']).html(data);
}
if (functions['action'] === 'fill-modal') {
renderModal('modal-area', data['modal']);
$('.' + data['modal']).modal('toggle');
$('.modal').find('.modal-title').html(data['title']);
$('.modal').find('.modal-body').html(data['body']);
$(document).on('hidden.bs.modal', '.' + data['modal'], function (e) {
e.preventDefault();
$(this).remove();
});
}
}
});
}
function renderModal(element, id) {
var html = '' +
'<div class="modal fade in ' + id + '" data-keyboard="alse" data-backdrop="static" id="full" tabindex=" - 1" role="dialog" aria-hidden="true">' +
'<div class="modal-dialog modal-full">' +
'<div class="modal-content">' +
'<div class="modal-header">' +
'<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>' +
'<h4 class="modal-title"></h4>' +
'</div>' +
'<div class="modal-body">' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
$('.' + element).append(html);
}
function destroyModal(id) {
$('.' + id).remove();
}
The only residue I have on my html
base is html
:
<div class='modal-area'></div>
And to trigger this modal I inform the parameters of the ajaxCall method:
var functions = {
function: 'navigation',
target: target,
layer: layer,
action: 'fill-modal'
};
var settings = {
method: 'POST',
dataType: 'json'
};
var values = null;
ajaxCall(functions, settings, values);
And with a response like this is defined the modal name and the content:
$rs = [
'modal' => 'minha-modal',
'title' =>'meu titulo',
'body' => 'corpo da modal'
];
Within the ajaxCall function and within the call, there is an event triggered in 'hidden.bs.modal' which removes the element that had been previously inserted:
$(document).on('hidden.bs.modal', '.' + data['modal'], function (e) {
e.preventDefault();
$(this).remove();
});
The question was great but the question is simple:
- This is a good way to work with bootstrap modals without leaving waste?
- If not, what could be a more viable option?