How can i get dynamic data from bootstrap modal?

I am trying to achieve the following:

I have a button :

Open

The id attribute changes everytime. Now clicking this button opens up a modal. What I am trying to achieve is get this dynamic id into the modal which opens up.

Here is the full modal:

Any suggestions on this would be of great help.

asked Dec 6, 2016 at 19:38

Neha BajpaiNeha Bajpai

1671 gold badge4 silver badges10 bronze badges

4

As you didn't got really specific on what you want to do with the ID here an example on how it could be done:

$('#mymodal').on('show.bs.modal', function(e) {
    $(this).find('.modal-body').text(e.relatedTarget.id);
});

Example

Reference:

bootstrap - modal events

$('#mymodal').on('show.bs.modal', function(e) {
  var id = $(this).find('.modal-body').text(e.relatedTarget.id);
  if(id) console.log(id);
});

Open

  

    
    

      

        Header

      
      

        
One fine body…
      
      

      
    
  

answered Dec 6, 2016 at 19:54

empiricempiric

7,6956 gold badges39 silver badges47 bronze badges

by Vincy. Last modified on July 12th, 2022.

Modal window can be shown in various ways by using jQuery, Bootstrap and others. In this tutorial, we are going to show the Bootstrap modal with dynamically loaded content.

The content is stored in a Database table which is retrieved and loaded dynamically into the modal body. In a previous tutorial, we have seen how to show modal window by using core jQuery library without bootstrap.

In this example, I have shown three buttons which are used to trigger the jQuery AJAX load() method. I have specified the PHP file name used to request the dynamic content from the database, also a callback to enable modal visibility.

In a previous tutorial, we have seen how to load page content from the database using PHP and AJAX.

View Demo

HTML Code for Bootstrap Modal Window

This HTML code is used to show the buttons handling events for getting dynamic content for the Bootstrap model window. It also contains the modal window container with the modal header, footer and the body elements.

The header and the footer show the static content for displaying the title and a close button respectively. The modal body is left empty and will be loaded dynamically by clicking the buttons.

    
Bootstrap Dynamic Modal Window
    
Bootstrap
    
jQuery
    
Responsive




    

        
        

            

                ×
                
Bootstrap Dynamic Modal
                    Content
            
            

            

                Close
            
        
    

jQuery Function to Load Dynamic Content from Database

The following jQuery function will be called on the button click event. In this event, the content category is sent to the PHP code to get the content data from the database based on the category selected.

PHP code sends the response HTML to be loaded dynamically onto the modal window.

And the PHP code is,

runQuery($query);
if(!empty($result)) 
{
?>


    

View DemoDownload

↑ Back to Top