Afficher une boucle php récuperer dans une div ! [Résolu/Fermé]

Signaler
Messages postés
1043
Date d'inscription
vendredi 16 novembre 2007
Statut
Contributeur
Dernière intervention
27 mars 2019
-
Messages postés
29170
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
8 août 2020
-
Bonjour,

Je me permet de poser une question sur Jquery Ajax et Php.
Voilà je recherche une solution qui va me permet d'afficher le code html via la methode viewRender de fullcalendar d'une boucle venant d'un script PHP dans une div.
Tout fonctionne correctement sauf que je ne récupère pas chaque élément de la boucle en html dans le code source.

Le fichier boucle.php :

$bdd = db_connect();
$requete = "SELECT * FROM users ORDER BY username";
$resultat = $bdd->query($requete) or die(print_r($bdd->errorInfo()));

while ($user = $resultat->fetch()) {
echo "<div class='maclass'>".$user['username']."</div>";
}

La fonction Ajax :

viewRender: function(view, element) {
$.ajax({
url: 'php/boucle.php',
success: function (element) {
$('.maclass').html(element);
}
});
},

Le code html récupéré qui ne me convient pas :

<div id='drag-externe'>
<h4>Draggable </h4>
<div class='maclass'></div>
</div>

Résultat que j'attends dans mon code html :

<div id='drag-externe'>
<div class="maclass">USER-1</div>
<div class="maclass">USER-2</div>
<div class="maclass">USER-3</div>
<div class="maclass">USER-4</div>
</div>

Ce résultat me permettra de réaliser les drag and drop de chaque élément de ma div sur le calendrier.
Avez-vous une idée s'il vous plait ?
Je vous remercie de votre aide.
Rescue

9 réponses

Messages postés
29170
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
8 août 2020
2 677
Bonjour,

A l'avenir, pernse à mettre la coloration syntaxique.
explication disponible ici :


Ensuite:


$bdd = db_connect();
$requete = "SELECT * FROM users ORDER BY username";
$resultat = $bdd->query($requete) or die(print_r($bdd->errorInfo()));

$result=array();
while ($user = $resultat->fetch()) {
  //on ne retourne pas de HTML dans un appel ajax. On ne renvoi que les données
 // c'est le Javascript qui se chargera du HTML
  $result[] =$user['username'];
}

//on renvoi les données de l'ajax en JSON
header('Content-Type: application/json');
echo json_encode($result);
exit();


Côté JS
viewRender: function(view, element) {
  $.ajax({
    url: 'php/boucle.php',
    dataType: "json"
    success: function (reponse) {
      $.each(result,function(i,e){
        console.log(e);
        $('#drag-externe').append( "<div class='maclass'>" + e + "</div>");
      });
    },
    error: function(jqXHR, textStatus){
      alert(textStatus);
    }
  });
},

Messages postés
1043
Date d'inscription
vendredi 16 novembre 2007
Statut
Contributeur
Dernière intervention
27 mars 2019
135
Bonsoir Jordane,

Je te remercie pour ta réponse.
J'ai appris encore quelque chose sur l'Ajax que je ne maîtrise pas du tout.
//on ne retourne pas de HTML dans un appel ajax. On ne renvoi que les données

En revanche le script me renvoi dans l'alerte error.

Que faire ?

Merci.
Cordialement
Rescue

Messages postés
29170
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
8 août 2020
2 677
Commence par ajouter du debug
error: function(jqXHR, textStatus){
      console.log(jqXHR);
      console.log(textStatus);
      alert(textStatus);
    }

et donne moi les informations d'erreur affichées dans la CONSOLE de ton navigateur.
Messages postés
1043
Date d'inscription
vendredi 16 novembre 2007
Statut
Contributeur
Dernière intervention
27 mars 2019
135
Voici ma console j'ai mis le minimum d'information.
Le déploiement de tous les éléments c'est énorme !!


