Intégration d'une base MySQL avec PHP

Hello, alors pour incrémenter tu dois récupérer la liste de tes données mysql et faire un foreach:

<div class="container">
  <div class="list" id="grid">
        <?php foreach($products as $product) { ?>
            <div class="item js-marker cinema" data-lat ="43.650812" data-lng ="3.543216" data-price="Cinéma" >
                <img src="https://via.placeholder.com/400x260" alt="">
                <h4><?= $product->nane ?></h4>
                <p>
                    <?= $product->explication ?>
                </p>
            </div>
        <?php } ?>
  </div>

Dans cet exemple tu enregistres ton fetchAll() dans une variable $products

La balise <?= ... ?> c'est un racourcis pour <?php echo ... ?>

Et bien ton fichier doit être en .php, pas .html, sinon le document ne saura pas lire les balises php :p

Merci beaucoup, j'ai réussi à obtenir ce que je voulais grâce à ton aide !

Je me permets juste de te reposer une question pour pas poster un nouveau message sur le forum,
j'ai créé deux listes déroulantes qui me permettent de selectionner mes div selon deux critère différents.
Le soucis que j'ai, c'est que la selection de l'un des critères sur une liste selectionne bien mes div mais sans prendre pas en compte les div selectionnés selon le second critère.
par exemple si mon premier critère c'est rouge et le second voiture, si je selectionne la voiture toutes les couleurs vont apparaitre (le critère rouge n'est pas respecté) et inversement.
Comment je pourrais les mixer pour que les deux liste interagissent ?

PS : désolé je n'ai plus en tête la balise à mettre pour mettre le texte sous forme de code.

voici les liste :

$(document).ready(function(){
$('#choix').change(function(){
$(this).find("option:selected").each(function(){
var val = $(this).attr("value");

                    if(val){
                            $(".js-marker").not("." + val).hide();
                            $("." + val).show();
                    } else{
                            $(".js-marker").show();
                    }
            });
    }).change();

});

et

$(document).ready(function(){
$('#choi2').change(function(){
$(this).find("option:selected").each(function(){
var val = $(this).attr("value");
if(val){
$(".js-marker").not("." + val).hide();
$("." + val).show();
} else{
$(".js-marker").show();
}
});
}).change();
});

De rien ^^

Alors pour mettre en code, il faut faire 3 back-quote (AltGr + 7) en haut et trois en bas, un saut de ligne autour des back quote aussi

Bon déjà je place le code au propre :p

$(document).ready(function(){
    $('#choix').change(function(){
        $(this).find("option:selected").each(function(){
            var val = $(this).attr("value");

            if (val) {
                $(".js-marker").not("." + val).hide();
                $("." + val).show();
            } else {
                $(".js-marker").show();
            }
        });
    }).change();
});

et

$(document).ready(function(){
    $('#choi2').change(function(){
        $(this).find("option:selected").each(function(){
            var val = $(this).attr("value");

            if (val) {
                $(".js-marker").not("." + val).hide();
                $("." + val).show();
            } else {
                $(".js-marker").show();
            }
        });
    }).change();
});

Ok alors le problème c'est que les deux functions ignorent le critère de l'autre, la couleur va afficher tout ce qui est dans la couleur selectionnée et la voiture va afficher toutes les voitures selectionnées

Le problème c'est que c'est deux fonctions sont indépendantes, il faut que tu exportes les valeurs de façon externe pour que ce soit accessible par les deux functions, en valeur externe tu aura la couleur et la voiture, et par exemple la function qui selectionne la couleur devra utiliser la valeur externe de la voiture ^^

Ha d'accord, mais tu entends quoi par exporter les deux valeurs ?

Un truc du genre:

let voiture = 'voiture'
let color = 'red'

document.ready(function () {

    $.('#choivoiture').change(function () {
        //prend en compte la var color et change la var voiture
    })

    $.('#choicolor').change(function () {
        //prend en compte la var voiture et change la var color
    })
})

D'accord il faut que j'essaye merci !

