Here's the situation: I want to showcase a user's name with a popover that reveals a snippet of their profile information. I've got that part down, where it dynamically generates and displays the popover content as needed. The popover functions smoothly.
Now, what I'm aiming for is to enable users to click on the username and trigger a Bootstrap modal that presents more in-depth details about the user, if available. The issue I'm encountering is that the data-toggle attribute seems limited to only one setting:
echo '<a href="#" class="trigger userprof" data-toggle="popover" data-target="#userModal" data-popover-content="#content' . $user_row['user_id'] . '">' . $user_row['user_name'] . '</a>';
Even when attempting to add the modal to the data-toggle attribute, it doesn't seem to function as intended.
Through experimentation (hence the 'userprof' class in the mentioned code), I've found that triggering a JavaScript click event is possible (currently using a basic alert dialog for testing purposes). However, my goal is to load the modal from there. I'm unsure if it can all come together seamlessly.
I have a series of functions that successfully operate another modal (referred to as 'userModal') which were graciously assisted by someone here previously - is it feasible to invoke those within the click event?
// Code to open the modal displaying the caption and description:
$('#userModal').on('show.bs.modal', function (event)
{
var button = $(event.relatedTarget); // Button that triggered the modal
var title = button.data('title'); // Extracting info from data-* attributes
var body = button.data('body'); // Extracting info from data-* attributes
var modal = $(this);
modal.find('.modal-title').text( title );
modal.find('.modal-body').append( body );
});
// Upon modal closure, clear out the body content:
$('#userModal').on('hidden.bs.modal', function ()
{
$(this).find(".modal-body").text('');
});
Given these "anonymous" functions, I'm uncertain if they can be directly invoked...feeling somewhat perplexed in this coding maze. Any guidance pointing me towards the right path would be greatly appreciated. I'm even open to exploring alternative ideas, though I do desire this specific type of functionality (hover and click) for this scenario and potentially beyond. Much thanks!