title: $(document).Ready() loads Flexigrid, but not when called again by other function outside $(document).Ready()
body: <p>I have a function called "loadTimeTrackersGrid()", which loads a flexigrid. 
  The setup looks like this :</p>
  
  <pre><code> $(document).ready(function () {
          var editTrackerID = 0;
          loadTimeTrackersGrid();
  )};
  </code></pre>
  
  <p>The beginning of the function looks like this :</p>
  
  <pre><code>function loadTimeTrackersGrid(caseStatus) {
          var url = 'Utilities/DataViewHandlers/ViewTimeTrackers.ashx?CaseFileID=' + $('#hidCaseFile').val();
  
          if ($('#hidTaskID').val() !== "")
              url += '&amp;TaskID=' + $('#hidTaskID').val();
  
          if (caseStatus == "NI") {
              url += '&amp;NonInvoiced=1';
          }
  
          $('#viewTimeTrackersGrid').flexigrid({
              url: url,
              dataType: 'json',
              method: 'get',
  </code></pre>
  
  <p>As you can see it calls another page which contains a stored procedure which returns a set of rows and a jsonwriter then puts the returned columns into the flexigrid.</p>
  
  <p>But the problem I am having is outside the (document).ready(), when I have a function that calls the "loadTimeTrackersGrid()", it never reloads the flexigrid or makes a call to the file that contains the stored procedure.</p>
  
  <p>My function(that I am trying to get to work) looks like this :</p>
  
  <pre><code>        function returnInvoicedItems() {
              loadTimeTrackersGrid();
          $('.menuBtn img').parent().children('ul').removeClass('menuShow');
      }
  </code></pre>
  
  <p>And this is how I am calling "returnInvoicedItems" function:</p>
  
  <pre><code>&lt;li&gt;&lt;a href="#" onclick="returnInvoicedItems()"&gt;Non Invoiced Tracker&lt;/a&gt;&lt;/li&gt;
  </code></pre>