Codeigniter加载更多内容按钮

Question

I am current creating an online examination system. I wanted to add a load more functionality so that the examiners will not be overwhelmed with a lot of questions on page load. I got my codes from different sources and tried to combine them based on what I know.

Everything works great BUT the problem is I used html tags in my controller which I think is not right?? based on what MVC concept is concern. I tried to directly put the html codes in my views page but I get looping issue :(. Here is my code.

MODEL

    public function getQuestion1($page, $id){
    $offset = 10*$page;
    $limit = 10;
    $sql = "select * from question_bank where examtype_id = $id limit $offset ,$limit";
    $result = $this->db->query($sql)->result();
    return $result;
}

CONTROLLER

    public function verbal(){
    $this->load->view('examination/includes/header');
    $this->load->view('examination/verbal_meaning');
    $this->load->view('examination/includes/footer');
}


public function getQuestion(){
    $page =  $this->input->get('page');
    $questions = $this->examination_model->getQuestion1($page,1);
    foreach($questions as $r) {
        echo "<div class='col-lg-6'>
        <br/>
        <label>"
        .$r->question_id.") ".$r->question.
        "</label>
        <div class='radio'>
        <ol type='1'>
        <div class='col-lg-6'>
        <li>
        <label>
        <input type='radio' name='verbal_q5' id='' value='1'>"
        .$r->option1.
        "</label>
        </li>
        <li>
        <label>
        <input type='radio' name='verbal_q5' id='' value='2'>"
        .$r->option2.
        "</label>
        </li>
        <li>
        <label>
        <input type='radio' name='verbal_q5' id='' value='2'>"
        .$r->option2.
        "</label>
        </li>
        </div>
        <div class='col-lg-6'>
        <li>
        <label>
        <input type='radio' name='verbal_q5' id='' value='3'>"
        .$r->option4.
        "</label>
        </li>
        <li>
        <label>
        <input type='radio' name='verbal_q5' id='' value='4'>"
        .$r->option5.
        "</label>
        </li>
        </div>
        </ol>
        </div>
        </div>";
    }
    exit;
}

VIEW

<div class="col-lg-12">
  <div class="container-fluid">
    <div class="row">
      <div id="ajax_table">

      </div>
    </div>
  </div>
</div>

JS

    <script>
  $(document).ready(function(){
    getquestion(0);
    $("#load_more").click(function(e){
      e.preventDefault();
      var page = $(this).data('val');
      getquestion(page);
    });
  });
  var getquestion = function(page){

    $.ajax({
      url:"<?php echo base_url() ?>examination/getQuestion",
      type:'GET',
      data: {page:page}
    }).done(function(response){
      $("#ajax_table").append(response);
      $('#load_more').data('val', ($('#load_more').data('val')+1));
      scroll();
    });
  };
  var scroll  = function(){
    $('html, body').animate({
      scrollTop: $('#load_more').offset().top
    }, 1000);
  };
</script>

Answer 1

What you should to is:

Create one php veriable with all tags using loop rather than directly echo the content to ajax. And then send the variable as a response to ajax and then append the html content to view within the element ajax_table.

This would be the best and proper way.