Créer une variable avec .click(fontion(e){

Eléphant du PHP | 75 Messages

07 févr. 2013, 19:17

Bonjour,

Je me suis lancé dans l'apprentisage de l'ajax et malheureusement ça se fait dans la douleur !! :cry:

je souhaite créer une variable php suite à une action sur un lien mais hélas je n'ai aucune réaction sur ma page..
je souhaite créer une variable en reprenant le nom de la class du lien cliqué...
Si quelqu'un pouvait me donner un conseil ça serait génial car je bloque grave...
<div id="cylindre_A" style="float:left;">
   <div class="c1">
            <a href="#" class="A-entree"><img src="images/A-entree.jpg"></a>
            <a href="#" class="A-simple"><img src="images/A-simple.jpg"></a>      
   </div>
</div>
<div id="retour">
    <i>vide</i>
</div>
mon fichier submit.js :
[javascript]jQuery(document).ready(function($){
$('#cylindre_A img').click(function(e){
// On désactive le comportement par défaut du navigateur
// (qui consiste à appeler la page action du formulaire)
e.preventDefault();

// On envoi la requête AJAX
$.getJSON(
'requete.php',
{label: var $label = $(this).parent('a').attr('class')},
function(data){
$('#retour').hide();
$('#retour').html('')
.append('<b>Paramètre en majuscule</b> : '+data.chaine+'<br>')
.append('<b>Date</b> : '+data.date+'<br>')
.append('<b>Version PHP</b> : '+data.phpversion+'<br>');
$('#retour').fadeIn();
}
);
});

});[/javascript]
Mon fichier requete.php
<?php
/*
 *  Script PHP qui traite les requêtes AJAX envoyées par le client 
**/
 
// Récupération des paramètres
$label = '';
if( isset($_GET['label']) ){
    $label = $_GET['label'];
}
 
// Traitements
$retour = array(
    'chaine'    => strtoupper($label),
    'date'      => date('d/m/Y H:i:s'),
    'phpversion'=> phpversion()
);
 
// Envoi du retour (on renvoi le tableau $retour encodé en JSON)
header('Content-type: application/json');
echo json_encode($retour);
?>
j'aimerai que la class du lien cliqué soit transformé en variable php

Modérateur PHPfrance
Modérateur PHPfrance | 2575 Messages

10 févr. 2013, 19:58

Bonjour, j'ai testé ce programme et ça marche:
<!-- Load jQuery  -->
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>

<script type="text/javascript">
//demarrage jquery
$(document).ready(function($){
    $('#cylindre_A img').click(function(e){
        // On désactive le comportement par défaut du navigateur
        // (qui consiste à appeler la page action du formulaire)
        e.preventDefault();
               
        // On envoi la requête AJAX
        $.getJSON(
            'requete.php',
            {label: $(this).parent('a').attr('class')},
            function(data){
                $('#retour').hide();
                $('#retour').html('')
                    .append('<b>Paramètre en majuscule</b> : '+data.chaine+'<br>')
                    .append('<b>Date</b> : '+data.date+'<br>')
                    .append('<b>Version PHP</b> : '+data.phpversion+'<br>');
                $('#retour').fadeIn();
            }
        );
    });
});
</script>
<div id="cylindre_A" style="float:left;">
   <div class="c1">
            <a href="#" class="A-entree"><img src="images/A-entree.jpg"></a>
            <a href="#" class="A-simple"><img src="images/A-simple.jpg"></a>      
   </div>
</div>
<div id="retour">
    <i>vide</i>
</div>
--------//////----//---//----//////
-------//---//----//---//----//---//
------//////----//////-----//////
-----||--------||--||---||
Prendre le recul n'est pas une perte de temps.


ps: Affrontez moi dans l'arène

Eléphant du PHP | 353 Messages

10 févr. 2013, 22:53

Je te propose, ce qui à mon sens est une solution bien plus propre à tout point de vue : plus facile à comprendre, à débugger, ... Plutôt de de reconstruire en javascript l'uri de la ressource que tu veux atteindre et plutôt que de mettre une ancre en tant que lien, pourquoi ne pas mettre le vrai lien dans l'attribut href ?

Code : Tout sélectionner

div class="c1"> <a href="requete.php?label=entree" class="A-entree"><img src="images/A-entree.jpg"></a> <a href="requete.php?label=simple" class="A-simple"><img src="images/A-simple.jpg"></a> </div>
Après en javascript il suffit de récupérer l'attribut href du lien cliqué ! L'autre avantage est que si tu veux débugger facilement le code renvoyé, il te suffit de faire clic droit "ouvrir dans un nouvel onglet" pour voir le contenu renvoyé par la requête ajax.

Eléphant du PHP | 75 Messages

14 mars 2013, 13:51

Après une pose de 1 mois dans le développement de l'appli, j'essai tant bien que mal de me replonger dedans !

étant novice en jquery, je tourne en rond et j’avoue avoir du mal à appliquer vos recommandations... :(

Pour répondre à sadeq : ça ne fonctionne pas chez moi !
Nicolas merci pour ta recommandation. En effet ça à l'air plus simple dans le texte.. mais je ne sais pas par quoi commencer :oops:

Je désespère...

ViPHP
ViPHP | 1996 Messages

17 mars 2013, 00:18

Que te donnes :

[javascript]$(document.body).on({
click :function (event) {
event.preventDefault();

$.ajax({
url : 'requete.php',
data : {class : $(this).parent(a).attr('class')},
type : "post",
complete : function (xhr, result)
{
if (result != "success") return;
var reponse = xhr.responseText;
alert (reponse);
}
});
}
},'#cylindre_A div a img');[/javascript]

Tu remarqueras que je n'ai pas mis ready() c'est volontaire. Attention ce code fonctionne si Jquery est >= 1.7 (on en ai à la 1.9.1 aujourd'hui)
It is nice to be important but it is more important to be nice
http://www.aureuswebfactory.fr

Eléphant du PHP | 120 Messages

17 mars 2013, 15:50

Le problème est que ton script jette déjà une erreur de syntaxe. =D>

[javascript]{label: var $label = $(this).parent('a').attr('class')}[/javascript]

ça ne veut strictement rien dire. D'ailleurs je te conseille vivement d'installer Firebug ou d'utiliser le débugger JS de Chromium, IE ou Safari pour ce genre d'erreurs.