11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Incompatibilité Firefox ou BUG ?

Bonjour à toutes et à tous,

Dans le cadre du developpement d'un jeu par navigateur, j'ai du (moi qui ai peut de connaissance en javascript) passer par jQuery pour faciliter mon travail. Je souhaite faire des requetes PHP (asynchrones) lors ce qu'on utilisateur clique sur un bouton spécifique. J'ai donc créé une page php pour ma requete php, une page qui contient le bouton et une page .JS appelée à la fin de mon footer.php (dans la balise <body>).

Tout se passe bien sous chrome, la requête est lancée et mes modifications de style et d'attributs se font bien.

En revanche, testé sous Mozilla Firefox, rien ne se passe pour cette fonction :


$(document).ready(function() {

    $(".changeStatut").click(function() {
        event.preventDefault();
        $('#projectActualStatutButton').prop('disabled', true);
        var select = $(this);
        var id = select.attr('id');
        $('#projectActualStatutButtonIcon').removeClass();
        $('#projectActualStatutButtonIcon').addClass('fa fa-spinner fa-spin fa-fw');
        $.ajax({
            url: '../ajax/admin.project.statut.php',
            type: 'POST',
            data: { projectId: $('#projectId').attr('value'), projectDefaultStatut: id },
            dataType: 'json',
            success: function(json) {
                if(json.result === 'success') { // En priorité.
                    $('#projectResult').html('<div class="notice notice-success">' + json.notification + '</div>');
                    if(id == 'projectStatut1') {
                        $('#projectActualStatutButtonIcon').removeClass();
                        $('#projectActualStatutButtonIcon').addClass('fa fa-forward fa-fw');
                        $('#projectActualStatutButton').removeClass();
                        $('#projectActualStatutButton').addClass('btn btn-warning dropdown-toggle');
                        $('#projectActualStatutButton').prop('disabled', false);
                        $('#projectActualStatut').html('En priorité');
                        $('#projectStatut1').hide();
                        $('#projectStatut2').show();
                        $('#projectStatut3').show();
                        $('#projectStatut4').show();
                        $('#projectStatut5').show();
                        $('#projectStatut6').show();
                    } else if(id == 'projectStatut2') { // En cours.
                        $('#projectActualStatutButtonIcon').removeClass();
                        $('#projectActualStatutButtonIcon').addClass('fa fa-play fa-fw');
                        $('#projectActualStatutButton').removeClass();
                        $('#projectActualStatutButton').addClass('btn btn-info dropdown-toggle');
                        $('#projectActualStatutButton').prop('disabled', false);
                        $('#projectActualStatut').html('En cours');
                        $('#projectStatut1').show();
                        $('#projectStatut2').hide();
                        $('#projectStatut3').show();
                        $('#projectStatut4').show();
                        $('#projectStatut5').show();
                        $('#projectStatut6').show();
                    } else if(id == 'projectStatut3') { // En attente.
                        $('#projectActualStatutButtonIcon').removeClass();
                        $('#projectActualStatutButtonIcon').addClass('fa fa-hourglass-half fa-fw');
                        $('#projectActualStatutButton').removeClass();
                        $('#projectActualStatutButton').addClass('btn btn-primary dropdown-toggle');
                        $('#projectActualStatutButton').prop('disabled', false);
                        $('#projectActualStatut').html('En attente');
                        $('#projectStatut1').show();
                        $('#projectStatut2').show();
                        $('#projectStatut3').hide();
                        $('#projectStatut4').show();
                        $('#projectStatut5').show();
                        $('#projectStatut6').show();
                    } else if(id == 'projectStatut4') { // Terminé.
                        $('#projectActualStatutButtonIcon').removeClass();
                        $('#projectActualStatutButtonIcon').addClass('fa fa-check-square fa-fw');
                        $('#projectActualStatutButton').removeClass();
                        $('#projectActualStatutButton').addClass('btn btn-success dropdown-toggle');
                        $('#projectActualStatutButton').prop('disabled', false);
                        $('#projectActualStatut').html('Terminé');
                        $('#projectStatut1').show();
                        $('#projectStatut2').show();
                        $('#projectStatut3').show();
                        $('#projectStatut4').hide();
                        $('#projectStatut5').show();
                        $('#projectStatut6').show();
                    } else if(id == 'projectStatut5') { // Suspendu.
                        $('#projectActualStatutButtonIcon').removeClass();
                        $('#projectActualStatutButtonIcon').addClass('fa fa-pause fa-fw');
                        $('#projectActualStatutButton').removeClass();
                        $('#projectActualStatutButton').addClass('btn btn-default dropdown-toggle');
                        $('#projectActualStatutButton').prop('disabled', false);
                        $('#projectActualStatut').html('Suspendu');
                        $('#projectStatut1').show();
                        $('#projectStatut2').show();
                        $('#projectStatut3').show();
                        $('#projectStatut4').show();
                        $('#projectStatut5').hide();
                        $('#projectStatut6').show();
                    } else if(id == 'projectStatut6') { // Annulé.
                        $('#projectActualStatutButtonIcon').removeClass();
                        $('#projectActualStatutButtonIcon').addClass('fa fa-ban fa-fw');
                        $('#projectActualStatutButton').removeClass();
                        $('#projectActualStatutButton').addClass('btn btn-danger dropdown-toggle');
                        $('#projectActualStatutButton').prop('disabled', false);
                        $('#projectActualStatut').html('Annulé');
                        $('#projectStatut1').show();
                        $('#projectStatut2').show();
                        $('#projectStatut3').show();
                        $('#projectStatut4').show();
                        $('#projectStatut5').show();
                        $('#projectStatut6').hide();
                    }

                } else {

                    if(json.defaut == 1) { // En prioté.
                        $('#projectActualStatutButtonIcon').removeClass();
                        $('#projectActualStatutButtonIcon').addClass('fa fa-forward fa-fw');
                        $('#projectActualStatutButton').removeClass();
                        $('#projectActualStatutButton').addClass('btn btn-warning dropdown-toggle');
                        $('#projectActualStatutButton').prop('disabled', false);
                        $('#projectActualStatut').html('En priorité');
                        $('#projectStatut1').hide();
                        $('#projectStatut2').show();
                        $('#projectStatut3').show();
                        $('#projectStatut4').show();
                        $('#projectStatut5').show();
                        $('#projectStatut6').show();
                    } else if(json.defaut == 2) { // En cours.
                        $('#projectActualStatutButtonIcon').removeClass();
                        $('#projectActualStatutButtonIcon').addClass('fa fa-play fa-fw');
                        $('#projectActualStatutButton').removeClass();
                        $('#projectActualStatutButton').addClass('btn btn-info dropdown-toggle');
                        $('#projectActualStatutButton').prop('disabled', false);
                        $('#projectActualStatut').html('En cours');
                        $('#projectStatut1').show();
                        $('#projectStatut2').hide();
                        $('#projectStatut3').show();
                        $('#projectStatut4').show();
                        $('#projectStatut5').show();
                        $('#projectStatut6').show();
                    } else if(json.defaut == 3) { // En attente.
                        $('#projectActualStatutButtonIcon').removeClass();
                        $('#projectActualStatutButtonIcon').addClass('fa fa-hourglass-half fa-fw');
                        $('#projectActualStatutButton').removeClass();
                        $('#projectActualStatutButton').addClass('btn btn-primary dropdown-toggle');
                        $('#projectActualStatutButton').prop('disabled', false);
                        $('#projectActualStatut').html('En attente');
                        $('#projectStatut1').show();
                        $('#projectStatut2').show();
                        $('#projectStatut3').hide();
                        $('#projectStatut4').show();
                        $('#projectStatut5').show();
                        $('#projectStatut6').show();
                    } else if(json.defaut == 4) { // Terminé.
                        $('#projectActualStatutButtonIcon').removeClass();
                        $('#projectActualStatutButtonIcon').addClass('fa fa-check-square fa-fw');
                        $('#projectActualStatutButton').removeClass();
                        $('#projectActualStatutButton').addClass('btn btn-success dropdown-toggle');
                        $('#projectActualStatutButton').prop('disabled', false);
                        $('#projectActualStatut').html('Terminé');
                        $('#projectStatut1').show();
                        $('#projectStatut2').show();
                        $('#projectStatut3').show();
                        $('#projectStatut4').hide();
                        $('#projectStatut5').show();
                        $('#projectStatut6').show();
                    } else if(json.defaut == 5) { // Suspendu.
                        $('#projectActualStatutButtonIcon').removeClass();
                        $('#projectActualStatutButtonIcon').addClass('fa fa-pause fa-fw');
                        $('#projectActualStatutButton').removeClass();
                        $('#projectActualStatutButton').addClass('btn btn-default dropdown-toggle');
                        $('#projectActualStatutButton').prop('disabled', false);
                        $('#projectActualStatut').html('Suspendu');
                        $('#projectStatut1').show();
                        $('#projectStatut2').show();
                        $('#projectStatut3').show();
                        $('#projectStatut4').show();
                        $('#projectStatut5').hide();
                        $('#projectStatut6').show();
                    } else if(json.defaut == 6) { // Annulé.
                        $('#projectActualStatutButtonIcon').removeClass();
                        $('#projectActualStatutButtonIcon').addClass('fa fa-ban fa-fw');
                        $('#projectActualStatutButton').removeClass();
                        $('#projectActualStatutButton').addClass('btn btn-danger dropdown-toggle');
                        $('#projectActualStatutButton').prop('disabled', false);
                        $('#projectActualStatut').html('Annulé');
                        $('#projectStatut1').show();
                        $('#projectStatut2').show();
                        $('#projectStatut3').show();
                        $('#projectStatut4').show();
                        $('#projectStatut5').show();
                        $('#projectStatut6').hide();
                    }
                }
            }
        });
    });

});


