jqgrid in MVC not working

Am currently learning how to use jqgrid in Zend MVC structure.

Below is my js script.

$(function() {
 //tabs
 $("#tabs").tabs();
 //Accordion
 $("#accordion").accordion({ header: "h3" });
 //place jqgrid in accordian.
 $("#list1").jqGrid({     
     url:'/../../artist/index',  
     datatype: "json",    
     colNames:['ID','Artist', 'FullName', 'Album'],     
     colModel:[
         {name:'id',index:'id', width:55},
         {name:'artist_code',index:'artist_code', width:90},
      {name:'artist_name',index:'artist_name' , width:100},
         {name:'artist_album',index:'artist_album', width:80, align:"right"}  
     ],     
     pager: $('#pager1'),    
     rowNum:10,     
     rowList:[10,20,30],     
     imgpath: 'themes/sand/images',     
     sortname: 'id',    
     viewrecords: true,     
     sortorder: "desc",
     caption: "Artists"
 });
});

In my artist controller index action I have this code

// action body
 $this->view->title = "Artist";
 $this->view->headTitle($this->view->title, 'PREPEND');
 $artist = new Model_DbTable_Artist();     
 return Zend_Json::encode($artist->fetchAll());

However the Jquery grid plugin does not seem to show up on my page despite having it in my view script

......................
<div id="tabs-1">
  <div id="accordion">
   <div>
    <h3><a href="#">Artist</a></h3>
    <div>    
    <!-- the grid definition in html is a table tag with class 'scroll' -->
     <table id="list1" class="scroll" cellpadding="0" cellspacing="0"></table>
    <!-- pager definition. class scroll tels that we want to use the same theme as grid -->
     <div id="pager1" class="scroll" style="text-align:center;"></div>     
    </div>
   </div>
   <div>
    <h3><a href="#">Album</a></h3>
    <div>Phasellus mattis tincidunt nibh.</div>
   </div>   
  </div>
</div>
<div id="tabs-2">...........

What am I missing?

ansaurus

tags:

views:

answers:

jqgrid in MVC not working

related questions