Bonjour,

Je debute en ajax en galerant un peu je m'en sors tant bien que mal mais la j'ai vraiment du mal j'aimerai un peu d'aide si possible pour eclairer ma lanterne ;)

Je suis sur le framework Codeigniter, je souhaite faire un systeme de jeu de type quizz. Lorsque je clique sur mon bouton je veux charger la question suivante en ajax.

J'arrive a mettre a jour une seule variable si besoin est en ajax mais je ne vois pas comment recharger en ajax tous un foreach et mettre a jour les variables qui en découlent ...

Mon controller :

Le "test" est mon controller principal qui affiche mes données. Le "ajax_nouvelle_question" me sert a charger les nouvelles données en ajax et les renvoyer dans test.

function test(){
    $this->get_question_id_random                       = $this->question_model->get_question_id_random();
    $this->data['get_question_id_random']               = $this->get_question_id_random;
    $this->data['recup_question']                       = $this->question_model->recup_question($this->get_question_id_random);

    $this->data['conteneur']            =   'jeu/game/ajax_game';
    $this->load->view($this->path_template,$this->data);
}

function ajax_nouvelle_question() {
    $this->get_question_id_random       = $this->question_model->get_question_id_random();
    $this->data['recup_question']       = $this->question_model->recup_question($this->get_question_id_random);
    echo json_encode ($this->data);
}

Ma vue :

J'arrive a mettre a jour l'id de ma question contenu par l'id "question", ce que je ne vois pas comment faire c'est mettre a jour directement le foreach recup_question pour que toutes les variables dessous se mette a jour.

<?php foreach($recup_question as $q):?>
    <div class="partie_droite" id="partie_droite">
        <div class="l-bande--dark-2 l-bande--60" id="bloc_question">
            <div class="content">
                <!-- PARTIE QUESTIONS -->
                <div id="question"><?php echo $q->id; ?></div>

                <?php if($q->type != 3): //Tous les types sauf ouvert img?>
                    <div class="question"><?php echo $q->question;?></div>
                    <div class="clear"></div>
                <?php endif; ?>
            </div>
        </div>

        <div class="sub_question l-bande--light-1" id="bloc_sub_question">
            <div class="content">
            <?php echo Mybutton::normal(array(
                'text' => "Question suivante",
                'class' => 'button button-stroke',
                'id' => 'button_next_question',
            )); ?>
            </div>  
        </div>
    </div>
<?php endforeach;?>

Mon model :

Mes fonctions qui fonctionnent au chargement de mon jeu.

function get_question_id_random()
{   
    // Je recupere un id au hasard qui correspond a mes parametres
    // Je selectionne un id de la table questions 
    // Je le joins aux matieres de mes parametres
    // Je le joins aux tags

    $this->db->select('questions.id AS numero_id_question')
                ->join('game_questions', 'game_questions.id_question = questions.id')
                ->where('game_questions.fait', 0)
                ->where('questions.online',1)
                ->order_by('rand()')
                ->limit(1);

    $query = $this->db->get('questions');

    $num_id = $query->result();
    if(!empty($num_id))
    {
        foreach ($num_id as $n) {
            $numero_id_question = $n->numero_id_question;
        }
        return $numero_id_question;
    }
}
// J'affiche la question qui correspond a l'ID random
function recup_question($id_question)
{
    $this->db->where('id',$id_question);
    $query = $this->db->get('questions');

    if($query->num_rows()>0)
    {
        foreach ($query->result() as $row) {
            $data[] = $row;
        }
        return $data;
    }
}

Mon script :

/***********************************/
// Fonction qui recharge tous les parametres pour afficher la nouvelle question
// Se lance quand j'appui sur le bouton question suivante
// 
function nouvelle_question($container){
   $.ajax({
        type: 'GET',
        url: 'http://localhost:8890/app/armee_project/index.php/game/ajax_nouvelle_question',
        datatype : 'json',
        async : true,
        success: function(data) {
            data = $.parseJSON(data);
            if(data){
                //console.log(data);
                $("#question").html(data.recup_question[0].id);
            }
        }
    });
  return false;
}

J'espere recevoir quelques avis éclairés ! Merci d'avance.

3 réponses


Psylozoff
Réponse acceptée

T'as besoin de prévoir que ton utilisateur puisse avoir désactivé JS ou pas?

  • si oui, faudrait que le moyen de valider la réponse à la question soit une balise [a] ou un [input type= "submit"]...
  • sinon, à ta place j'utiliserais pas php pour construire les questions ^^ Je chargerais la page sans question et, pendant le premier chargement de la page, un message indiquerait "chargement" pendant qu'une requête récupèrerait la première question en json! Ensuite, JS construit le bout de vue et l'intègre au DOM et le message disparait... Quand l'utilisateur répond, le message de chargement réapparait pendant qu'on fait la même chose pour la question suivante..!

Yop.

L'idée est, lorsque tu fais ton appel ajax, de retourner non un résultat json mais directement un résultat html, ta vue HTML? Uniquement la partie foreach, sans les doctype etc.
Et à partir du résultat obtenu, soit de remplacer les questions existantes par les nouvelles, soit de les ajouter à la suites des anciennes. ^^

Malheureusement jQuery n'est pas vraiment la meilleure solution technologique pour "recréer" facilement un arbre DOM HTML avec tous les événements qui vont bien à partir de données JSON.

juju.92
Auteur

Bon j'ai trouvé une solution a mon probleme finalement, au lieu de charger mmon tableau dans ma vues et d'y acceder avec un foreach ce qui me bloque, j'ai reussi a acceder a mes variables directement sans foreach ce qui resout mon probleme.

Merci pour vos reponses.

@Psylozoff, je vais etudier ta proposition voir si c'est mieux ;)