Quelqu'un aurai-t-il une idée d'où ça peut coincer ?

Merci pour vos réponses et désolé pour mon travail un peut "archaïque" je débute Smiley langue
Bonsoir Mikz92,
à ce stade de code je te conseille d'apprendre javascript, car jQuery n'a été utilisable ou utilisé "en raccourci" qu'à la condition de savoir ce qui s'y passe de tout script.

Sache également que jQuery n'a réellement aujourd'hui pas d'avenir : cependant il l'avait de 2005 à 2012 ...

Car tout va si vite !
Modifié par pictural (25 Nov 2016 - 00:39)
Bonjour pictural et merci pour ta réponse.

Suite à ce post, j'ai effectivement, compris que jQuery a eu du succès mais qu'aujourd'hui il existe d'autres frameworks que jQuery bien plus simples à utiliser et bien plus efficaces.

Je me suis donc tourné sur la solution jQuery/Angular (pour ne pas trop me chambouler).

Pour faire suite à ta reponse, Javascript est un language que je connais mais que je ne maitrise pas totalement, moi qui développe principalement en PHP. Ces deux languages qui n'on pas les mêmes rôles et fonctionnalités se ressemble tout de même énormément sur la syntaxe (d'où mon erreur de penser que Javascript est un language simple). Il est relativement simple mais je l'ai sous estimé.