J'essaye d'optimiser mon code en ajoutant ou en supprimant une classe en fonction du style des objets qui ont la classe item (none ou block) mais ça ne marche pas :( tu verrais pourquoi mon code ne donne rien ?

var Ncl = document.querySelectorAll('.item');
var type = 'bowling.style.display';

if (type = 'none') { Ncl.classList.add("hide");}
else { Ncl.classList.remove("hide");}

mmmh je vois pas trop ce que ça fait mais y'a un pb dans le code:

if (type = 'none') { Ncl.classList.add("hide");}

Faut mettre deux =:

if (type == 'none') { Ncl.classList.add("hide");}

j'ai un peu tout repris mais ça ne marche toujours pas... pourtant ça me semblait bon la :(

var Ncl = document.getElementByClassName("item");

for(var i=0 ; i<Ncl.length; i++){
    if(Ncl[i].style.display == "block"){
    Ncl[i].classList.remove("hide");}

    else {Ncl[i].classList.add("hide")}

    }

Ok alors essayes en inversant add et remove

La en gros ton code dit: Si l'élément est visible, rends le visible, si il est invisible, rends le invisible (en bref ne fait rien :p)

J'ai essayé plusieurs combinaisons sans résultat, tu y vois une erreur de syntaxte ou quoi ? :(

Mmmmh, ouvres l'inspecteur du navigateur dans l'onglet Console, recharges la page et essayes de déclancher l'event, il devrait y avoir une erreur qui va apparaitre

la console ne m'indique rien c'est comme si ce que je faisait avait 0 effet?

Okay alors je pense voir, quant tu veux faire apparaitre faut faire un

 Ncl[i].style.display = "block"

Et en rendant invisible faudrait mettre

Ncl[i].style.display = "none"

En gros tu ajoutes une classe qui a un style, mais le style inline est prioritaire sur les class et les id

J'ai essayé comme ça mais je ne comprend parce que ça fixe le style à none ? Tu verrais une explication? le if c'est une condition normalement ça doit pas me changer le display ... je suis perdu

Et par rapport a ton message precedent en fait le display est déjà géré par une autre fonction qui marche :). J'aimerai juste pouvoir l'exploiter avec celle-ci.

   document.querySelector("select").addEventListener("click",() => {
    var Ncl = document.getElementById('test2');

      if(Ncl.style = "display:none;" ){
      Ncl.classList.add("fun");}

      else if (Ncl.style = "display:block;"  )
      {Ncl.classList.remove("fun")};

   })

dans tes if tu as mit un seul =, du coup ça marche pas, il faut == ou ===

Et tu n'a pas mit les changement de style display dans l'action de condition, il n'y a que le changement de class

Ha super merci j'ai reussi ! J'ai compris pourquoi ça ne marchait pas, en fait cela ne fonctionne qu'avec getelementbyid, mon getelementbyclassname ne donnait rien (apres je ne sais pas vraiment pourquoi?). En tout cas j'ai eu le résultat que je voulais mais cela m'oblige à multiplier les lignes de code pour chaque id :/. Quel méthode je pourrais utiliser pour tout agglomérer ?

   document.querySelector("select").addEventListener("click",() => {
    var Ncl = document.getElementById('test2');
    var Ncl1 = document.getElementById('test');
    var Ncl2 = document.getElementById('test3');
    var Ncl3 = document.getElementById('test4');

      if(Ncl.style.display == "block" ){
      Ncl.classList.add("hide");}

      else if (Ncl.style.display == "none")
      {Ncl.classList.remove("hide")};

      if(Ncl1.style.display == "block" ){
      Ncl1.classList.add("hide");}

      else if (Ncl1.style.display == "none")
      {Ncl1.classList.remove("hide")};

      if(Ncl2.style.display == "block" ){
      Ncl2.classList.add("hide");}

      else if (Ncl2.style.display == "none")
      {Ncl2.classList.remove("hide")};

      if(Ncl3.style.display == "block" ){
        Ncl3.classList.add("hide");}

      else if (Ncl3.style.display == "none")
      {Ncl3.classList.remove("hide")};

   })

Bonjour,

j'ai créé une liste déroulante avec une zone de texte. J'aimerais intégrer dans le "pattern" de ma zone de texte une colonne de mon tableau MYSQL afin de restreindre les solutions possibles. Cependant, je ne comprends pas parce qu'il ne prend en compte que la première ligne de mon tableau dans le pattern de ma liste, la 1er valeur de mon tableau est acceptée mais pas les autres?
J'ai utilisé le même code pour incrementer les options de ma liste déroulante et la, pas de soucis, toutes les valeurs de la colonne apparaissent.
Sait-tu ou est le soucis de mon code ?
$ville_slug est la colonne que je veux intégrer et $villes_france_free est le teableau MYSQL.

Merci par avance.

<input type="text" id="t1" name="fruit" list="l1" required

    <?php   foreach($ville_slug as $villes_france_free) { ?>

    pattern  = <?php echo $villes_france_free['ville_slug'] ?> >

    <datalist id="l1">

      <option><?php echo $villes_france_free['ville_slug'] ?> </option>
      <?php } ?>