Dynamic modal in Joomla [updated] Topic is solved

For Joomla! 3.x Coding related discussions, please use: http://groups.google.com/group/joomla-dev-general

Moderator: ooffick

Forum rules
Please use the mailing list here: http://groups.google.com/group/joomla-dev-general rather than this forum.
Post Reply
Joomla! Intern
Joomla! Intern
Posts: 85
Joined: Wed Jan 20, 2016 10:58 pm

Dynamic modal in Joomla [updated]

Post by david0058 » Sun Jul 03, 2022 11:40 am


Help from anyone who understands how modals work in Joomla :)

I have a page containing links to my component. Each link contains a record id. When a link is clicked I would like to display a modal containing the record details.

As I understand it, the data in the body of Joomla "modals" is populated at the time that the containing page is created, and the modal iframe is then shown/hidden when the appropriate control on the page is clicked. This all works fine on my page, but because I want to use the same modal to display different records I just build the modal with blank fields.

My links in the view are generated with this code:

Code: Select all

echo '<a href="#ModalSelect' . $modalId . '" data-toggle="modal" data-target="#ModalSelect' . $modalId . '" data-challenge-id="5649" onclick="return populateModal(5649);">Show record 5649</a>';
When clicked, the populateModal() javascript function successfully uses AJAX to retrieve a JSON version of the matching record. I then use JQuery to update the fields on the modal (example with just the first field):

Code: Select all

function populateModal(id) {
                url: '/administrator/index.php?option=com_conlucra_game&view=challenge&format=json&id=' + id,
                type: 'GET',
                dataType: 'JSON',
                success: function(json_data) {
                    alert('description: ' + json_data.description);
However when the modal is then displayed, all the fields are blank.

This is a sequencing problem. The Bootstrap Modal 'url' parameter specifies the URL to call to get the modal body, but because I don't want static values, mine returns blank fields. So what happens is this:

1. I click the link;
2. The onClick handler fires, the record is retrieved by the AJAX call and the (hidden) modal fields are updated with the record values;
3. The href in the link is then activated, the modal is unhidden and the header and footer are shown;
4. The Bootstrap Modal url is called to generate the body, and it returns a blank record;
5. The modal fields are overwritten with the blank record;
6. The blank modal fields are un-hidden.

Grrrrr :-\

Ideally I'd like to avoid the whole AJAX thing, and just "tell" the modal to update its field values before being un-hidden but I don't believe this is possible. The Bootstrap 'url' parameter looks like the perfect way to do this, as that URL is called to create the body of the modal, but it's a static parameter: I can't see a way to reset it before each time it's called. It seems to be used as the "src" attribute of the modal iframe, so maybe I can just poke the record ID into there at runtime ?

Any ideas gratefully received :)

Last edited by david0058 on Sun Jul 03, 2022 12:17 pm, edited 6 times in total.

Joomla! Intern
Joomla! Intern
Posts: 85
Joined: Wed Jan 20, 2016 10:58 pm

Re: Dynamic modal in Joomla [updated]

Post by david0058 » Sun Jul 03, 2022 9:59 pm

OK, solved but it's pretty hacky.

I added a 'document-ready' function that 'overrides' the default Bootstrap behaviour by listening for the modal 'shown' event, then deleting the iframe element from the modal and replacing it with one with a src attribute that includes the record id from a hidden field in the modal body url instead of just being a static url. I then set that hidden field with an onclick function in each href.

So the sequence is:
1. Link clicked, onclick fires, hidden field updated with target id
2. modal created, 'shown' event triggers the listener
3. listener removes the iframe element, reads the hidden field, builds a url with the id and uses that as the src for a new iframe element that is inserted into the modal;
4. iframe opens, pulling the data for the required record into the modal body.

Post Reply

Return to “Joomla! 3.x Coding”