Object { readyState: 4, getResponseHeader: getResponseHeader()
, getAllResponseHeaders: getAllResponseHeaders(), setRequestHeader: setRequestHeader(), overrideMimeType: overrideMimeType(), statusCode: statusCode(), abort: abort(), state: state(), always: always(), catch: catch()
, … }
external-dragging.php:135:15
error external-dragging.php:136:15

Messages postés
1043
Date d'inscription
vendredi 16 novembre 2007
Statut
Contributeur
Dernière intervention
27 mars 2019
135
Oups,

J'ai autre chose :

ReferenceError: result is not defined[En savoir plus] external-dragging.php:128:15
success
http://localhost/SCHEDULER/demos/external-dragging.php:128:15
u
http://localhost/SCHEDULER/lib/jquery.min.js:2:27452
fireWith
http://localhost/SCHEDULER/lib/jquery.min.js:2:28202
k
http://localhost/SCHEDULER/lib/jquery.min.js:2:77649
n/<
http://localhost/SCHEDULER/lib/jquery.min.js:2:79907


Messages postés
29170
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
8 août 2020
2 677
Arfff.... erreur de copier/coller
  success: function (reponse) {
      $.each(reponse,function(i,e){
Messages postés
29170
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
8 août 2020
2 677
Et à la limite.. affiche le contenu de "reponse" dans la console
success: function (reponse) {
    console.log( "REPONSE :");
    console.log(reponse);
      $.each(reponse,function(i,e)



Par contre, si tu as le message d'alert de l'erreur.... il faudrait le message d'erreur complet;
Ajoute cette fonction dans ton code JS
/**
  Format les messages erreurs AJAX pour pouvoir les afficher
 */
 function formatErrorMessage(jqXHR, exception) {
 var errorTxt="";
 var err = jqXHR.responseText ;
    if (jqXHR.status === 0) {
        errorTxt = ('Not connected.\nPlease verify your network connection.');
    } else if (jqXHR.status == 404) {
        errorTxt = ('The requested page not found. [404]');
    } else if (jqXHR.status == 500) {
        errorTxt = ('Internal Server Error [500].');
    } else if (exception === 'parsererror') {
        errorTxt = ('Requested JSON parse failed.');
    } else if (exception === 'timeout') {
        errorTxt = ('Time out error.');
    } else if (exception === 'abort') {
        errorTxt = ('Ajax request aborted.');
    } else {
        errorTxt = ('Uncaught Error.\n' + jqXHR.responseText);
    }
    
    return errorTxt + " : " +err;
}

et modifie le code de l'error par celui la :
error: function(jqXHR, textStatus){
  console.log( jqXHR.responseText );
  var errMsg = 'Ajax error :' + formatErrorMessage(jqXHR, textStatus);
  alert(errMsg );
}


Il faudrait aussi s'assurer que ton code PHP (ajax) fonctionne correctement.
Tu utilises PDO ou mysqli ?
Si PDO : https://www.commentcamarche.net/faq/46512-pdo-gerer-les-erreurs

Pense aussi à activer l'affichage des erreurs PHP :
https://www.commentcamarche.net/faq/48399-php-gestion-des-erreurs-debogage-et-ecriture-du-code
Messages postés
1043
Date d'inscription
vendredi 16 novembre 2007
Statut
Contributeur
Dernière intervention
27 mars 2019
135
Alors oui c'est pas grave mais à présent c'est OK.

J'ai placé result en argument dans la fonction en attendant ta réponse.
ça revient au même je suppose.

Le code source est OK c'est bien le résultat que j'attendais
Mais c'est bizarre je ne drag pas du tout !

Alors que si je place mon code en php dans la page ça fonctionne !
C'est étrange !

Je cherche si je n'ai pas également un copier coller qui Arfff...

Merci.
Messages postés
29170
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
8 août 2020
2 677
C'est juste que tu initilaises ta fonction drag avant de générer les div dans ton ajax...
Il faut, apres l'appel ajax, réinitialiser le drag
Messages postés
1043
Date d'inscription
vendredi 16 novembre 2007
Statut
Contributeur
Dernière intervention
27 mars 2019
135
Oui c'est exactement ça...
J'ai trouvé aussi cette coquille mais là ça fait 1H00 que je galère à présent sur le title.

Il me récupère tous les username dans le title.
Ah je suis vraiment une grosse nouille lol !!
Si tu as une piste entre temps je suis preneur.

Merci encore à toi.
Rescue
Messages postés
29170
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
8 août 2020
2 677
Heuu..tu peux expliquer un peu mieux ?
Quel title ??
Messages postés
1043
Date d'inscription
vendredi 16 novembre 2007
Statut
Contributeur
Dernière intervention
27 mars 2019
135
Bonjour,

En faite j'ai 2 problèmes.

en image PB1 : Lorsque je glisse un élement je récupère tous les titres de la liste

en image PB2 : lorsque je me déplace dans le temps sur le calendrier la liste des mes users s'allonge


Merci et bonne journée.
Rescue
Messages postés
1043
Date d'inscription
vendredi 16 novembre 2007
Statut
Contributeur
Dernière intervention
27 mars 2019
135
Bonjour,

J'ai avancé sur mon 1er problème en faite le PB venait entre la chaise et le clavier.
Écrire une variable avec un tiret haut et plus bas avec un tiret bas, ça marche moins bien.

En revanche je suis toujours sur le PB2 càd ma liste qui augmente lorsque je navigue dans le calendrier.
Voici mon code source Ajax qui s'affiche dans la div '#drag-dispo' si quelqu'un veut bien m'aiguiller.
Oui je sais c'est encore un problème entre le clavier et la chaise.

$.ajax({
            url: 'php/personne_dispo.php',
            dataType: "json",
            success: function(reponse) {
                console.log( "REPONSE :");
                console.log(reponse);

                $.each(reponse, function(i, e) {              
   $('#drag-dispo').append( "<div class='perso-dispo'>" + e + "</div>");
                });

  $('#drag-dispo .perso-dispo').each(function() {
  
          $(this).data('event', {
                title: $.trim($(this).text()),
                stick: true
          });
          
   $('.perso-dispo').draggable({
                zIndex: 999,
                revert: true,
                revertDuration: 0
          });
  }); 
            }
          });


EDIT : Correction des balises de code pour y mettre la coloration syntaxique (jordane)

Il manque surement un refresch quelque part ?
à votre bon cœur, je recherche toujours moi de mon coté.

Merci et bonne journée.
Rescue.

Messages postés
29170
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
8 août 2020
2 677
Lorsque tu te "déplaces dans le temps" ...... ça lance quelle fonction JS ?
car la réponse se situe certainement sur l'appel ( à tord ou à raison) d'une fonction JS.
Typiquement... je suppose que ta liste est alimentée par ton AJAX. ... et donc.. qu'est-ce qui déclenche l'appel à cet ajax ?
Messages postés
29170
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
8 août 2020
2 677
SInon...Une solution serait éventuellement de "vider" la div en question avant de la réalimenter
$('#drag-dispo').html('');
$.each(reponse, function(i, e) {              
   //....

Messages postés
1043
Date d'inscription
vendredi 16 novembre 2007
Statut
Contributeur
Dernière intervention
27 mars 2019
135
Bonjour Jordane,

Pour répondre à ta question la fonction qui est lancé est :
viewRender: function(view, element) {}

En revanche l'idée de vider la div avant remplissage c'est de la balle de bombe.
Merci Jordane c'est toi le boss man.

Pour me coucher moins bête ce soir à quel endroit on pose : la coloration syntaxique.
Je m'excuse d'avance mais je post très rarement dans le forum malgré que je sois inscrit depuis 2007.
Je clôture le sujet car mes PB sont réglés.

Merci encore @très bientôt...
Rescue
Messages postés
29170
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
8 août 2020
2 677
Pour avoir la coloration syntaxique, il suffit de préciser le LANGAGE dans les balises de code
https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code