Partage
  • Partager sur Facebook
  • Partager sur Twitter

Pagination chargement au scroll infini

Sujet résolu
xenos92
    7 octobre 2018 à 14:53:39

    Bonjour,
    Je viens vers vous car je suis un peu perdu, mon code me fait des résultats bizarre et je n'arrive pas à trouver la cause de cela.
    J'ai un système de pagination au scroll infini. Je veux charger 2 résultats 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 résultats :
    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 premiers méthode 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 résultats supplémentaires :
    <?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’arrête des fois ... c'est a dire que j'ai mes 2 résultats de base qui sont affiché au chargement de la page, ensuite je scroll j'ai 2 résultats supplémentaires qui s'affichent mais après plus rien ... je n'ai pas de chargements supplementaires si il y en a ou de messages me prévenant qu'il n'y a plus de post disponibles... Ou alors les resultats sont chargés en double !
    Donc première 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 résultats bizarre.
    En effet si je scroll vite mes 2 résultats vont s'afficher et la limit va se mettre a jour en prenant en compte ces 2 nouveaux résultats MAIS si je scroll lentement ou pour une raison qui m’échappe des fois un seul résultats va se charger la limit va se mettre a jour et ensuite le deuxième résultats va s’afficher et la limit se mets a nouveaux à jour...
    Je ne comprends pas ce comportement.
    Merci d'avance si qqn peut se pencher sur mon problème :(

    -
    Edité par xenos92 7 octobre 2018 à 14:56:28

    • Partager sur Facebook
    • Partager sur Twitter
    DeveloppeurBrut
    • Javascript
      8 octobre 2018 à 16:05:06

      http://scrollmagic.io/examples/advanced/infinite_scrolling.html
      • Partager sur Facebook
      • Partager sur Twitter
      xenos92
        8 octobre 2018 à 20:15:24

        Merci pour la réponse DeveloppeurBrut mais je préfère éviter de rajouter une surcouche...

        J'ai résolu mon problème si il y en a que ça intéresse.

        Je vous mets le code et si vous voyez des choses à améliorer je suis preneur ;)

        function infinite_scroll($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,
	};


	$.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);
            $(window).data('ajaxready', true);
        },
        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'),
            last_id         : $('.js_load_more').attr('last_id'),
        };
        //var timer = 0;
        var limit       = $(document).height() - $(window).height() - 10; // Je mets -10 sinon je n'arrive pas a declencher la fonction

        // J'attache une valeur au DOM pour empecher plusieurs appel de la fonction dans le scroll
        $(window).data('ajaxready', true).scroll(function(e) {
            if ($(window).data('ajaxready') == false) return;

            param.last_id = $('.js_load_more').attr('last_id');

            // Sert a recuperer les parametres du filtre pour les reinjecter dans le chargement infinite scroll
            if($("input[name='param_pagination_search_keyword']").length){
                param.search_keyword = $("input[name='param_pagination_search_keyword']").val();
             }
            if(param.last_id != 0){ 
                if ($(window).scrollTop() >= limit){
                    $(window).data('ajaxready', false);
                    infinite_scroll(param);
                }
            }
        });
    }
});



        • Partager sur Facebook
        • Partager sur Twitter

        Pagination chargement au scroll infini

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
        • Editeur ●
        • Markdown