Prioriser un appel jquery sur un appel javascript

Version imprimable

Bonjour,

Je suis débutante sur Jquery. J'ai créé un bouton qui fait appel à deux fonctions. La première est une fonction jquery qui affiche un popup avec deux boutons. elle attribue une valeur boolean à une varibale selon le choix du bouton du popup
La deuxième fonction qu'est une fonction javascript s'exécute selon le résultat de la première fonction.

Le problème est que le bouton fait appel à la fonction javascript avant celle de jquery. Vous ne connaissez pas un moyen qui priorise l'appel à la fonction jqueryau lien de celle de javascript/

Merci d'avance pour vos réponses

Ci dessous le code

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
46
47
48
49
50
51
<html>
<head>
<title></title>
</head>
<body>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
 
 
    <script type="text/javascript">
 
 
        //document.getElementById('theHiddenField').value =false;
        $(document).ready(function () {
            $("#OpenDialog").click(function () {
                $("#dialog").dialog({
                                resizable: false,
height:140,
modal: true,
 
                                buttons: {
"Oui": function() {
$('#theHiddenField').val(true);
$( this ).dialog( "close" );
alert($('#theHiddenField').val());
},
"Non": function() {
//$('#theHiddenField').val(false);
alert($('#theHiddenField').val());
$( this ).dialog( "close" );
}
}
                                });
            });
        });
                
        function Chargement() {
        if (document.getElementById('theHiddenField').value ==true) {
        alert('Bienvenue sur le site');
                }
}
    </script>
 
  <input id="OpenDialog" type="button"  value="Valider" onClick="Chargement()">
    <div id="dialog" title="Empty the recycle bin?">
    </div>
	 <input type="hidden" id="theHiddenField" name="deleteThisSelectedItem" value="false" style="display:none">
 
</body>
</html>

salut,

suffit de placer le code dans la fonction JQ mais aprés la gestion du popup :

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
46
47
<html>
  <head>
    <title></title>
  </head>
  <body>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
 
 
    <script type="text/javascript">
 
 
    //document.getElementById('theHiddenField').value =false;
      $(document).ready(function() {
        $("#OpenDialog").click(function() {
          $("#dialog").dialog({
            resizable: false,
            height: 140,
            modal: true,
            buttons: {
              "Oui": function() {
                $('#theHiddenField').val(true);
                $(this).dialog("close");
                alert($('#theHiddenField').val());
              },
              "Non": function() {
    //$('#theHiddenField').val(false);
                alert($('#theHiddenField').val());
                $(this).dialog("close");
              }
            }
          });
          if ($('#theHiddenField').val() === 'true') {
            alert('Bienvenue sur le site');
          }
        });
      });
    </script>
 
    <input id="OpenDialog" type="button"  value="Valider">
    <div id="dialog" title="Empty the recycle bin?">
    </div>
    <input type="hidden" id="theHiddenField" name="deleteThisSelectedItem" value="false" style="display:none">
 
  </body>
</html>

Bonsoir

L'attribut HTML "value" contient toujours un texte (string) !

Code:

1
2
3
<input id="OpenDialog" type="button" value="Valider">
<div id="dialog" title="Empty the recycle bin?"></div>
<input type="hidden" id="theHiddenField" name="deleteThisSelectedItem" value="oui">

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
var dialogue = function dialogue(){
 
    $( "#dialog" ).dialog({
		"resizable" : false,
		"height" :140,
		"modal" : true,
		"buttons" : {
			"Oui" : function(){
				$( '#theHiddenField' ).val( "oui" );
				$( this ).dialog( "close" );
 
				alert( $( '#theHiddenField' ).val() );
			},
			"Non" : function(){
				$( '#theHiddenField' ).val( "non" );
				$( this ).dialog( "close" );
 
				alert( $( '#theHiddenField' ).val() );
			}
		}
	});
 
};
 
$( "#OpenDialog" ).on( "click", function(){
 
	if ( $( "#theHiddenField" ).val() === "oui" ){
		alert( "Bienvenue sur le site !" );
		dialogue();
	} else {
		dialogue();
	}
 
});

08/04/2013, 01h27
sboug

Bonsoir,

Je vous remercie infiniment pour vos réponses. la deuxième fonction je l'ai simplifié juste pour vous donner une idée de ce que je veux faire. Normalement elle est très longue et inutile de la reécrire en jquery. Ce que j voulais faire est de reécrire le window.confirm de tel sorte que le popup affiche les valeurs "oui" et "non" au lieu des valeurs par défauts "ok" et "annuler". J'ai choisi de le faire avec jquery car c'est plus simple. Mais je suis tombé dans ce problème d'appel de fonction. Vous ne savez pas comment je pourrais résoudre ce problème?

Merci pour vos réponses

je t'ai déja donné la réponse, et non, pas besoin de sortir le code de la fonction, tu peux la mettre directement dans le code de JQ :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
      $(document).ready(function() {
        $("#OpenDialog").click(function() {
          $("#dialog").dialog({
            resizable: false,
            height: 140,
            modal: true,
            buttons: {
              "Oui": function() {
                $('#theHiddenField').val(true);
                $(this).dialog("close");
                alert($('#theHiddenField').val());
              },
              "Non": function() {
    //$('#theHiddenField').val(false);
                alert($('#theHiddenField').val());
                $(this).dialog("close");
              }
            }
          });
          Chargement();
        });
      });

Chargement() sera lancé aprés la fermeture de la popup

Oui très bonne idée :), Merci à vous tous. D'ailleurs je n'ai plus besoin de tester par rapport à un variable. J'insére directement la fonction dans le bouton Oui :). Merci encore une fois.

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
  $(document).ready(function() {
        $("#OpenDialog").click(function() {
          $("#dialog").dialog({
            resizable: false,
            height: 140,
            modal: true,
            buttons: {
              "Oui": function() {
                $(this).dialog("close");
		Chargement();
              },
              "Non": function() {
                $(this).dialog("close");
              }
            }
 
          });
 
        });
 
      });
 
 
	function Chargement() {
	alert('Bienvenue sur le site');
	}