JeuWeb - Crée ton jeu par navigateur
jQuery + Ajax - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : jQuery + Ajax (/showthread.php?tid=5136)

jQuery + Ajax - Jabberwock - 31-08-2010

Bonjour j'ai encore un problème avec jQuery alors que sans je n'avait pas...

Je vais avoir du mal à vous expliquer alors je vous montre,



$(".flotte").click(function(){

  idf = $(this).attr('title');

  $.post(

    "info_flotte.php",

    { numero: idf },

    function(data){

      $('#flotte_info').slideUp(300).html(data);

      mtr_flotte();

    }

  );

});

Voila pour jQuery, à l'intérieur de la seconde fonction sa me retourne du txt que je place à l'intérieur d'un div et dans ce texte, j'ai ceci :

Code :
$js = "javascript:cok()";
echo "Position, <a href='#' onClick=".$js.";>".$rezultat['name']."</a><br />";

... Voila impossible d'appeler la fonction(tant que je la laisse à l'intérieur du code jQuerry), j'ai aussi remarquer que si je crée une fonction alert('ok') qui s'active à chaque lien sa ne marche pas avec les lien provenant d'un POST.

Ma question est, est-il possible de faire en sorte que sa marche ?

J'éspère que j'ai été assez clair :x, merci d'avoir lu en tout cas ^^.

Ps : pour le code php j'ai fait nimp au niveau des noms :p

RE: jQuery + Ajax - niahoo - 31-08-2010

remplace $js = "javascript:cok()"; par $js = "cok()";

RE: jQuery + Ajax - Sephi-Chan - 31-08-2010

Déjà oui, le pseudo-protocole javascript: n'existe pas, de même que l'attribut onClick, qui doit s'écrire intégralement en minuscule. Ce sont des fantaisies du Web des années 1990 qui ont la vie dure et dont il faut se débarrasser. Smile

Ensuite, je ne comprends pas ce qu'est le bout de code PHP. C'est le contenu de la page info_flotte.php ?

Qu'est-ce que tu entends par impossible d'appeler la fonction ? Est-ce que le callback de ton appel Ajax est exécuté ? Vérifie en mettant un console.log(data) dedans (avec Firefox + Firebug, Safari ou Chrome).

Jabberwock a écrit :si je crée une fonction alert('ok') qui s'active à chaque lien sa ne marche pas avec les lien provenant d'un POST

Là non plus je ne comprends pas le sens de la phrase.

Bref, Essaye de t'exprimer plus clairement, de manière plus technique, en nommant ce que tu désignes (par exemples tu devrais citer le nom de ta fonction au lieu de parler de "la deuxième"), etc.


Sephi-Chan

RE: jQuery + Ajax - Jabberwock - 31-08-2010

Je vais essayer de mieux m'exprimer, donc :
voici une partie du code javascript :

Code :
    $(".planete").click(function(){
        idp = $(this).attr('title');
        $.post("info_planete.php", {identifiant: idp},function(data){
            $('#info').slideUp(300).html(data);
            mtr_planete();
        });
    });
    
    $(".flotte").click(function(){
        idf = $(this).attr('title');
        $.post("info_flotte.php", {numero: idf},function(data){
            $('#flotte_info').slideUp(300).html(data);
            mtr_flotte();
        });
    });

    function mtr_planete(){
        $('#flotte_info').slideUp();
        $('#scan_info').slideUp();
        $('#info').slideDown();
    };
    
    function mtr_flotte(){
        $('#info').slideUp();
        $('#scan_info').slideUp();
        $('#flotte_info').slideDown();
    };
    
    function mtr_scan(){
        $('#flotte_info').slideUp();
        $('#info').slideUp();
        $('#scan_info').slideDown();
    };

image 1
[Image: fdplanete.png]

image 2
[Image: fdflotte.png]

Lorsque vous clickez sur une planète de la galaxie grâce à jQuery on retire le titre de cette image (id de la planète) on l'envoie dans un fichier php par la méthode PSOT qui se charge de réunir les informations la concernant une fois cela fini la fonction call back place le tout dans la div spécifique au description de planète et la fait apparaitre. résultat => image 1

