Bonjour,

J'ai créer ( a partir de ce tutoriel : http://www.finalclap.com/tuto/cours-jquery-61/ ) ces codes :

Multi.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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Tous les calculs !</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
<meta http-equiv="language" content="fr">
<meta name="description" content="Sur cette page, vous pourrez calculer beaucoup de choses différentes.">
<meta name="keywords" lang="fr" content="calculatrice, calculatrices, convertisseurs, convertisseur, gratuit, gratuite, gratuits, gratuites, rapide, rapides, simple, simples, calculettes, calculette, calculateur, calculateurs, calculator, online, calculs, calcule, calculer, pratique, pratiques, en ligne">
<link rel="stylesheet" media="screen" type="text/css" title="Design espace" href="../style.css" />
<link rel="shortcut icon" href="../calculatrice.ico"/>
</head>
 
<body>
 <br/><br/><br/><br/><br/><br/><br/>
<a href="" id="lien_addition">Addition</a>
 
 
<script type="text/javascript">
 
jQuery(document).ready(function($){
                
                $('#lien_addition').click(function(e){
                e.preventDefault();   // On désactive le lien
                
        if(document.getElementById('div_addition')){} else {
                
                var new_element = jQuery('<div id="div_addition" style="width:200px; height:200px; padding:5px; background-color:#0096E1; position:absolute; top:150px; left:300px; border: 10px solid #1800F3"><div class="description"><form id="formulaire_addition" autocomplete="off">Addition :<br/><br/><input type="text" name="addi1" style="text-align: center;" id="addi1"/><br/> + <br/><input type="text" name="addi2" style="text-align: center;" id="addi1"/><br/><input type="submit" value="calculer" id="valider_addition"/></form><div id="retour"><i>vide</i></div></div></div>'
                
                );
                $('body').append(new_element);
                $(function(){$('#div_addition').draggable().resizable();});
                        
        }               
        });
        
        
//      if(document.getElementById('div_addition')){} else {
        $('#formulaire_addition').submit(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(
            'multi/addition.php',
            {addi1: $('#addi1').val()},
                        {addi2: $('#addi2').val()},
            function(data){
                        $('#retour').hide();
            $('#retour').html('')
                    .append(data.addi1+' + '+data.addi2+' = '+data.resultat);
                        $('#retour').fadeIn();
            }
        );
    });
//}
});
</script>
 
</body>
</html>


Et le code php :

addition.php :

Code php : 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
<?php
 
$addi1 = '';
if( isset($_GET['addi1']) ){
    $addi1 = $_GET['addi1'];
}
 
$addi2 = '';
if( isset($_GET['addi2']) ){
    $addi2 = $_GET['addi2'];
}
 
$retour = array(
    'addi1' => $addi1,
	'addi2' => $addi2,
	'resultat' => $addi1+$addi2,
);
 
// Envoi du retour (on renvoi le tableau $retour encodé en JSON)
header('Content-type: application/json');
echo json_encode($retour);
?>


Voici mon problème :

( la page de départ est la page multi.php
Lorsque l'on clique sur "addition", une fenêtre s'ouvre, avec deux champs de textes. Quand on remplit ces deux champs de textes, et que l'on valide, la page se recharge avec comme paramètre les valeurs saisi, alors que, dans le tutoriel, la page ne s'actualise pas, elle envoie les informations au fichier php ( avec ajax ), le fichier php renvoie les informations ( après les avoir traitées ) au fichier multi.php

Pouvez-vous me dire quelle est le problème ? ( pourquoi ça ne marche pas )

Merci d'avance,

Cordialement


PS : Désolé si le message n'est pas posté dans la bonne catégorie, je n'ai pas l'habitude du forum, je viens seulement de m'inscrire...