Prioriser un appel jquery sur un appel javascript

**sboug** · 07/04/2013, 14h47

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 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
<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>

**Lorenzo77** · 07/04/2013, 22h44

salut,

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

Code :

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
<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>

**danielhagnoul** · 07/04/2013, 22h50

Bonsoir

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

Code html :

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

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 javascript :

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
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();
	}
 
});

**sboug** · 08/04/2013, 01h27

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

**Lorenzo77** · 08/04/2013, 02h02

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 :

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
      $(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

**sboug** · 08/04/2013, 12h24

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 :

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
  $(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');
	}

Prioriser un appel jquery sur un appel javascript [UI]

jQuery

Vue hybride

Discussions similaires

Partager

Partager