A savoir que j'ai réussi à solutionner mon probleme en révisant toutes les fonctions jQuery et autres... je mélangeais des fonctions, enfin bref c'était le bordel total dans mon Code....

Conclusion :
Moi qui souhaite rendre mon jeu/site utilisable depuis des mobiles, tablettes et desktop (la methode Apache Cordova), que pense tu d'un couplage jQuery/Angular pour mon jeu ? Connaîtrais-tu un Framework qui serai plus dans mes attentes ?
Je fouine encore mais pour le moment ce couplage est tout a fait efficace et je ne rencontre plus aucun soucis et blocages quelconque avec le peut de connaissances que je peux avoir.

Je clôs ce sujet, peux tu me repondre par MP ?

Je te/vous remercie d'avance.
Administrateur
pictural a écrit :
Sache également que jQuery n'a réellement aujourd'hui pas d'avenir

C'est un peu osé de parler ainsi du framework de loin le plus utilisé dans le web aujourd'hui (80 à 90% des sites web sans doute, sans oublier les autres Frameworks basés sur jQuery telw que Angular ou autre).

Tu t'appuyes sur quel constat pour dire cela ? Des sites tels que youmightnotneedjquery ? Smiley cligne

mikz92 a écrit :
j'ai effectivement, compris que jQuery a eu du succès mais qu'aujourd'hui il existe d'autres frameworks que jQuery bien plus simples à utiliser et bien plus efficaces.

Je me suis donc tourné sur la solution jQuery/Angular

... Smiley biggrin
Modifié par Raphael (25 Nov 2016 - 08:52)
Je suis content de voir que je ne suis pas le seul à penser ça de JQuery.

L'argument massue de JQuery à l'époque où il est sorti, c'était essentiellement la compatibilité, notamment envers les vieux IE.

Maintenant que Windows XP est dehors, que pratiquement plus personne n'a d'IE6, 7 ou 8, ce besoin de compatibilité n'est plus si important, car IE9 est bien plus proche des standards que ses prédécesseurs.
Manipuler le DOM aujourd'hui se fait aussi facilement dans IE que dans un autre navigateur. Donc la couche de compatibilité JQuery n'a plus vraiment de raison d'être.

