I have in my system many parts where the user double clicks on a certain line, and loads the corresponding action inside a Bootstrap modal.
In the current method I use, there are three modal elements indicating:
#primary-layer-modal
#secondary-layer-modal
#third-layer-modal
These three elements are already loaded empty with the interface, and are waiting to be called and filled.
What I want to do is somehow 'instantiate' an element (at the time an ajax request is made) that can be invoked in the instance, and be destroyed later, because in the current mode, these modes are unnecessary waste.
What I thought of as a solution:
Leave only div in index with id:
<div id="residual-elements"></div>
And request to render a modal to my framework and return it along with json's answer:
$modal = new \vidbModel\modalElements();
$elemento = $modal->background('static')->footer('close|submitFakeForm')->title('Titulo da modal')->body($html)->modal(0);
echo json_encode($elemento);
And use of:
$('#residual-elements').append($respostaAjax);
To enter the modal on the page.
And use of:
$('#residual-elements').empty();
To destroy the modal after use.
Well, this is not seeming the best way to do this because in certain cases I would have a very large json response brought from the server.
I do not have much practice with JS, and I think with it I'll have a better solution.
The question is:
How would be the logic for me to have an 'element builder' instantiated client side that I do not have to ask PHP for the element in question?
Or,
What would be a possible way to instantiate an element that could be reused constantly client side?
1 - My JS is very weak.
2 - The environment I am trying to accomplish this is to decrease the server's consumption in passing through large responses in the requests.