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>';
Code: Select all
function populateModal(id) {
$.ajax({
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);
$('#jform_description').val(json_data.description);
}
});
}
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
David