Bootstrap Dynamic Modal View With AJAX - Printable Version +- CodeIgniter Forums (https://forum.codeigniter.com) +-- Forum: Using CodeIgniter (https://forum.codeigniter.com/forumdisplay.php?fid=5) +--- Forum: Best Practices (https://forum.codeigniter.com/forumdisplay.php?fid=12) +--- Thread: Bootstrap Dynamic Modal View With AJAX (/showthread.php?tid=64581) |
Bootstrap Dynamic Modal View With AJAX - pb.sajjad - 03-07-2016 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. RE: Bootstrap Dynamic Modal View With AJAX - keulu - 03-07-2016 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 RE: Bootstrap Dynamic Modal View With AJAX - ivantcholakov - 03-13-2016 https://github.com/nakupanda/bootstrap3-dialog https://nakupanda.github.io/bootstrap3-dialog/ RE: Bootstrap Dynamic Modal View With AJAX - PaulD - 03-13-2016 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. RE: Bootstrap Dynamic Modal View With AJAX - pb.sajjad - 03-15-2016 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. RE: Bootstrap Dynamic Modal View With AJAX - PaulD - 03-15-2016 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. RE: Bootstrap Dynamic Modal View With AJAX - next468 - 11-29-2016 Hello! I really liked your story. Thank you! sprint customer service chat |