Welcome Guest, Not a member yet? Register   Sign In
Bootstrap Dynamic Modal View With AJAX
#1

I'm using codeigniter v3 with bootstrap v3.
In a view file, I've a table for user messages and for every message, there is a button to show messages details with bootstrap modal. I handle this in a way that I think is not efficient! In a foreach loop, I put <tr> element and at the bottom (before ending loop), I put whole structure of bootstrap modal. In fact, If there is 7 rows in table, when I view page source, there is 7 modals with different details based on every message.
My question is: how could I handle this with ajax calling? I mean, I put a modal (as template) after the loop, and when clicked on details button, based on message id, use ajax calling and put details of message in modal. (a dynamic  modal with ajax calling)
thanks.
Reply
#2

in your ajax call, echo a view template

$myModal1 = $this->load->view('myModal1', $data=array(), $return=true);

this $return will not render the view but return you the view. after that,

echo json_encode(array('view' => $myModal1));

this code is from scratch. look the doc to see witch param is for $return Smile
Reply
#3

(This post was last modified: 03-13-2016, 07:59 AM by ivantcholakov. Edit Reason: the additional link )

https://github.com/nakupanda/bootstrap3-dialog
https://nakupanda.github.io/bootstrap3-dialog/
Reply
#4

(This post was last modified: 03-13-2016, 02:03 PM by PaulD. Edit Reason: Quick typo )

Hi,

It is actually very easy.

In your main view you have a single modal window view, something like:

Code:
<!-- Modal -->
<div class="modal fade" id="preview" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
 <div class="modal-dialog" role="document">
   <div class="modal-content">
     <div class="modal-header">
       <button type="button" class="close text-danger" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times; <small>Close</small></span></button>
     </div>
     <div class="modal-body" id="modal-content">
       <img class="loader" src="<?php echo base_url('images/loaders/loader1.gif'); ?>" alt="" /> Loading Preview...
     </div>
   </div>
 </div>
</div>

Your controller calls your view like normal, but include some javascript that, on click, loads the modal with a loader message, then opens the modal window, ajax's to get the real content (or error message), and then loads the modal content with that information.

Something like

Code:
<script>
jQuery(document).ready(function(){
"use strict";

// assign js function to class
$('.preview_product').click(preview);

function preview() {
event.preventDefault();
// collect data - either from forms or from data variables
var id = $(this).data('id');

// load the modal content with a loader gif and message
$('#modal-content').html('<img class="loader" src="/images/loaders/loader1.gif")." alt="" /> Loading Preview...');

// show modal window
$('#preview').modal('show');

// do the ajax bit
var post_data = {
'product_id': id,
};
$.post('ajax_get_preview'), post_data, function(theResponse){

// load the modal window with the relevant content returned
$('#modal-content').html(theResponse);
});
}

});
</script>

This is not necessarily working code, nor a full working example. The examples here are just simplified example bits from sites I have doing the same thing. My controller also loads the modal with the CSRF token for CSRF validation too. I also usually include some JS that updates the loader message should the ajax call fail. But as I said, have chopped this down for simplicity and added comments to help. One modal window - fired from a single class - content loaded through Ajax call to get content.

Once you get the hang of it, it is not only powerful, it really brings modal windows to life. I find myself using them more and more now, for all sorts of things.

Hope that helps.

Paul.
Reply
#5

I find an easy and I think better way in the bootstrap official website: Using data- attribute.
I show it with an working example for who that could not achieve better solution:

Suppose we want to fill a table body with some data (as my problem):

PHP Code:
//just table body code
<tbody>
 
 <?php foreach($fields as $field): ?>
    <tr>
      <td><?php $field->some_field?></td>
      //other <td> elements
      <td>
         <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" 
           data-time="<?php echo $field->time?>">Show Details</button>
      </td>
    </tr>
  <?php endforeach; ?>
</tbody> 

So in a loop, I read data (that in controller, get with model's method, and pass to view with $data['fields']). Now for showing some details in modal, I use HTML5 data attribute. Suppose, I want to show time in the modal. As you see in above code, I put time field in data-time:
data-time="<?php echo $field->time; ?>"
Now I create a modal as template (you could see whole modal structure in bootstrap official website) and put it out of loop (one modal for all table rows; dynamic data). in the following code, I put an element in the modal body (as a placeholder):

Code:
//... in the modal body section
<h4 id="time"></h4>

This element have no content, because I want to retrieve every row time filed and put it in this element. Note this will be practical with defining an id. Now some script:

Code:
//first load jquery
<script type="text/javascript">
   $(document).ready(function(){
    $('#myModal').on('show.bs.modal', function(event){
        var btn = $(event.relatedTarget);
                            
        var time = btn.data('time');
                
        $('#time').text(time);
                        
    });
   });
</script>

first, find which button is clicked (var btn = $(event.relatedTarget);)
second, get the time data attribute (var time = btn.data('time');)
and then put the data value in the element which set in the modal with an id ($('#time').text(time);)
You could define more data attribute and retrieve in this way.
Reply
#6

Yes that is a good way for certain content, but by using ajax you can fetch data you cannot keep in a data attribute, or not already loaded into the page. For instance I might have a table of customers, clicking on a customer name might fetch the entire activity history for that customer loaded into the ajax modal window. In fact there is no limit to what you show in the modal window.

Paul.
Reply
#7

(This post was last modified: 01-02-2017, 09:35 AM by next468.)

Hello! I really liked your story. Thank you!
sprint customer service chat
Reply




Theme © iAndrew 2016 - Forum software by © MyBB