AJAX et les boutons.

Version imprimable

02/09/2007, 10h17
Minority

AJAX et les boutons.

Bonjour,

je suis en train de faire un petit site pour une association sportive (dont je fais partie). Étant étudiant en informatique, et désirant faire quelque chose de bien (pour moi), je me suis dit : "Je le fais avec AJAX!".

L'idée est donc (je sais pas ce qu'elle vaut, à l'échelle de mon site) une page index.php, dont le header et les menu ne sont jamais recharger. Je n'effectue que des mises a jour sur le contenu de mon <div id="container">. Les cliques sur les éléments de mon menu appel des fonctions javascript qui envoies de requetes au serveur.

Le problème est le suivant : l'input en submit qui me renvoie a la page "index.php", avec le contenu de la page d'accueil.

Est-il possible lors d'un clique sur un <input type="submit">, de ne recharger que mon div container ? Je souhaiterais que lors d'un clique sur ce bouton, mon container contiennent soit le texte : "Votre inscription a été validé" ou bien "Erreur avec ...".

Si ce n'est pas possible, je peux procéder comme pour mon menu, a savoir :

Code:

<a class="lien_qui_ressemble_a_un_bouton" href="#" onclick="fonction()">Inscription</a>

Mais bon, cela me parait plus propre de valider le formulaire par un submit, que de récupérer un par un chaque valeur de mes input... .
02/09/2007, 10h27
Anthony.Desvernois

Bonjour et bienvenue au club,

traite ton formulaire comme d'habitude, il suffit juste que ta balise form contienne ceci :

Code:

<form ... onSubmit='mafonction()'>

Bon courage à toi :)

Salut !

J'ai vu dans plusieurs framework ajax, que les liens ne sont pas des balise <a> mais des <div> appelant une fonction js.

Par exemple, avec dojo :
http://dojotoolkit.org/book/dojo-boo...bo-checkbox-ra

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
                function create_button()
                {
                    var params = {
                        label: "Hi I am the Second one",
                        // Note here, when creating programmatically, this is a function, not a string
                        onClick: call_function
                    };
 
                    var button_dynamic = new dijit.form.Button(
                        params,dojo.byId("button-placeholder")
                    );
                }
       dojo.addOnLoad(create_button);
     </script>
</head>
<body class="tundra">
    <div id="button-placeholder"> </div>
</body>

Tu peut t'en inspirer, mais je te conseil d'utiliser un framework ou un autre...
Un dernier conseil : Différencie bien les contrôles (ex boutons, combobox) créer en javascript pour remplacer ceux de l'html et le transport Ajax pour le rafraichissement desynchronisé.

02/09/2007, 11h04
Minority

Merci pour la rapidité de vos réponse ! :)

@Anthony.Desvernois

La balise onSubmit, c'est celle ci que je cherchais ! Merci.

J'avais essayer naivement un

Code:

<form ... action="fonction()">

mais sans résultat (normal en même temps...).

@TheDrev

C'est vrai qu'un framework aiderait bien, mais étant donné mes objectifs pour ce site (relativement "simple")... . Le site étant bientôt opérationnel, je ne pense pas avoir recours a un framework, même si, en adopter un me serait sans doute utile pour la suite :).

Encore merci pour vos réponses les amis.