Plusieurs boutons pour une fonction

Version imprimable

Bonjour,

J'ai une page HTML sur laquelle se trouve une multitude de boutons qui pilotent des relais.

J'ai la fonction qui évite le rafraichissement de la page :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type="text/javascript" src="JS/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
 
    $(document).ready(function() {
 
            $("#ibuttonON").click(function(e) {
                e.preventDefault();
                var value ='etatDevice='+$("[name='etatDevice']").val()
                    +'&deviceID='+$("[name='deviceID']").val();
 
                $.ajax({
                    url: "AccueilServlet",
                    //type: "post",
                    data: value,
                    cache: false,
                    success: function() {
                        $("#message").text(value);
                    }
                });
 
            });
 
    });

Et des boutons dans un formulaire (2 pour l'exemple)

Code:

1
2
3
4
5
6
7
8
<form id="formInter">
    <input type="hidden" value="1" name="etatDevice">
    <input type="hidden" value="18" name="deviceID">
    <button id="ibuttonON">ON</button>
    <input type="hidden" value="0" name="etatDevice">
    <input type="hidden" value="18" name="deviceID">
    <button id="ibuttonOFF">OFF</button>
</form>

Dans ce code, uniquement le bouton ON fonctionne puisque son id est définit dans la fonction .click

Ma question est la suivant, comment faire pour utiliser la même fonction .click avec tt les boutons de mon formulaire ??

Merci d'avance...

J'ai trouvé une solution, si ça peu aider d'autres personnes.

Première chose, définir un formulaire par bouton et ajouter class="maClass" dans chaque balise button.

La fonction .click() modifiée :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<script type="text/javascript" src="JS/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
 
    $(document).ready(function() {
        $(".button").click(function(e) {
            e.preventDefault(); // Empêche le navigateur de suivre le lien.
 
                var bouton = this; 
                var value = "etatDevice="+ $(bouton).siblings('[name="etatDevice"]').attr('value')
                        +"&deviceID="+ $(bouton).siblings('[name="deviceID"]').attr('value');
 
                $.ajax({
                    url: "AccueilServlet",
                    //type: "post",
                    data: value,
                    cache: false,
                    success: function() {
                        $("#message").text(value);
                    }
                });
         });
    });

Si après avoir parcouru ces lignes vous connaissez une façon plus propre, plus optimisée, je suis preneur !!!

Bonsoir

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form id="formInter">
    <input type="hidden" value="1" name="etatDeviceON1">
    <input type="hidden" value="18" name="deviceIDON1">
    <button id="ibuttonON1">ON 1</button>
    <input type="hidden" value="0" name="etatDeviceOFF1">
    <input type="hidden" value="18" name="deviceIDOFF1">
    <button id="ibuttonOFF1">OFF 1</button>
    <input type="hidden" value="2" name="etatDeviceON2">
    <input type="hidden" value="36" name="deviceIDON2">
    <button id="ibuttonON2">ON 2</button>
    <input type="hidden" value="0" name="etatDeviceOFF2">
    <input type="hidden" value="36" name="deviceIDOFF2">
    <button id="ibuttonOFF2">OFF 2</button>
</form>

Code:

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
/*
 * Click sur n'importe quel bouton ayant un ID qui
 * commence par 'ibutton'.
 */
$( "button[id^='ibutton']" ).on( "click", function( e ){
    e.preventDefault();
 
    /*
     * Méthode serialize : collecte les valeurs des éléments du formulaire
     * ayant un name (http://api.jquery.com/serialize/).
     * 
     * $.post : méthode AJAX (http://api.jquery.com/jQuery.post/).
     * 
     * jqXHR : objet différé contenant la promesse
     * (http://api.jquery.com/category/deferred-object/).
     */
    var infos = $( "#formInter" ).serialize(),
    	jqXHR = $.post( "AccueilServlet", infos );
 
    // debug : etatDeviceON1=1&deviceIDON1=18&etatDeviceOFF1=0&deviceIDOFF1=18&etatDeviceON2=2&deviceIDON2=36&etatDeviceOFF2=0&deviceIDOFF2=36
    console.log( infos );
 
	jqXHR.done( function( data, textStatus, jqXHR ){
		// succès de la transaction, on doit traiter le contenu de data
		console.log( data, textStatus, jqXHR );
 
	});
 
	jqXHR.fail( function( jqXHR, textStatus, errorThrown ){
		// échec de la transaction, gérer la catastrophe
		console.log( jqXHR, textStatus, errorThrown );
 
	});
 
	jqXHR.always( function( jqXHR, textStatus ){
		// la transaction est terminée
		console.log( jqXHR, textStatus );
	});
 
});

19/05/2013, 00h52
SoGood

Merci pour ce code !!
Mais je n'arrive pas à le faire fonctionner. Il envoi la totalité du formulaire à mon servlet.
Même problème que ds mon premier post.

Oops ! Pour le même code HTMl :

Code:

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
/*
 * Click sur n'importe quel bouton ayant un ID qui
 * commence par 'ibutton'.
 */
$( "button[id^='ibutton']" ).on( "click", function( e ){
    e.preventDefault();
 
    /*
     * Méthode serialize : collecte les valeurs des éléments du
     * formulaire ayant un name dont les trois derniers caractères 
     * sont identiques aux trois derniers caractères de l'ID 
     * du bouton cliqué (http://api.jquery.com/serialize/).
     * 
     * $.post : méthode AJAX (http://api.jquery.com/jQuery.post/).
     * 
     * jqXHR : objet différé contenant la promesse
     * (http://api.jquery.com/category/deferred-object/).
     * 
     * [name$=''] : http://api.jquery.com/category/selectors/attribute-selectors/
     */
    var btnID = this.id,
    	infos = "btnID=" + btnID + "&" + $( "[name$='" + btnID.slice( -3 ) + "']", "#formInter" ).serialize(),
    	jqXHR = $.post( "AccueilServlet", infos );
 
    // debug :
    console.log( infos );
 
	jqXHR.done( function( data, textStatus, jqXHR ){
		// succès de la transaction, on doit traiter le contenu de data
		console.log( data, textStatus, jqXHR );
 
	});
 
	jqXHR.fail( function( jqXHR, textStatus, errorThrown ){
		// échec de la transaction, gérer la catastrophe
		console.log( jqXHR, textStatus, errorThrown );
 
	});
 
	jqXHR.always( function( jqXHR, textStatus ){
		// la transaction est terminée
		console.log( jqXHR, textStatus );
	});
 
});

19/05/2013, 17h11
SoGood
Merci de prendre un peu de ton temps pour moi, mais ça ne fonctionne toujours pas. :?

La fonction serialize() récupère les noms des input qui sont tous différents.
Code:

1 2 3 btnID=ibuttonON1&etatDeviceON1=1&deviceIDON1=18 Attendu par le servlet : btnID=ibuttonON1&etatDevice=1&deviceID=18
Du coup, mon servlet ne récupère pas les bonnes variables ce qui implique du coté du servlet un traitement des variables envoyées.

Qu'apporte de plus ton code en rapport du mien ????