[Résolu] Problème de liste avec Php et script js

Question

SwoOn

2 May 2016 à 12:48

Bonjour,

suite au code bien sympathique de MatthieuR, j'ai crée une boucle via php mais le soucis est qu'au bout de 2 passages, il n'y a plus rien qui s'affiche. Voici le bout de code !


  <div class="container">
    <div class="live-infos">
		<ul class="winners">
 		<?php while ($data = mysqli_fetch_array($req)){?>
		<li>
		<div class="row">
			<div class="col-xs-12 text-left">
			<h3><i class="fa fa-fw fa-trophy"></i> <?php echo $data['Competition'];//
			if ($data['Playoffs'] != 'Non'){echo ' - '.$data['Playoffs'];} echo ', ';?>
			<small><?php echo $data['Date']; ?></small></h3>
			<div class="row">
				<div class="col-xs-4 text-right"><strong><?php echo $data['Equipe_1'];?></strong></div> 
				<div class="col-xs-3 text-center td"></div>
				<div class="col-xs-4 text-left"><strong><?php echo $data['Equipe_2']; ?></strong></div>
			</div>
			<div class="row">
			<div class="col-xs-4 text-right">
			<?php echo $data['Coach_1'];?></div>
			<div class="col-xs-3 text-center td"><?php echo $data['Score_1'];?> <i class="fa fa-fw fa-star"></i> <?php echo $data['Score_2']; ?></div>
			<div class="col-xs-4 text-left">
			<?php echo $data['Coach_2'];?></div>
			</div>	
			</div>
		</div>
		</li>
		<?php }?>
	</ul>
    </div>
  </div>

Est-ce suffisant comme code ?
Merci en tout cas.
Modifié par SwoOn (04 May 2016 - 09:43)

MatthieuR

2 May 2016 à 17:36

J'aimerais avoir le code généré de la liste.
Tu appelles ta page dans le navigateur puis tu affiches le code source, attention pas le code du dev tool, le code source.
Tu copies ta liste et la colles ici, car il faut déjà voir si le souci vient de PHP ou pas...

MatthieuR

2 May 2016 à 17:52

Dans tous les cas, je ne vois pas comment ça pourrait fonctionner.
Tu as des erreurs dans PHP $data[Competition] doit s'écrire $data['Competition'] (sauf si tu as des constantes du nom des tes colonnes de DB mais ça m'étonnerait...).
Tu utilises des classes de Bootstrap et forcément ça va rentrer en conflit avec le style adapté au précédent défilement.
La fermeture de ton <li> (</li>) n'est pas dans la boucle Smiley ohwell

Tu renvoie manifestement beaucoup plus que du simple texte dans tes <li>, et ça, ça va pas fonctionner !

Sinon, c'est pas une erreur, mais je préfère largement un foreach(){} que un while(){} pour itérer les résultats d'une requête SQL. Meilleures perfs, plus claire, je préfère quoi...

J'attends donc ton code généré mais ça ne peut forcément pas fonctionner, tu vois bien que à la base c'est juste une liste de noms animés et non pas un truc plein de trucs dans tous les sens et plein d'erreurs Smiley biggrin

EDIT : Pour ceux qui n'ont pas suivi, ce post est une suite à ce post de Newki75 dont la démo est sur codepen.
Modifié par MatthieuR (02 May 2016 - 17:55)

SwoOn

2 May 2016 à 19:17