Ne venez pas me dire le contraire, j'ai déjà codé plusieurs choses avec un code vanilla identique qui marchait aussi bien sur IE9 qu'ailleurs sans modifications. Les hack odieux qui restent sont tous pour du IE6, 7 et un peu 8.
La compatibilité au niveau CSS c'est un autre sujet. D'ailleurs en JavaScript, on ne devrait jamais manipuler de code CSS, mais juste ajouter/enlever des classes aux éléments et rien d'autre.

On ne peut pas vraiment comparer JQuery avec Angular à mon avis. Angular est un framework complet qui propose un point de vue et une façon de développer totalement différents du javascript classique; là où JQuery n'est pour moi non pas un réel framework mais juste une couche censée être simplificatrice.
En réalité si on prend vraiment le temps de comparer un code vanilla moderne et un code JQuery, on s'aperçoit que les différences ne sont pas si énormes que la légende veut bien le faire croire.

Rien qu'un exemple: bien peu de monde semblent connaître querySelector/querySelectorAll. Pourtant ça fait exactement la même chose que votre bien aimé $ et ce depuis IE8; c'est juste un peu plus long à écrire, mais c'est pareil.
Pareil pour l'évènement ready, qui a juste un autre nom. Pareil encore moyennant quelques petites lignes pas bien compliquées pour parcourir un ensemble d'éléments ou leur ajouter des évènements en un seul coup. "on" c'est plus court à écrire que "addEventListener" mais c'est encore une fois la même chose. Les méthodes de Array sont largement méconnues aussi.
ET je pourrais continuer comme ça longtemps à casser des mythes idiots comme quoi le javascript vanilla c'est compliqué. C'était compliqué avec IE6,7,8. Mais plus maintenant, vraiment plus.

Angular joue sur totalement un autre tableau. Il apporte notamment une façon de travailler, l''injection de dépendances, et le binding dynamique des variables (le fait qu'en écrivant {{x}}, le contenu se mette à jour sur la page dès lors qu'on change la variable x dans le code javascript).
C'est une petite révolution par rapport à ce qui existait avant, et elle bouscule les habitudes. On peut adhérer ou pas à cette philosophie, elle a ses avantages et ses inconvénients, mais ça n'a rien à voir avec JQuery.
Je ne pense pas que javascript soit compliqué en effet, d'ailleurs les langages populaires aujourd'hui ont ce dénominateur commun d'être simple mais ça n'en rend pas telle ou telle bibliothèque caduque du fait que l'on puisse l'écrire simplement sans, qu'on ait pas besoin du méthode chaining, etc. D'autre part faire du jQuery c'est faire du .js car comme tu l'as dit ce n'est pas un framework.

La grande question est pourquoi a t-on besoin d'Angular plutôt que de jQuery ? Professionnellement, tu ne cherches pas à aller vers de nouvelles technos sans raison et l'une des raisons de l'utilisation d'angular, je suppose, et d'avoir besoin d'importants besoins d’interaction spécifiques en front. C'est très bien mais c'est très loin d'être le cas de tout le monde et personnellement ça ne rentrera jamais dans le cadre des projets sur lesquels je travaille.

Quand je lis ce genre de discutions autour de technos j'ai l'impression qu'on oublie souvent à quoi servent réellement les choses et en somme d'être pragmatique. Après on peut faire les choses pour la hype, ne jurer que par l'injection de dépendance - qui n'est pas la réponse a tout les problèmes de dépendances en passant - ou que sais-je mais au final il faut surtout se demander ce que l'on solutionne en faisant cela.
Attention, je crois que mon message a été mal interprété: je ne me positionne pas nécessairement pour Angular. J'utilise ça au boulot, je trouve que c'est assez cool et que ça a plein d'avantages, mais jamais je ne l'utiliserais pour mes sites perso.

C'est quand même sacrément lourd. D'après ce que j'ai vu c'est 1 mo de code JavaScript... 1 Mo !
Quand je pense qu'à mes débuts en amateur on disait, jamais plus de 100 Ko au total par page, images comprises...

J'essayais juste d'expliquer la différence de mon point de vue: JQuery, un truc qui amène quelques fonctions simplificatrices, vs. Angular, un truc qui t'invite à coder de façon totalement différente.
Totalement différente ne veut pas nécessairement dire mieux ou moins bien; à chacun de juger.
Sujet clos
Aller à