Lorsque vous clickez sur la case rouge(= l'une de vos flottes) à l'intérieur de la galaxie ou sur un raccourci concernant votre flotte (que vous pouvez voir sur l'image en bas à gauche) vous obtenez des informations sur votre flotte (même principe que pour les planètes). résultat => image 2

A certain moment votre flotte peux se trouver sur une planète, c'est le cas ici, si vous regardez l'image n°2 vous pourrez voir Info supplémentaire, position, #nom de la planète#.

En voyant ça je me suis dit "Et si le joueur veux des informations sur la planète où ce trouve sa flotte je vais lui faciliter la tâche, s'il click dessus il obtiendra les informations de cette planète !"

A l'intérieur de mon code php ("info_flotte.php") j'ai donc englober #nom de la planète# par la class .planete et placé son identifiant à l'intérieur sous son titre.

Sauf que lorsque je clique sur #nom de la planète# rien ne se passe. (là est mon problème... rien ne se passe)

le code de cette ligne :
Code PHP :
<?php 

        echo "Position, <span  class='planete' title='".$idp."'><a href='#'>".$rezultat['name']."</a></span><br />";


Surtout si vous avez du mal à comprendre ne pas lire la suite xD.
jQuery ne détecte pas les balise importer par Ajax ?. Si je place un onclick=mtr_planete() dans la balise <a> sa ne marche pas. Mais si je créer une fonction en dehors de jQuery par exemple :

Code :
<script type="text/javascript">
function verif_ok(){
alert('ok');
}
</script>

et que je place onclick=verif_ok() à l'intérieur des balises <a></a> de ma ligne php et ben, j'ai bien l'alert lorsque je click sur #nom de la planète#.
Je peux utiliser jQuery mais pas appeler de fonction, par exemple :
Code :
onclick="$('#info').css('display','none')"
Si je place ce bout de code dans les balises <a></a> lors du click la div info disparaitra bien...

RE: jQuery + Ajax - djidi - 01-09-2010

Je pense que cela ne fonctionne pas car ton <span class="planete"> est créé après que jQuery ai détecté tous les éléments.

Code :
$(".planete").click(function(){
        idp = $(this).attr('title');
        $.post("info_planete.php", {identifiant: idp},function(data){
            $('#info').slideUp(300).html(data);
            mtr_planete();
        });
    });

Ce code ne détecte les classes "planete" qu'au chargement de la page.
Une fois celle-ci chargée, si tu rajoute un nouvel élément de cette classe il ne sera pas pris en compte.

Pour qu'il soit détecté, tu dois appliquer à nouveau le "$(".planete").click();" à l'intérieur de lui même (en créant une fonction ce serait plus propre).

Code :
$(".planete").click(function(){
        idp = $(this).attr('title');
        $.post("info_planete.php", {identifiant: idp},function(data){
            $('#info').slideUp(300).html(data);

            $(".planete").click(function(){
                idp = $(this).attr('title');
                $.post("info_planete.php", {identifiant: idp},function(data){
                    $('#info').slideUp(300).html(data);
                    mtr_planete();
                });
            });

            mtr_planete();
        });
    });

Après, il a y sans peut-etre une autre méthode plus pratique Smile

RE: jQuery + Ajax - Anthor - 01-09-2010

http://api.jquery.com/live/
http://plugins.jquery.com/project/livequery/

RE: jQuery + Ajax - Jabberwock - 01-09-2010

Merci de votre aide mais enfaite c'était tout con, le code javascript que j'ai écrit est entouré de "$(function(){ ... });" qui sert à attendre je sais plus quoi avec jQuery... J'ai sorti mes fonctions de ça j'obtiens donc -> :

Code :
    function planete(idp){
    
    idp = idp.toString();
    
    if(idp.length == 1){
    idp = "00"+idp;
    }
    else if(idp.length == 2){
    idp = "0"+idp;
    }
    else{
    }
        $.post("info_planete.php", {identifiant: idp},function(data){
            $('#info').slideUp(300).html(data);
            mtr_planete();
        });
    };
    
    function flotte(idf){
        $.post("info_flotte.php", {numero: idf},function(data){
            $('#flotte_info').slideUp(300).html(data);
            mtr_flotte();
        });
    };
    
    function mtr_planete(){
        $('#flotte_info').slideUp();
        $('#scan_info').slideUp();
        $('#info').slideDown();
    };
    
    function mtr_flotte(){
        $('#info').slideUp();
        $('#scan_info').slideUp();
        $('#flotte_info').slideDown();
    };
    
    function mtr_scan(){
        $('#flotte_info').slideUp();
        $('#info').slideUp();
        $('#scan_info').slideDown();
    };
    
    
$(function(){
    
    $(".planete").click(function(){
        idp = $(this).attr('title');
        planete(idp);
    });
    
    $(".flotte").click(function(){
        idf = $(this).attr('title');
        flotte(idf);
    });

});

Pour le php :
Code PHP :
<?php 

        echo "Position, <span  class='planete'><a href='#' onclick='planete(".$idp.")>".$rezultat['name']."</a></span><br />";


RE: jQuery + Ajax - Sephi-Chan - 01-09-2010

Hm… Je te conseille de réviser les bases de jQuery. Le code suivant permet d'exécuter le code placé dans la fonction anonyme une fois le DOM chargé.



$(function(){

  // ...

});


Sephi-Chan