Merci pour ta réponse et désolé pour les erreurs.
Je maitrise pas toutes les subtilités du langage php (ça tu t'en aies rendu compte) Smiley confused

par contre pour la boucle j'aurai pu faire un effort !! Encore désolé Smiley confused

Sinon j'ai corrigé (à mon niveau) les variables et la bouvle et généré le code source que je te copie.
J'ai édité mon premier post avec la version 'corrigé' du code.

Du coup cela semble mal engagé visiblement vu ton deuxième post, en fait je voulais faire un défilement horizontal, mais en tombant sur ton exemple, cela m'a bien plu !

<script>
function ouvre() {
	window.open('/widgets/scores/views/formulaire.php','fenetre','width=580,height=740,toolbar=no,menubar=no,scrollbars=no,location=no,directories=no,personalbar=no,adressbar=no,statusbar=no');
}

$(function() {
  var winners_list = $('.winners li');
  var ul_height = $('.winners').outerHeight();
  $('.winners').append(winners_list.clone());

  var i = 0;
  (function displayWinners(i) {
    setTimeout(function() {
      if ($('.winners').css('top') == (-1 * ul_height) + 'px') {
        $('.winners').css('top', '0');
      }
      var li_height = $(winners_list[i]).outerHeight();
      $('.winners').animate({
        top: '-=' + li_height + 'px'
      }, 500);
      if (i == winners_list.length - 1) {
        i = 0;
      } else {
        i++;
      }
      displayWinners(i);

    }, 2250);
  })(i);

});


   $(function(){
      setInterval(function(){
         $(".slideshow ul").animate({marginLeft:-350},800,function(){
            $(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first"));
         })
      }, 3500);
   });

</script>


  <div class="container">
    <div class="live-infos">
		<ul class="winners">
 				<li>
		<div class="row">
			<div class="col-xs-12 text-left">
			<h3><i class="fa fa-fw fa-trophy"></i> Open saison IX - Quart de finale, 			<small>le lundi 02 mai à 10:37</small></h3>
			<div class="row">
				<div class="col-xs-4 text-right"><strong>Les faucons savoyards</strong></div> 
				<div class="col-xs-3 text-center td"></div>
				<div class="col-xs-4 text-left"><strong>Ratz in Montpellier</strong></div>
			</div>
			<div class="row">
			<div class="col-xs-4 text-right">
			SwoOn</div>
			<div class="col-xs-3 text-center td">2 <i class="fa fa-fw fa-star"></i> 3</div>
			<div class="col-xs-4 text-left">
			BB Blood</div>
			</div>	
			</div>
		</div>
		</li>
				<li>
		<div class="row">
			<div class="col-xs-12 text-left">
			<h3><i class="fa fa-fw fa-trophy"></i> Championnat Division 1, 			<small>le dimanche 01 mai à 23:58</small></h3>
			<div class="row">
				<div class="col-xs-4 text-right"><strong>Les faucons savoyards</strong></div> 
				<div class="col-xs-3 text-center td"></div>
				<div class="col-xs-4 text-left"><strong>Z</strong></div>
			</div>
			<div class="row">
			<div class="col-xs-4 text-right">
			SwoOn</div>
			<div class="col-xs-3 text-center td">0 <i class="fa fa-fw fa-star"></i> 1</div>
			<div class="col-xs-4 text-left">
			BB Blood</div>
			</div>	
			</div>
		</div>
		</li>
				<li>
		<div class="row">
			<div class="col-xs-12 text-left">
			<h3><i class="fa fa-fw fa-trophy"></i> Open saison X - Seizième de finale, 			<small>le lundi 02 mai à 00:01</small></h3>
			<div class="row">
				<div class="col-xs-4 text-right"><strong>Les faucons savoyards</strong></div> 
				<div class="col-xs-3 text-center td"></div>
				<div class="col-xs-4 text-left"><strong>Ratz in Montpellier</strong></div>
			</div>
			<div class="row">
			<div class="col-xs-4 text-right">
			SwoOn</div>
			<div class="col-xs-3 text-center td">1 <i class="fa fa-fw fa-star"></i> 0</div>
			<div class="col-xs-4 text-left">
			BB Blood</div>
			</div>	
			</div>
		</div>
		</li>
				<li>
		<div class="row">
			<div class="col-xs-12 text-left">
			<h3><i class="fa fa-fw fa-trophy"></i> Championnat Division 1, 			<small>le dimanche 01 mai à 23:55</small></h3>
			<div class="row">
				<div class="col-xs-4 text-right"><strong>Testons à, érèbe, tête</strong></div> 
				<div class="col-xs-3 text-center td"></div>
				<div class="col-xs-4 text-left"><strong>Ratz in Montpellier</strong></div>
			</div>
			<div class="row">
			<div class="col-xs-4 text-right">
			S</div>
			<div class="col-xs-3 text-center td">0 <i class="fa fa-fw fa-star"></i> 0</div>
			<div class="col-xs-4 text-left">
			BB Blood</div>
			</div>	
			</div>
		</div>
		</li>
				<li>
		<div class="row">
			<div class="col-xs-12 text-left">
			<h3><i class="fa fa-fw fa-trophy"></i> Championnat Division 1, 			<small>le dimanche 01 mai à 23:43</small></h3>
			<div class="row">
				<div class="col-xs-4 text-right"><strong>Les faucons savoyards</strong></div> 
				<div class="col-xs-3 text-center td"></div>
				<div class="col-xs-4 text-left"><strong>Ratz in Montpellier</strong></div>
			</div>
			<div class="row">
			<div class="col-xs-4 text-right">
			SwoOn</div>
			<div class="col-xs-3 text-center td">0 <i class="fa fa-fw fa-star"></i> 0</div>
			<div class="col-xs-4 text-left">
			BB Blood</div>
			</div>	
			</div>
		</div>
		</li>
				<li>
		<div class="row">
			<div class="col-xs-12 text-left">
			<h3><i class="fa fa-fw fa-trophy"></i> Championnat Division 1, 			<small>le dimanche 01 mai à 23:28</small></h3>
			<div class="row">
				<div class="col-xs-4 text-right"><strong>Testons à, érèbe, tête</strong></div> 
				<div class="col-xs-3 text-center td"></div>
				<div class="col-xs-4 text-left"><strong>Var</strong></div>
			</div>
			<div class="row">
			<div class="col-xs-4 text-right">
			Choboran</div>
			<div class="col-xs-3 text-center td">0 <i class="fa fa-fw fa-star"></i> 0</div>
			<div class="col-xs-4 text-left">
			Lol</div>
			</div>	
			</div>
		</div>
		</li>
				<li>
		<div class="row">
			<div class="col-xs-12 text-left">
			<h3><i class="fa fa-fw fa-trophy"></i> Open saison X, 			<small>Le dimanche 01 mai à 20:28</small></h3>
			<div class="row">
				<div class="col-xs-4 text-right"><strong>Maximum de max max max</strong></div> 
				<div class="col-xs-3 text-center td"></div>
				<div class="col-xs-4 text-left"><strong>Dfre</strong></div>
			</div>
			<div class="row">
			<div class="col-xs-4 text-right">
			SwoOn</div>
			<div class="col-xs-3 text-center td">1 <i class="fa fa-fw fa-star"></i> 0</div>
			<div class="col-xs-4 text-left">
			Test</div>
			</div>	
			</div>
		</div>
		</li>
				<li>
		<div class="row">
			<div class="col-xs-12 text-left">
			<h3><i class="fa fa-fw fa-trophy"></i> Open saison IX - Quart de finale, 			<small>le dimanche 01 mai à 20:12</small></h3>
			<div class="row">
				<div class="col-xs-4 text-right"><strong>Les faucons savoyards</strong></div> 
				<div class="col-xs-3 text-center td"></div>
				<div class="col-xs-4 text-left"><strong>Ratz in Montpellier</strong></div>
			</div>
			<div class="row">
			<div class="col-xs-4 text-right">
			SwoOn</div>
			<div class="col-xs-3 text-center td">2 <i class="fa fa-fw fa-star"></i> 3</div>
			<div class="col-xs-4 text-left">
			BB Blood</div>
			</div>	
			</div>
		</div>
		</li>
				<li>
		<div class="row">
			<div class="col-xs-12 text-left">
			<h3><i class="fa fa-fw fa-trophy"></i> Open saison IX - SEIZIEME DE FINALE , 			<small>dimanche 01 mai à 12:27</small></h3>
			<div class="row">
				<div class="col-xs-4 text-right"><strong>Testons à, érèbe, tête</strong></div> 
				<div class="col-xs-3 text-center td"></div>
				<div class="col-xs-4 text-left"><strong>Là mëme</strong></div>
			</div>
			<div class="row">
			<div class="col-xs-4 text-right">
			Elève ! ïbe</div>
			<div class="col-xs-3 text-center td">1 <i class="fa fa-fw fa-star"></i> 2</div>
			<div class="col-xs-4 text-left">
			BB Blood</div>
			</div>	
			</div>
		</div>
		</li>
				<li>
		<div class="row">
			<div class="col-xs-12 text-left">
			<h3><i class="fa fa-fw fa-trophy"></i> Championnat Division 1, 			<small>dimanche 01 mai à 12:08</small></h3>
			<div class="row">
				<div class="col-xs-4 text-right"><strong>Avant la fénè</strong></div> 
				<div class="col-xs-3 text-center td"></div>
				<div class="col-xs-4 text-left"><strong>Test</strong></div>
			</div>
			<div class="row">
			<div class="col-xs-4 text-right">
			SwoOn</div>
			<div class="col-xs-3 text-center td">1 <i class="fa fa-fw fa-star"></i> 0</div>
			<div class="col-xs-4 text-left">
			Sarkobolt</div>
			</div>	
			</div>
		</div>
		</li>
			</ul>
    </div>
  </div>

Encore merci en tout cas ![/i]
Modifié par SwoOn (02 May 2016 - 22:48)

SwoOn

2 May 2016 à 22:48

Bon j'avance un peu !
En reprenant le code, et petit à petit, j'ai réussi à isoler le problème.
Ce sont les balises <h3></h3> et <small></small> qui faisaient que la liste était vide au bout du deuxième passage.
Par contre je ne vois pas pourquoi, j'ai une balise <strong></strong> plus loin qui ne pose pas de problème visiblement.

Je vais tenter de revenir à mon style via le css.

MatthieuR

2 May 2016 à 23:20

Je suis sur le cul !
En fait ça fonctionne carrément bien, j'ai juste modifié la manière dont je modifiais le top et la manière de recaler la liste à top:0;

Ton code est correct, le html que tu m'as fourni, généré depuis ton code PHP et en fait c'est OK.
Ça fonctionne même avec des hauteurs de <li> différentes.

Je pense en faire un petit plugin jQuery à mettre sur GitHub...

Voici le Codepen mis à jour avec tes données : http://codepen.io/korell/pen/aNQGMq?editors=1010

SwoOn

3 May 2016 à 07:12

La chance/naïveté du débutant ?
Content que cela puisse te donner une idée du coup Smiley smile

Je vais tester ça aujourd'hui et voir si mon <h3></h3> ne fait plus planter la bete.
Merci en tout cas.
Modifié par SwoOn (03 May 2016 - 11:58)

SwoOn

4 May 2016 à 09:43

Encore merci Mathieu, ton script est magique, il marche au poil Smiley biggrin

Sujet clos

JavaScript, DOM et API Web HTML5

[Résolu] Problème de liste avec Php et script js