code jQuery trop ancien ou erreur ?

**belote3131** · 17/10/2022, 13h47

Bonjour à tous

Je suis un novice en jquery et j'ai trouvé un petit tuto sympathique mais qui date de 2014.
Concrètement je code en PHP mais le PHP ne permet pas d'envoyer un form de recharger automatiquement et d'afficher directement les nouvelles données sans gêner l'utilisateur.
Voici le code de la page php :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="../public/jquery.js"></script>
    <script src="../public/test_chargement_auto.js"></script>
    <title></title>
</head>
<body>
<form class="form" action="<?php $_SERVER['REQUEST_URI']; ?>" method="post" id="registrationForm" class="formulaire">
                        <div class="input-group">
                        <div class="col-6">
 
 
 
 
                                <label class="" for="numero_piece">
                                    <h4>Numéro de pièce</h4></label>
                                <input type="text" class="numero_piece" name="numero_piece" id="numero_piece"  title="enter your first name if any." >
 
 
                        </div>
                        <div class="col-6">
 
 
                                <label for="intitule_piece">
                                    <h4>Intitulé</h4></label>
                                <input type="text" class="intitule_piece" name="intitule_piece" id="intitule_piece" placeholder="last name" title="enter your last name if any." >
 
                        </div>
                    </div>
 
                    <button  type="submit" name="valider"><i class=" submit "></i> Valider</button>
                </form>

et celui de la page jquery :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function(){
	$('.formulaire').submit(function(){
		var num = $('.numero_piece').val();
		var intitule = $('.intitule_piece').val();
 
		alert (num + intitule);
 
 
	})
 
});

Vous voyez des erreurs ?

Cordialement, stéphane

**Toufik83** · 17/10/2022, 14h13

Bonjour,

Lorsque vous soumettez le formulaire, la page est rechargée et donc => perte de JS, pour éviter ceci, vous devriez empêcher la soumission classique du formulaire avec event.preventDefault() :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
$('.formulaire').submit(function(e){
    e.preventDefault();// ICI
    var num = $('.numero_piece').val();
    var intitule = $('.intitule_piece').val();
    alert (num + intitule);
});

**SpaceFrog** · 17/10/2022, 14h24

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<form class="form" action="<?php $_SERVER['REQUEST_URI']; ?>" method="post" id="registrationForm" class="formulaire">

**belote3131** · 17/10/2022, 14h28

c'est fait mais ça ne fonctionne toujours pas,
pour la classe ça ne change rien non plus (notez que j'en avais 2)

**Toufik83** · 17/10/2022, 14h47

L'alert() ne se déclenche pas?

**belote3131** · 17/10/2022, 14h55

nope ça ne se déclenche pas, pourtant si je fais un test sur la même page avec un alert sans la fonction il se déclenche

**Toufik83** · 17/10/2022, 15h01

Aucune erreur dans la console du navigateur ?

**SpaceFrog** · 17/10/2022, 15h04

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
$(document).ready(function(){
	$('.formulaire').submit(function(){
		var num = $('.numero_piece').val();
		var intitule = $('.intitule_piece').val(); 
		alert (num + intitule); 
	});
});

Il faut refermer le document ready

**belote3131** · 17/10/2022, 15h06

aucune erreur et si je fais un var dump mon post est bien soumis

**SpaceFrog** · 17/10/2022, 15h07

Il y a forcément une erreur en console au chargement de la page si le ready n'est pas fermé ...

**belote3131** · 17/10/2022, 15h07

il est déjà fermé fait défiler ma page jusqu'au bout tu verras

**SpaceFrog** · 17/10/2022, 15h10

JQuery est bien chargé ?

Pour moi ça fonctionnne ... (avec un seuls attribut class )

https://jsfiddle.net/v1L485xg/

**belote3131** · 17/10/2022, 15h11

alors sur ce point je ne suis pas un expert mais quand j'ai essayé ce code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
window.onload = function() {
    if (window.jQuery) {  
        // jQuery is loaded  
        alert("Yeah!");
    } else {
        // jQuery is not loaded
        alert("Doesn't Work");
    }
}

ça disait yeah

J'ai download cette version : https://code.jquery.com/jquery-3.6.1.js

**SpaceFrog** · 17/10/2022, 15h18

Il y a forcément un truc que tu ne nous dis pas (par ignorance

) car le code test fonctionne.
inspecte la console, les onglets réseau et console.

Ou alors tu fais comme je fais régulièrement, je ne teste pas les bons fichiers, je passe des heures à modifier mes scripts, mais au moment de tester je n'affiche pas le bon fichier ...

Ou encore explore la piste du cache ...
Vérifie que tu vois bein ton script JQuery dans les sources de la page

**belote3131** · 17/10/2022, 15h25

D'accord je vais essayer de chercher, merci pour votre aide en tout cas, oui je le vois bien dans les sources, en effet ça doit être un truc totalement futile en plus

edit : ça fonctionne j'ai juste supprimé le e.preventDefault();// ICI que tu m'avais demandé de rajouter
Ils me disaient que ce n'était pas une fonction, donc c'était sans doute un truc modifié avant comme les 2 classes

Merci à vous

**SpaceFrog** · 17/10/2022, 15h38

en effet ça doit être un truc totalement futile en plus

Oui donc vu d'ici, pas facile de t'aider beaucoup plus...

essaye des choses simples comme mettre un alert au load ...

soit dans un ready

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$(document).ready(function(){
alert ('Jquery chargé');
});

ou autre syntaxe:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$(function(){ 
alert('Jquery Chargé');
});

**Toufik83** · 17/10/2022, 15h46

Envoyé par belote3131

edit : ça fonctionne j'ai juste supprimé le e.preventDefault();// ICI que tu m'avais demandé de rajouter
Ils me disaient que ce n'était pas une fonction

Surement parce que vous avez oublié le paramètre e de la fonction submit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
.submit(function(e){
    e.preventDefault();// ICI

**NoSmoking** · 17/10/2022, 16h32

Bonjour,

Envoyé par SpaceFrog

Pour moi ça fonctionnne ... (avec un seuls attribut class )

Tout à fait
Soit le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
$(document).ready(function() {
  $('.formulaire').submit(function(e) {
    e.preventDefault();
    alert("Formulaire");
  });
  $('.form').submit(function(e) {
    e.preventDefault();
    alert("BINGO !!");
  });
});

la construction :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<form class="formulaire" class="form" action="">
  <button type="submit" name="valider"> Valider</button>
</form>

... affichera « Formulaire »

la construction :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<form  class="form" class="formulaire" action="">
  <button type="submit" name="valider"> Valider</button>
</form>

... affichera « BINGO !! ».

Le code HTML présentant deux attributs class n'est pas valide, « Error : Duplicate attribute class »,et jQuery travaille sur du HTML conforme.

code jQuery trop ancien ou erreur ?

jQuery

Discussions similaires

Partager

Partager