This is the first time I've tried MVC. I am using Code Igniter for the MVC along with jQuery and jQueryUI for the front end. I have the basic idea of MVC and I have a working site. Conceptually, though, I want to make sure that I stay as rigid as possible with respect to the MVC idea.
I have a main skin view and then use load->view("skin", $contents) where $contents is an associative array containing other views.
As a result, I have one page (called "admin Console") in which the skin view is called and $content contains more HTML. I want a jQueryUI dialog box to be used only on that page. To create this, I have a <script> tag that contains the dialog box javascript in the admin console view. This ends up with a <script> tag in the middle of a bunch of HTML that includes when the final page is rendered.
The end result of this is that I am lazy loading the javascript but it may result in multiple jQuery $(document).ready(function(){...}); calls.
I have everything working, but I am not sure if my implementation is true to the MVC principles. Is it better to use the method I am using in which the javascript is only loaded when it's being used or should I put the javascript somewhere else? Am I making mountains out of mole hills?
My Relevant Controller Code:
function index(){
$tree = $this->mainModel->getUnitTreeMeta();
$treeOutput = $this->load->view('unit_tree', array('units' => $tree), TRUE);
$pages = $this->mainModel->getPages();
$console = $this->load->view('admin_console', array('units'=>$tree, 'pages'=>$pages), TRUE);
$content = array(
'title' => 'Admin Console',
'css' => link_tag(array('href' => 'css/admin.css', 'rel' => 'stylesheet', 'type' => 'text/css', 'media'=> 'screen'))."
",
'navbar' => 'navbar',
'content' => $console,
'rightSidebar' => $treeOutput,
'footer' => ''
);
$this->load->view('skin', $content);
}
skin.php contains the line <?=$content?> which is the HTML/JS contained in the admin_console view:
<div>
<div>
...
<a href="" id="addUnit" class="smallLinks">Add a New Unit</a>
</div>
</div>
<!-- DIALOG BOXES -->
<div id="addUnitDialog" title="Add A New Unit">
<?php echo form_open('admin/add_unit'); ?>
Unit Name: <br />
<?php echo form_input("unitName", "");?>
<br />
Content: <br />
<?php echo form_textarea("content", "");?>
<?php echo form_close();?>
<div id="addUnitResponse"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$( "#addUnitDialog" ).dialog({
autoOpen: false,
minWidth: 680,
buttons: {
"add Unit" : function(){
var unitName = $("input", this).val();
var content = $("textarea", this).val();
$.ajax({
url : "add_unit",
type : "POST",
success :function(){
location.reload();
},
error : function(){
$("#addUnitResponse").text("error");
}
});
}
}
});
$("a#addUnit").click(function(){
$( "#addUnitDialog" ).dialog( "open" );
return false;
});
});
</script>
