Bootstrap Dynamic Modal View With AJAX |
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.
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
03-13-2016, 07:58 AM
(This post was last modified: 03-13-2016, 07:59 AM by ivantcholakov. Edit Reason: the additional link )
03-13-2016, 02:00 PM
(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 --> 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> 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.
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 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 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 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.
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.
Hello! I really liked your story. Thank you!
sprint customer service chat |
Welcome Guest, Not a member yet? Register Sign In |