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.
T'as besoin de prévoir que ton utilisateur puisse avoir désactivé JS ou pas?
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.
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 ;)