Welcome Guest, Not a member yet? Register   Sign In
Ajax return the main layout instead of the needed view
#1

Hi everybody, I'm using the CI 3.1.0 and get the problem with the ajax return.

1. I have a main layout named "home.php", some important codes in this file as belows:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="<?=base_url();?>favicon.ico">
    <title>IT Ebooks - Knowledge Sharing<?php if(isset($title_page)) echo " | ".$title_page ?></title>
    <link href="<?=base_url();?>css/bootstrap.min.css" rel="stylesheet">
    <link href="<?=base_url();?>css/font-awesome.min.css" rel="stylesheet">
    <link href="<?=base_url();?>css/custom.css" rel="stylesheet">
  </head>

  <body>
<div id="main-content" class="col-md-9"><!--I will load the content here based on my controller & action-->
        <?php
          if($this->router->fetch_class()=="ListBy"){
            $this->load->view("listby");
          }
          elseif($this->router->fetch_class()=="Home"){
            $this->load->view("index");
          }
          elseif($this->router->fetch_class()=="User"){
            if($this->router->fetch_method()=="Signup")
              $this->load->view('signup.php');
          }
        ?>
</div>

    <script src="<?=base_url();?>js/jquery-3.1.1.min.js"></script>
    <script src="<?=base_url();?>js/bootstrap.min.js"></script>
    <script src="<?=base_url();?>js/bootbox.js"></script>
    <script src="<?=base_url();?>js/listby.js"></script><!--this file do ajax function-->

</body>
</html>

2. My Home controller:
<?php
class Home extends CI_Controller {

public function __construct(){
parent::__construct();
$this->load->view('home.php');
}

public function index(){
//Do nothing
}
   
} //class
?>

3. My index.php file:
<section id="latest"><!--Latest upload-->
  <div class="row">
  <div class="col-md-8">
  <p class="text-center text-primary header">Latest Uploads</p>
  </div>
    <div class="col-md-4">
    <div class="form-inline">
    <label>Books per page : </label>
    <select class="form-control" id="PageSize" name="PageSize">
    <option value="12" selected>12</option>
    <option value="24">24</option>
    <option value="36">36</option>
    </select>
    </div>
    </div>
    <div class="col-md-12" id="ajax-content">Ajax content loaded</div>
  </div>
</section>

4. My ajax function file "listby.js":
$(document).ready(function(){
    $.ajax({
            type:"POST",
            url:"AjaxProcessing1/loadByCategory",
            data:"PageNo="+1+"&PageSize="+12,
            dataType: "text",
            success: function(response){
                alert(response);//I used alert to show the problem
                //$('#ajax-content').html(response);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
                alert(thrownError);
            }     
        });
})

5. My AjaxProcessing1 controller file:
<?php
class AjaxProcessing1 extends CI_Controller {

public function loadByCategory(){
$PageNo = $this->input->post('PageNo');
$PageSize = $this->input->post('PageSize');
$this->load->model('model_book');
$data['books'] = $this->model_book->get_latest_book($PageSize,$PageNo);
$this->load->view('ajax_result1',$data);
}
   
} //class
?>

6. My ajax_result1 page: 
<?php
if(isset($books)){
?>
<div class="row">
<?php foreach($books as $book): ?>
<div class="col-md-3 col-sm-6">
<a href="<?=base_url();?>/ListBy/detail/<?=$book->id?>/<?=$book->slug?>">
<img class="anhsach" src="<?=base_url();?>img/cover/<?=$book->image;?>" alt="<?=$book->slug;?>"/>
</a>
</div>
<?php endforeach; ?>
</div>
<?php
}
?>

So, until here. Everything's OK when I'm in home page, the ajax function return the ajax_result1 as expected
[Image: pic01.png]


But, when I'm in ListBy controller, the return of the ajax function is the main layout?
6. My ListBy Controller:
<?php
class ListBy extends CI_Controller {

public function __construct(){
parent::__construct();
$this->load->model('model_book');
}

public function index(){
//Nothing to do here
}

public function ListByCategory($category_id){
$data['title_page'] = "List by category";
$data['num_books'] = $this->model_book->number_of_books_bycategory($category_id);
$data['category_id'] = $category_id;
$this->load->view('home.php',$data);
}
   
} //class
?>

7. My listby.php file:
<?php
echo "<h3 class='text-center text-success'>".$num_books." book(s) found</h3>"
?>
<section id="cate">
  <div class="row">
  <div class="col-md-8">
  <p class="text-center text-primary header">Select your books view per page</p>
  </div>
    <div class="col-md-4">
    <div class="form-inline">
    <label>Books per page : </label>
    <select class="form-control" id="PageSize" name="PageSize">
    <option value="12" selected>12</option>
    <option value="24">24</option>
    <option value="36">36</option>
    </select>
    </div>
    </div>
    <div class="col-md-12" id="ajax-content">Ajax content loaded</div>
  </div>
</section>
<input type="hidden" id="total_record" value="<?=$num_books?>"/>
<input type="text" id="category_id" value="<?=$category_id?>"/>
<div class="row text-center">
    <ul class="pagination">
    
    </ul>
</div>

And the result I got when I'm in this controller (return the main layout):
[Image: pic02.png]



So, what's going on with my code. Thanks so much for any help or suggestion in advanced.

Note: I send my project link belows in case you need to see more detail
http://www.mediafire.com/file/ed1e31od1f...3Oct16.zip
Reply




Theme © iAndrew 2016 - Forum software by © MyBB