title: auto refresh the div with dynamic data
body: <p>I have a div section. I want to reload this section every 5 seconds. How do I do this. Here is my code:</p>
  
  <pre><code>&lt;script&gt;
      $("#send_parent_general_chat").submit(function() 
          {
              var rec = $("#data").val();
              var msg = $("#msg").val();
              var dataString = 'rec='+ rec + '&amp;msg='+ msg;
  
              $.ajax({
                  type: "POST",
                  url: "&lt;?php echo base_url(); ?&gt;" + "Client/send_general_parent_chat_msg/&lt;?php echo $per_job-&gt;id;?&gt;",
                  data: dataString,
                  cache: false,
                  success: function(result){
                      $('#display_general_msg').html(result);
                      $('#send_parent_general_chat')[0].reset(); //form reset
  
                  }
              });
              return false;
          }); 
  &lt;/script&gt;
  
  
  &lt;script&gt;
      $(document).ready(function(){
          setInterval(function(){
              //  alert("===111==");
              $("#display_general_msg").load('&lt;?php echo base_url(); ?&gt;" + "Client/refresh_general_parent_chat_msg/&lt;?php echo $per_job-&gt;id;?&gt;')
          }, 5000);
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>I have created one more controller for refreshing the div I have used the time interval function but it is not loading, it shows this error:</p>
  
  <p><strong>Access forbidden!
  You don't have permission to access the requested object. It is either read-protected or not readable by the server.
  If you think this is a server error, please contact the webmaster.
  Error 403</strong>
  I need to refresh only the div content not the whole page.
  How do I achieve this?</p>