如何在CodeIgniter中实现AJAX？

Question

I am trying to understand the process of implementing AJAX Query into my CodeIgniter application. The goal is to a have a clickable division (button) in a view. When this div is clicked the AJAX query is called and retrieves 5 movies from my DB and displays them in the view. Right now I have a main page with search button, this search button orders my DB by ID and then retrieves the 1st 5 movies from the DB and displays them on a new page. The function I am trying to implement should retrieve the next 5 movies and replace the 1st 5 movies without reloading the page.

Below is all the code I assume you should take a look at, due to its necessity. Under each part of the code a short summary is provided. And at the end I try to explain what I don't understand and what I am asking you to help with.

Main Page - Controller xampInstallFolder/htdocs/application/obs/controllers/main.php

public function generate_suggestions() {

$this->db->order_by("id","desc");
$pages = $this->db->query('SELECT * FROM movies LIMIT 5');          
$data['pages'] = $pages;
$this->load->view('results_v', $data);
}

This function is called when my Search button on the main page is clicked. Right now it doesn't accept any criteria for the query it only retrieves the first 5 movies in the db. Then I take the movies and store them in the pages array and load the new view with the array provided in data

Results Page - View *xampInstallFolder/htdocs/application/obs/views/results_v*

<div id="listA">
  <table>
    <!-- Function that splits the array in $pages into the first 5 movie suggestions -->
    <?php foreach ($pages->result() as $row): ?>
      <a style="display:block" href="<?php echo base_url('core/detail/'.$row->id) ?>">
        <div id="suggested" onmouseover="" style="cursor: pointer;">
          <div id="info">  
              <p><b><?php echo $row->name ?></b></p>
          </div>
          <div class="details">
                <p><?php echo $row->summary ?></p>
          </div>
        </div    
      </a>    
    <?php endforeach; ?>
  </table>
</div>

<div id="next_btn" style="display: block;">
  <p>Click here to display next 5 movies</p>         
</div> 

I have a div listA where I display the 5 movies using a for each loop on the pages array. I have much more div and information, but I was trying to keep it simple.

Javascript xampInstallFolder/htdocs/ASSETS/obs/js/myscripts.js

$( "#next_btn" ).click(function() {

    var xmlhttp;

    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }

    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("listA").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","getnext5.php?q="true);
    xmlhttp.send();

});

In the head of my results view I link the javascript with this function. It triggers when the next_btn div is clicked. I got the code from w3schools and from what I understood you need to provide the element in which the result is displayed ( listA ) and the file where the query is stored ( getnext5.php)

getnext5.php Where do I put this file?

$con = mysqli_connect('localhost','root','root','obs2');
if (!$con)
  {
  die('Could not connect: ' . mysqli_error($con));
  }

mysqli_select_db($con,"obs2");
$sql="SELECT * FROM user WHERE id > 5";

$result = mysqli_query($con,$sql);

echo "<table>";
  while($row = mysqli_fetch_array($result))
  {
          <a style="display:block" href="<?php echo base_url('core/detail/'.$row->id) ?>">
            <div id="suggested" onmouseover="" style="cursor: pointer;">
              <div id="info">  
                  <p><b><?php echo $row->name ?></b></p>
              </div>
              <div class="details">
                    <p><?php echo $row->summary ?></p>
              </div>
            </div    
  }
echo "</table>";

Here is the core function. I tried to adjust the code from w3schools , but I am not sure if it is correct. My DB is called obs2, but I am not sure if I should have it in both mysqli_connect and mysqli_select_db statements. I also know that I have to figure out how to make it always load the next 5 movies in the list, but right now I just force it on id>5 . And then I have the style for the $result . I think the table and `while loop are coded properly, but I don't know how to turn the divs, anchors and original php echoes into the same syntax .

If you made this is far thank you very much for reading through. I'd say the only part I need help with is the getnext5.php . Mostly the syntax. And location, where should the getnext5.php file be stored? I don not think that the other parts of the code are wrong. But obviously if you spot anything in there please let me know as well. Again thanks for reading. I'm looking forward to your replies. If you'd need any other information just ask for it Ill add it.

Answer 1

I only read through the last script, and I corrected some mistakes you made. You can put that file anywhere pretty much. You can copy the code and paste it into a controller class or a views page.

<?php // I just decided to start here

mysqli_select_db($con,"obs2");
$sql="SELECT * FROM user WHERE id > 5"; # This is an integer, no quotes necessary.

$result = mysqli_query($con,$sql);

echo "<table>";

while($row = mysqli_fetch_array($result))
{ 
?> <!-- Note how we stop php right before we start printing html, since you have nested php tags throughout this block of markup -->

      <a style="display:block" href="<?=base_url('core/detail/'.$row->id)?>">
        <div id="suggested" onmouseover="" style="cursor: pointer;">
          <div id="info">  
              <p><b><?=$row->name?></b></p>
          </div>
          <div class="details">
                <p><?=$row->summary?></p> <!-- Protip, you may use <? and ?> instead of <?php and ?>. You may also use <?= as a shortcut to the "echo" function -->
          </div>
        </div>    
 <?php 
} // We are opening up our PHP tags again
echo "</table>";
?>

Answer 2

It seems that you're kindof all over the place with your code. Instead of answering your question specifically, I'm going to give you some advice as to how you can use AJAX with codeigniter much easier. I'm not saying this is the best solution, but it's much more organized and clean that what you have going on. Hopefully it will point you on the right direction.

Let's start from the backend and then move towards the front.

First, a method in a controller which queries the movies in the database. Notice the parameters which allow us to ask for any subset of movies, and not just the first 5. (And yes, I'm only including the important lines of code instead of everything.)

public function generate_suggestions($start = 0, $count = 5) {

    $pages = $this->db->query('SELECT * FROM movies LIMIT ' . $start . ',' . $count);

    // send back the view as a simple HTML snippet (the <table>, perhaps?)
}

Now we need some Javascript that can call this function on the server. Since the function sends back an HTML snippet, we can just stick that snippet of html code into the page. JQuery makes all of this very easy, so you can avoid the complicated XMLHttpRequest stuff.

<script type="text/javascript">
    var nextstart = 6;
    var movies_per_page = 5;

    $( "#next_btn" ).click(function() {

        // this next line makes the ajax call for us, and the inline function
        // is called when the response comes back from the server

        $.get("controller/generate_suggestions/"+nextstart+"/" + movies_per_page,
        function(data) {

            // data is what comes back from the ajax call
            // here it is the snippet of html, so let's display it as is   
            $( "#listA" ).html(data);

            nextstart += movies_per_page; // so that the next click will load the next group of movies
        });
    });
</script>

Now we just need to populate the table when the page first loads, and you can do that by calling the same ajax call on page load with a similar $.get ajax call.

Once you understand all of this and have it working, then you should look into JSON, as it is a much better way of transferring data with ajax. And jQuery makes working with JSON much easier, too.