illmaster illmaster - 2 months ago 5
HTML Question

How to change displayed html content in view using jquery - codeigniter

I'm not so sure about how to type this question title, but anyway

I have code like this in my view called content.php

<div class="fix single_content floatleft">
<h2><img src="<?php echo base_url('assets/images/New.png')?>" alt="" width="24" height="24"></img><a href="<?php echo base_url('index.php/Main_Controller/loadKeluhan')?>" >New</a> </h2>
<?php include 'tableLoad.php' ?>
<p class="viewall"><a href="#">view more </a> &nbsp;<i class="fa fa-hand-o-right"></i></p>
</div>


And in its looks like this in tableLoad.php

<div class="fix"><ul id="newTable"><?php
$i=0;
while($i<count($array)){
echo '<li>
<div class="entry_name floatleft"><a href="pages/single.html"><img src="assets/images/mozilla.png" alt="">'.$array[$i].'</a></div>
<div class="download-count floatright"><i class="fa fa-download"></i> 4578</div>
</li>';
$i++;
}
?></ul></div>


$array[i] is a forwarded variable from my controller which have list of item I need from my database.

I want to have it refreshed every 2 second so it will change the display if something changed from the database. I use my code in jQuery like this to do it:

$(document).ready(function(){setInterval(function(){
$('#newTable').html("<?php include 'tableLoad.php'; ?>")
}, 2000);});


The problem is that everytime jQuery code run, it show nothing and there is no error report in browser's console. The codes in php run well, but the one from jQuery did not.

Can anybody please give me some enlightment.
Thanks before and sorry for my bad English

SOLVED



Solution :

I change my js code to Ajax and call function from controller with it like poonam said. The js file become like this :

$(document).ready(function(){
setInterval('autoRefresh_div()', 2000);
});
function autoRefresh_div()
{
$.ajax({
dataType:'text',
type: "POST",
url: BASE_URL+'index.php/Main_Controller/loadKeluhan',
success: function (response){

$("#newTable").html(response);

}
});}


with loadKeluhan is a function in my Main_Controller to load tableLoad view and pass new array value to it.

Answer

You should use load()

Try this:

 function autoRefresh_div()
 {
      $("#newTable").load("tableLoad.php");// a function which will load data from other file after x seconds
  }

  setInterval('autoRefresh_div()', 2000); // refresh div after 2 secs

And use this:

    <div class="fix single_content floatleft">
            <h2><img src="<?php echo base_url('assets/images/New.png')?>" alt="" width="24" height="24"></img><a href="<?php echo base_url('index.php/Main_Controller/loadKeluhan')?>" >New</a> </h2>
         <div class="fix"><ul id="newTable">
            <?php include 'tableLoad.php' ?>   
         </ul>         
         </div>   
            <p class="viewall"><a href="#">view more </a> &nbsp;<i class="fa fa-hand-o-right"></i></p>
          </div>

Get only <li> from tableLoad.php.

Similarly you can use $.ajax() or $.post() etc instead of load() function and put the response in div or ul.

With $.ajax()

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
   <script>
 function autoRefresh_div()
 {

    $.ajax({
            dataType:'text',
            type: "POST",
            url: 'url_to_your_file or function',
            success: function (response){

               $("#newTable").html(response);

              }
        });
  }

  setInterval('autoRefresh_div()', 2000); // refresh div after 2 secs
            </script>
Comments