template parser - wrong placement of include parts in template

[eluser]jupiter1031[/eluser]
The issue that I have is that in my view file $sidebar and $footer show up in a different location, not where {sidebar} and {footer} are placed.
Feel free to see the results at
http://sunnydays.me/product/test
If you look the result with code view and look for 'sidebar' you will see it is in a different place as its placeholder {sidebar} intended to appear.

Code:

function test()
{
  $data = array();
  
  if($query = $this->product_model->get_records())
  {
   $this->load->library('parser');
  
   $header = $this->load->view('modules/header_left_sidebar',TRUE);
   $top_buttons = $this->load->view('modules/top_buttons',TRUE);
   $sidebar = $this->load->view('modules/sidebar',TRUE);
   $footer = $this->load->view('modules/footer',TRUE);
   $data = array(
   'header' => $header,
   'top_buttons' => $top_buttons,
   'records' => $query,
   'sidebar' => $sidebar,
   'footer' => $footer,
   );
  
   $this->parser->parse('product/tables1',$data);
  }
  else
  {
   $this->product_create();
  }
}

Here is the view file

Code:

{header}
[removed][removed]
[removed][removed]
[removed]
$(document).ready(function() {
/* Table Sorter */
$("#sort-table")
.tablesorter({
  widgets: ['zebra'],
  headers: {
              // assign the secound column (we start counting zero)
              0: {
                  // disable it by setting the property sorter to false
                  sorter: false
              },
              // assign the third column (we start counting zero)
              6: {
                  // disable it by setting the property sorter to false
                  sorter: false
              }
          }
})

.tablesorterPager({container: $("#pager")});

$(".header").append('<span class="ui-icon ui-icon-carat-2-n-s"></span>');


});

  /* Check all table rows */

var checkflag = "false";
function check(field) {
if (checkflag == "false") {
for (i = 0; i < field.length; i++) {
field[i].checked = true;}
checkflag = "true";
return "check_all"; }
else {
for (i = 0; i < field.length; i++) {
field[i].checked = false; }
checkflag = "false";
return "check_none"; }
}


[removed]
<div id="sub-nav">
<div class="page-title">
  <h1>Tables</h1>
  <span><a href="#" title="Layout Options">Home</a> > <a href="#" title="Two column layout">Dashboard</a> > Tables</span> </div>
{top_buttons} </div>
<div id="page-layout">
<div id="page-content">
  <div id="page-content-wrapper">
   <div class="inner-page-title">
    <h2>Some Examples</h2>
    <span>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</span> </div>
   <div class="hastable">
    &lt;form name="myform" class="pager-form" method="post" action=""&gt;
     <table id="sort-table">
      <thead>
       <tr>
        <th>&lt;input type="checkbox" value="check_none" class="submit"/&gt;&lt;/th>
        <th>Code</th>
        <th>Name</th>
        <th>Description</th>
        <th>Featured</th>
        <th>Active</th>
        <th>Options</th>
       </tr>
      </thead>
      <tbody>
      
      {records}
      <tr>
       <td class="center">&lt;input type="checkbox" value="1" name="list" class="checkbox"/&gt;&lt;/td>
       <td>{code}</td>
       <td>{name}</td>
       <td>{description_short}</td>
       <td>{featured_yn}</td>
       <td>{active_yn}</td>
       <td><a class="btn_no_text btn ui-state-default ui-corner-all tooltip" title="Edit this example" href="&lt;?php echo site_url().'/product/product_view/' ?&gt;{product_id}"> <span class="ui-icon ui-icon-wrench"></span> </a> <a class="btn_no_text btn ui-state-default ui-corner-all tooltip" title="Favourite this example" href="#"> <span class="ui-icon ui-icon-heart"></span> </a> <a class="btn_no_text btn ui-state-default ui-corner-all tooltip" title="Add to shopping card example" href="#"> <span class="ui-icon ui-icon-cart"></span> </a> <a class="btn_no_text btn ui-state-default ui-corner-all tooltip" title="Delete this example" href="#"> <span class="ui-icon ui-icon-circle-close"></span> </a></td>
      </tr>
      {/records}
       </tbody>
      
     </table>
     <div id="pager"> <a class="btn_no_text btn ui-state-default ui-corner-all first" title="First Page" href="#"> <span class="ui-icon ui-icon-arrowthickstop-1-w"></span> </a> <a class="btn_no_text btn ui-state-default ui-corner-all prev" title="Previous Page" href="#"> <span class="ui-icon ui-icon-circle-arrow-w"></span> </a>
      &lt;input type="text" class="pagedisplay"/&gt;
      <a class="btn_no_text btn ui-state-default ui-corner-all next" title="Next Page" href="#"> <span class="ui-icon ui-icon-circle-arrow-e"></span> </a> <a class="btn_no_text btn ui-state-default ui-corner-all last" title="Last Page" href="#"> <span class="ui-icon ui-icon-arrowthickstop-1-e"></span> </a>
      <select class="pagesize">
       <option value="10" selected="selected">10 results</option>
       <option value="20">20 results</option>
       <option value="30">30 results</option>
       <option value="40">40 results</option>
      </select>
     </div>
    &lt;/form&gt;
    <i class="note">Sort multiple columns simultaneously by holding down the shift key and clicking a second, third or even fourth column header!</i> </div>
   <div class="clear"></div>
   {sidebar} </div>
</div>
{footer}</div>
&lt;/body&gt;&lt;/html>