Pagination chargement au scroll
xenos92
Bonjour,
Je viens vers vous car je suis un peu perdu, mon code me fait des resultats bizarre et je n'arrive pas à trouver la cause de cela.
J'ai un systeme de pagination au scroll infini. Je veux charger 2 resultats de plus a chaque fois que j'arrive en bas de la page.
Je travaille sur le framework Codeigniter.
Mon controller avec 2 méthodes pour afficher mes resultats :
function list_question_online(){
/*
------------------------------------------------------------------------------------------------------------------------
* Fonction qui affiche les questions crees et en ligne
*
* @return Response
------------------------------------------------------------------------------------------------------------------------
*/
$data['title'] = 'Quizz';
$data['heading'] = 'Administration';
$data['getAllMatieres'] = $this->administration_model->get_all('matieres','matiere');
$data['count_questions_online'] = $this->data['count_questions_online'];
$data['count_questions_offline'] = $this->data['count_questions_offline'];
// Parametre que je passe a la vu dans une variable avec des attribut qui sont recuperer en js
$data['param_pagination'] = array(
'online' => 1,
'order_by' => "questions.id DESC",
'search_keyword' => "",
);
$conditions['where'] = array(
'questions.online' => $data['param_pagination']['online'],
);
$conditions['search_keyword'] = $data['param_pagination']['search_keyword'];
$conditions['order_by'] = $data['param_pagination']['order_by'];
$conditions['limit'] = $this->perPage;
$data['list_question'] = $this->administration_question_model->list_question_test($conditions);
$data['conteneur'] = 'administration/question/list_question_online';
$this->load->view($this->path_template, $data);
}
function ajax_load_list_question(){
/*
------------------------------------------------------------------------------------------------------------------------
* Fonction qui load en ajax les questions online en scroll infinite
*
* @return Response
------------------------------------------------------------------------------------------------------------------------
*/
$conditions = array();
// Get last post ID
$last_id = $this->input->post('id');
$online_statut = $this->input->post('online');
$order_by = $this->input->post('order_by');
$search_keyword = $this->input->post('search_keyword');
// Get post rows num
$conditions['where'] = array(
'questions.online' => $online_statut,
'questions.id <' => $last_id
);
if(!empty($search_keyword)){
$conditions['search_keyword'] = $search_keyword;
}
$conditions['returnType'] = 'count';
$data['postNum'] = $this->administration_question_model->list_question_test($conditions);
// Get posts data from the database
$conditions['returnType'] = '';
if(!empty($search_keyword)){
$conditions['search_keyword'] = $search_keyword;
}
$conditions['order_by'] = $order_by;
$conditions['limit'] = $this->perPage;
$data['list_question'] = $this->administration_question_model->list_question_test($conditions);
$data['postLimit'] = $this->perPage;
// Pass data to view
$data['conteneur'] = 'administration/question/v_ajax_load_list_question';
$this->load->view($data['conteneur'], $data);
}Ma vue list_question_online.php chargée dans la premiere methode de mon controller:
<div class ="js_load_parametre_for_bdd"
<?php if(isset($param_pagination['online'])){ echo "online=".$param_pagination['online'];} ?>
<?php if(isset($param_pagination['order_by'])){ echo 'order_by="'.$param_pagination['order_by'].'"';} ?>
<?php if(isset($param_pagination['search_keyword'])){ echo 'search_keyword="'.$param_pagination['search_keyword'].'"';} ?>
>
</div>
<div id="js_load_item">
<?php if(!empty($list_question)):?>
<ul class="bloc_question">
<?php foreach($list_question as $question): ?>
<?php require(APPPATH."require/item_question.php");?>
<?php endforeach; ?>
</ul>
<div class="clear"></div>
<div class="js_load_more" last_id="<?php echo $question->id; ?>" style="display: none;">
<img src="<?php echo base_url('asset/img/loader.gif'); ?>"/> Chargement...
</div>
<?php else: ?>
<p>Aucun résultas</p>
<?php endif; ?>
</div>Et ma vue v_ajax_load_list_question.php charger en ajax pour les resultats supplementaires :
<?php if(!empty($list_question)):?>
<ul class="bloc_question">
<?php foreach($list_question as $question): ?>
<?php require(APPPATH."require/item_question.php");?>
<?php endforeach; ?>
</ul>
<div class="clear"></div>
<?php if($postNum > $postLimit): ?>
<div class="js_load_more" last_id="<?php echo $question->id; ?>" style="display: none;">
<img src="<?php echo base_url('asset/img/loader.gif'); ?>"/> Chargement...
</div>
<?php else: ?>
<div class="js_load_more" last_id="0">
Plus de posts disponible
</div>
<?php endif; ?>
<?php else: ?>
<div class="js_load_more" last_id="0">
Plus de posts disponible
</div>
<?php endif; ?>Et voici mon script ajax pour le chargement au scroll :
function load_more_item($param){
// Le keyword est facultatif donc je mets une chaine vide si il n'existe pas
if($param.search_keyword == null){
$keyword = '';
}else{
$keyword = $param.search_keyword;
}
var form_data = {
id : $param.last_id,
online : $param.statut_online,
order_by : $param.order_by,
search_keyword : $keyword,
};
console.log('form_data');
console.log(form_data);
$.ajax({
type:'POST',
url: 'http://localhost:8890/app/armee_project/index.php/administration_question/ajax_load_list_question',
data : form_data,
beforeSend:function(){
$('.js_load_more').show();
},
success:function(data){
$('.js_load_more').remove();
$('#js_load_item').append(data);
},
error: function (jqXHR, textStatus, errorThrown) {
console.log(textStatus + ': ' + errorThrown);
}
});
}
// Permet de charger des questions suppelmentaires au scroll correspondant a a recherche
$(document).ready(function() {
console.log('LOADING : load_more_item_in_list_question.js is ready!');
// Je charge mon script que si la class pour loader exist
if($(".js_load_parametre_for_bdd").length){
var param = {
statut_online : $('.js_load_parametre_for_bdd').attr('online'),
order_by : $('.js_load_parametre_for_bdd').attr('order_by'),
search_keyword : $('.js_load_parametre_for_bdd').attr('search_keyword'),
};
$(window).scroll(function(){
var limit = $(document).height() - $(window).height();
param.last_id = $('.js_load_more').attr('last_id');
if(($(window).scrollTop() >= limit) && (param.last_id != 0)){
load_more_item(param);
}
});
}
});
Je ne comprends pas pourquoi mon script s'arrete des fois ... c'est a dire que j'ai mes 2 resultats de base qui sont affiché au chargement de la page, ensuite je scroll j'ai 2 resultats supplementaires qui s'affiche mais apres plus rien ... je n'ai pas de chargements supplementaires si il y en a ou de messages me prevenant qu'il n'y a plus de post disponibles... Ou alors les resultats sont chargés en double !
Donc premiere erreur mais je ne vois pas d'ou elle peut venir...
Ensuite lorsque je regarde mes valeurs de variable dans le script js pour la limit, j'ai des resultats bizarre. En effet si je scroll vite mes 2 resultats vont s'afficher et la limit va se mettre a jour en prenant en compte ces 2nouveaux resultats MAIS si je scroll lentement ou pour une raison qui m'echappe des fois un seul resultats va se charger la limit va se mettre a jour et ensuite le deuxieme resulats va s'aficher et la limit ce mets a nouveaux a jour... Je ne comprends pas ce comportement.
Merci d'avance si qqn peut se pencher sur mon probleme :(