Any way to defer modal rendering?
Any way to defer modal rendering?
tacman1123
Posts: 201Questions: 46Answers: 1
I have a custom function for the modal renderer, and it appears that it renders during the page load (via ajax/serverside).
I would like to defer loading the modal data until the user specifically requests it. That way, I could even have my own fetch within the modal that gets additional data from an external resource.
modalRenderer = ( api, rowIdx, columns ) => {
console.log(rowIdx);
let data = api.row(rowIdx).data();
let params = {data: data, columns: columns, globals: this.globals};
the console is showing the rowIdx even before the table loads.
This question has an accepted answers - jump to answer
Answers
I'm not sure what the context is here I'm afraid. Where is the modal coming from - Responsive, Editor, somewhere else?
Allan
Responsive.
Thanks for the clarification. And if I recall correctly this is with Bootstrap? The answer is that no, there is no way to delay the modal creation at this time with the built in modal display.
This is the code and as you'll see I have it creating the modal up front. I do that for performance reasons, so it can be reused when needed at a later date.
If you need a different method, then you could create a custom display controller for Responsive if you like.
Allan
Yes, bootstrap.
But modals are rarely called! And a delay in creating the modal seems appropriate, whereas creating every modal during table load significant in both time and memory. Especially since modals are only open one at a time, whereas the other responsive option, to put the extra columns beneath the primary row can be open at the same time.
Since the modal renderer is simply a function, please consider not calling that function until the modal is activated.
Alternatively, how would I go about creating a custom display controller for Responsive?
You could more or less copy the Bootstrap integration there. All of my built in display controllers for Responsive assume a synchronous response (there is no need for async support, since the built in ones only ever display the data which is already available locally).
The
responsive.details.displaydocumentation has some detail about created a display renderer.However, I'm wondering if using Responsive's modal is needed for this. I don't know the details of what you are working on, and perhaps you only want the modal when a column has been hidden, but if it is showing other information as well, perhaps you'd be better just displaying your own modal and not having Responsive doing anything.
Allan
Indeed, I really should just have my own modal, rather than embedded it in responsive. I know it's out of datatables core code, but are there any vanilla javascript examples (not jQuery) of how to add a modal button to a row?
This example shows how to add a row click event to show an alert with row information. Replace teh alert with the modal solution you are using.
Kevin
Sorry you asked for a non-jQuery event handler. See this example.
Kevin
Thanks. That gets the whole row, I have links to pages within the tds, so I'll need a button.
I'd like to be able to add my own data attributes at the row (tr) level, so I can add a stimulus controller, then listen for clicks on the stimulus target (the modal button). Is that possible?