+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Using CodeIgniter (https://forum.codeigniter.com/forumdisplay.php?fid=5)
+--- Forum: Model-View-Controller (https://forum.codeigniter.com/forumdisplay.php?fid=10)
+--- Thread: template structure for tabbed modal (/showthread.php?tid=61733)
template structure for tabbed modal - jhob - 05-11-2015
I'm starting to tie my brain in knots with this one so thought I would ask here.
I need a modal dialog with tabs for 'comments', 'favourites' and 'sharing'. All will have dynamic, AJAX updatable content within them.
I'm using jquery-modal, have MVC set up separately for comments, favourites & sharing, and can get them to AJAX load in separate modals just fine.
What I can't work out is how to trigger the modal to open a specific tab when clicking on 'comments', 'share' or 'favourites' on the page and the load the content from 3 different controllers with their associated views.
Actually thinking about this now, maybe I need a modal controller instead of the separate controllers which loads the three models and manages everything from there? Does that make sense?
RE: template structure for tabbed modal - sintakonte - 05-12-2015
don't know if i understand you correctly but try to create a javascript object something like:
Code:
(function (app, $, undefined) {
}(window.app = window.app || {}, jQuery));
app.autoLoad = function() {
app.modal.autoLoad();
}
app.modal = {
autoLoad : function () {
this.attachEventsToTabs();
},
attachEventsToTabs : function()
{
$("#my-modal").on($.modal.AJAX_COMPLETE, function(){
//insert here your code for your tab clicks
$("#tab-comments").on("click",function() {
$.get("/modal/comments/", function(data) {
....
});
})
})
}
}
$(document).ready(function()
{
app.autoLoad();
});with this version you are able to attach events to your tabs
and on the serverside you need one controller which handles your tab views
a modal controller sounds fine
RE: template structure for tabbed modal - Hobbes - 05-13-2015
if i read right you are looking for something like this:
http://jsfiddle.net/elektronikLexikon/PGRhc/