Bonjour, j'ai un petit soucis avec mon collapsible JS.

Tout d'abord je précise que j'utilise Materialize.

Le soucis ne viens pas du collapsible en lui même mais plutôt du traitement de la page PHP.

J'utilise un fichier .html comme template :

<ul class = "collapsible" onclick="alerte('test')" data-collapsible = "accordion">
    <li>
        <div class = "collapsible-header">
            <i class = "material-icons">*</i>
            {{name}}
        </div>
        <div class = "collapsible-body">
            <table>
                <thead>
                <tr>
                    <th>Organisateur</th>
                    <th>Date</th>
                    <th>Top</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>{{organizer}}</td>
                    <td>{{day}}</td>
                    <td>{{top}}</td>
                </tr>
                </tbody>
            </table>
            
            <table>
                <tr>
                    <td>{{captain}}</td>
                    <td>{{player1}}</td>
                    <td>{{player2}}</td>
                    <td>{{player3}}</td>
                </tr>
                {{sub}}
                <tr>
                    <td>Total Kills : {{kills}}</td>
                </tr>
            </table>
            
            <div>
                <p>Add by : {{user}}</p>
                <p>{{dateadd}}</p>
            </div>
        </div>
    </li>
</ul>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('.collapsible');
        var instances = M.Collapsible.init(elems);

        instances.open(2)
    });
</script>

les terme entre {{XX}} sont ceux généré par PHP via la fonction suivante :

public function allEvents(Events &$events, $pseudo, $modelHtml) {
			
			if (!empty($events->getSub1()) && !empty($events->getSub2())) {
				$sub = "<tr><td>{$events->getSub1()}</td><td>{$events->getSub2()}</td></tr>";
			} else {
				$sub = "";
			}
			
			$arrReplace = ['{{id}}' => $events->getID_event(),
				'{{organizer}}' => $events->getOrganizer(),
				"{{name}}" => $events->getName(),
				"{{day}}" => $events->getDay(),
				"{{top}}" => $events->getTop(),
				"{{captain}}" => $events->getCaptain(),
				"{{player1}}" => $events->getPlayer1(),
				"{{player2}}" => $events->getPlayer2(),
				"{{player3}}" => $events->getPlayer3(),
				"{{sub}}" => $sub,
				"{{kills}}" => $events->getKills(),
				"{{user}}" => $pseudo,
				"{{dateadd}}" => $events->getDateAdd(),];
			
			return strtr($modelHtml, $arrReplace);
		}

le code une fois appelé sur la page est donc généré via :

	if (!empty($allEvent)) {
		foreach ($allEvent as $value) {
			$allEventShow .= $eventManager->allEvents($value,$pseudo,$cardResult);
		}
	} else {
		$allEventShow = "Aucun Evènement";
	}
	
	echo $allEventShow;

Or une fois généré sur la page le collapsible n'est plus fonctionnel.

Cependant il l'est si je charge juste l'url du fichier HTML, donc le soucis ne viens visiblement pas du code JS mais du code PHP.

Le soucis intervient après la génération du code via PHP, mais je ne sais pas comment corriger ça, j'ai tenté de mettre le code JS directement sur la page PHP (et non dans le template) mais rien n'est fait, pourtant une fois dans l'inspecteur d'évènement on vois bien le script et le bon code php.

Help me please

Bonjour,

Le code généré par le php est-il conforme au code "en dur" qui fonctionne ?

bxdfr a écrit:

Bonjour,

Le code généré par le php est-il conforme au code "en dur" qui fonctionne ?