Comment insérer du PHP dans du JavaScript

Cette question, idiote il y a quelques années, semble avoir trouvé des réponses récemment avec l’avènement d’Ajax.

Je vous invite à découvrir Xajax, qui permet d’appeler  facilement des fonctions prédéfinies. Je n’irai pas plus loin car je préfère pour ma part créer mes propres fonctions grâce à Prototype, mais c’est à connaître et ça évite un chargement désormais superflu d’une page supplémentaire.

Proposé par Rom's Catégorisé dans : Ajax, Applications pratiques 0 commentaire » décembre 2007

Exemples d’utilisation de Prototype

Connaissez-vous Prototype ? Si oui, tant mieux, si non il faut absolument que vous lisiez ce post jusqu’au bout.

Pour faire simple, la librairie Prototype permet de simplifier nombre de fonctionnalités que l’on souhaite faire via JavaScript / Ajax.

Exemple 1 : en une ligne de code, vous envoyez le contenu d’un formulaire vers un fichier distant, récupérez le contenu généré par ce fichier distant et l’insérez dans le conteneur de votre choix.
var recupererInfo = function(quelForm){
Params = Form.serialize(quelForm);
new Ajax.Updater('idConteneurSouhaite','fichierDistant.php', {parameters:Params});
}

pour aller plus loin, on peut mettre plus de paramètres entre les accolades. exemple : {method: 'post', parameters: Form.serialize(form), asynchronous:false, evalScripts:true}
On peut aussi définir de ne pas remplacer le contenu du conteneur souhaité et plutôt mettre à la suite de ce qu’il contient déjà, il suffit de rajouter “,insertion: Insertion.Bottom” . exemple : new Ajax.Updater('idConteneurSouhaite','fichierDistant.php', {parameters:Params},insertion: Insertion.Bottom);

Exemple 1bis : suite à la demande d’Abid, voici un exemple complet pour la soumission d’un formulaire en Ajax :
<script type="text/javascript">
/*
* personnellement, je déconseille désormais
* l'utilisation des commentaires HTML dans
* les balises JS qui n'ont plus vraiment
* d'incidence sur les navigateurs et qui
* peuvent poser des problèmes avec Prototype
*/
var lancerRecherche = function(infosForm) {
new Ajax.Updater('resultatsRecherche','exeRecherche.php', {parameters:infosForm});
}
</script>
<form method="post">
<fieldset>
<legend>Recherche</legend>
<select name="typeRecherche"> <option value="societe">Société</option> <option value="numCommande">Numéro de commande</option> <option value="nomParticipant">Nom de participant</option> </select>
<input name="recherche" type="text" />
<input value="Chercher" onclick="lancerRecherche(Form.serialize(this.form)); return false;" type="submit" />
</fieldset>
</form>

Pour cet exemple, le fichier exeRecherche.php reçoit les variables $_POST envoyées par le formulaire (sauf envoi de fichier en multipart/postdata) et renvoie son rendu HTML dans le conteneur resultatsRecherche.

Exemple 2 : version simplifiée du premier exemple. Via une ligne de code, envoyez un paramètre en GET ou en POST à un fichier et récupérez son contenu dans le contenur de votre choix.
var recupererInfo = function(param1,param2){
Params = 'monParam1='+param1+'&monParam2='+param2;
new Ajax.Updater('idConteneurSouhaite','fichierDistant.php', {method: 'get',parameters:Params});
}

Exemple 3 : vous pouvez récupérer le contenu de n’importe quel champ de formulaire, que ce soit une liste déroulante, des boutons radio, ou une champ de texte : alert( $F(’idDeMonChamp’) );

Exemple 4 : vous pouvez oublier les document.getElementById(’idDeMonConteneur’) et autres document.all(’idDeMonConteneur’) et tout remplacer par le très simple $(’idDeMonConteneur’)

Proposé par Rom's Catégorisé dans : Ajax, Applications pratiques, Découvrir Ajax 2 commentaires » novembre 2007