Dynamically output the contents of a modal based on a click event (some contents will use accordions and so forth)
Hello,
I have my modal working based on a single user click, but I need more (don't we all).
I'm sure that this has probably been addressed a number of times before in these forums, so if your reply is simply a link to another post that answers it, that would be great!
I have been searching through tons of posts and didn't quite find what I was looking for. In any event, here is a full description of what I want to do. . . . .
I have an image map showing a large number of possible selections. A user will hover the mouse over a given item and a menu for that item is displayed containing the options for that item. After a bit of drill down, they then click their final selection. This will open up a dialog modal containing information based on what they clicked.
It is my intent to use Ajax to grab the information from an external ColdFusion page (I can get the data from ColdFusion via Ajax without a problem).
The issue I have is that I don't properly understand how to populate the dialog after page load based on the user click.
As I understand it, when the page loads, jQuery sets up the dialog and populates it. I set autoOpen to false to prevent it from displaying when the page first loads.
What I need to understand is how to then populate it via Ajax based on what was clicked.
To further compound my confusion, the data coming back may need to be displaying one or more uses of the accordion widget.
So, in summary, a user clicks in the menu, an ID is passed to jQuery to open a modal and the ID is then used as part of the url that Ajax uses to reference the external ColdFusion page (it could just as easily be php or ASP.NET), the contents returned from the external page are then displayed inside the modal and may utilize accordions, tooltips etc.
Thank you for any help you can provide.
I added the following after I originally posted.
I found a web page that touches on this, but I'm still not clear on how all of this works.
Populating a modal with external data
That example seems to work fine for populating a modal with external data on page load if it is just regular html, but if it has an accordion in it, the accordion doesn't show up. Also, I still don't have a clear idea of how to pass the original ID to the ajax call.