Load Dynamic Content On Bootstrap Modal Popup

In this tutorial we will learn how to load dynamic content on bootstrap modal popup on a button click using PHP Codeigniter.You can use the login in any other programming language too.

In the previous article we explain about what is Modal and its uses, Checkout the article for more details.

Bootstrap Modal Popup Plugin

Dynamic Content On Bootstrap Modal Popup

STEPS TO OPEN POPUP ON BUTTON CLICK

STEP 1 :

Create a page with name index.php inside application->controller and write a query to get data from database table.

  • In this controller i am loading front_model to perform my database actions.
  • A function name getData is used to fetch data from the table users which i also mentioned.
  • Loading a view page with name index and passing the fetched data to index view page. 
<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Index extends CI_Controller {

	public function  __construct() 
	{ 
		parent:: __construct();
		error_reporting(E_ALL ^ E_NOTICE);  
		$this->load->model(array('front_model'));
	} 
	
	/* * *********************************************************************
	 * * Function name : index
	 * * Developed By : Tejaswi
	 * * Purpose  : This function used for Index
	 * * Date : 09 August 2021
	 * * **********************************************************************/
	public function index()
	{	
        
		$data['ALLDATA']          =   $this->front_model->getData('users');

		$this->load->view('index',array(),$data);
	}

STEP 2 : 

Create a modal with name front_model inside application->modals and write the query to get data.

<?php
if(!defined('BASEPATH')) exit('No direct script access allowed');
class Front_model extends CI_Model
{
	public function __construct()
	{
		parent::__construct(); 
		$this->load->database(); 
	}
	
	
	/***********************************************************************
	** Function name: getData
	** Developed By: Tejaswi
	** Purpose: This function used for get All Data
	** Date : 09 August 2021
	************************************************************************/
	public function getData($tableName=''')
	{  
		$this->db->select('*');
		$this->db->from($tableName);
		
		$query = $this->db->get();
		//echo $this->db->last_query();die;
		if($query->num_rows() > 0):
			return $query->result_array();
		else:
			return false;
		endif;
	}	// END OF FUNCTION
STEP 3 : 

Now create a view page with name index.php inside application->views and create a table and load the dynamic data using foreach loop.

In the below code we are loading dynamic data which we fetched from the controller and passed to view page.

  • While loading dynamic data we are also loading dynamic button adding attributes  data-toggle=”modal” data-target=”#userModal<?php echo $i?>” 
  • Where data-toggle = modal says that the button open a popup when we click on it.
  • data-target=”#userModal<?php echo $i?>”  says that we are targeting a div or sectiion or anything that has an id with userModal and open that popup if it matches 
  • Here <?php echo $i?> defines dynamic number which gives us dynamic id for each button.with this we can easily load dynamic content.
  • The code after the comment Loading Dynamic Modal loads dynamic modal having id as the edit button. So when you click on edit button automatially it checks the targeting id in the div and opens that popup with dynamic content.
  • This logic can be used in any other programming labguage, You just need to use foreach or for loop making the id dynamic and loading the data.
// Load table with dynamic data

<table class="table border-table">
   <thead>
      <tr>
         <th width="5%">Sr.No.</th>
         <th width="50%">Name</th>
         <th width="30%">Email</th>
         <th width="10%">Number</th>
         <th width="10%" class="center">--</th>
      </tr>
   </thead>
   <tbody>
      <?php if($ALLDATA <> ""): $i=$first; foreach($ALLDATA as $ALLDATAINFO): ?>
      <tr>
         <td><?=$i++?></td>
         <td><?=stripslashes($ALLDATAINFO['name'])?></td>
         <td><?=stripslashes($ALLDATAINFO['email'])?></td>
         <td><?=stripslashes($ALLDATAINFO['mobile'])?></td>
         <td>
            <li><a  data-toggle="modal" data-target="#userModal<?php echo $i?>" href="javascript:void(0)"><i class="fa fa-edit"></i> Edit</a></li>
         </td>
      </tr>
      <?php endforeach; else: ?>
      <tr>
         <td colspan="4" style="text-align:center;">No Data Available In Table</td>
      </tr>
      <?php endif; ?>
   </tbody>
</table>


// Loading Dynamic Modal

<?php if($ALLDATA <> ""): $i=$first; foreach($ALLDATA as $ALLDATAINFO): ?>
<div class="modal fade" id="userModal<?php echo $i?>" role="dialog">
   <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Modal Header</h4>
         </div>
         <div class="modal-body">
            <p><?=stripslashes($ALLDATAINFO['name'])?></p>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
         </div>
      </div>
   </div>
</div>
<?php endforeach; endif; ?>

Dynamic Content On Bootstrap Modal Popup

This process will load dynamic content on a button click and open popup.If you face any issue just let me know through your comments or join us in our telegram group for instant response. 

Related articles:

For more updates:

Follow us on our Facebook page :
Facebook

Do Follow my Instagram page for more updates :
Instagram

Join Our Telegram group for more updates :

Telegram

Leave a Reply

Your email address will not be published. Required fields are marked *

The maximum upload file size: 2 MB. You can upload: image, document. Links to YouTube, Facebook, Twitter and other services inserted in the comment text will be automatically embedded.