JQuery close dialog

**GérardMartinelli** · 24/11/2014, 19h43

Bonjour,

Je n'ai pas trouvé de forum spécifique JQuery, donc je me permet de poser cette question ici car je ne suis pas très compétent et fais depuis 3 semaines mes premiers pas en JQuery et AJAX.
Mon problème est le suivant, lorsque je crée une boite "dialog" la première invocation fonctionne très bien mais les autres ne fonctionnent pas.
je suppose qu'il fait faire un close de la box, mais je ne sais pas comment faire. J'ai regardé dans divers forum, et me suis inspiré d'exemple, mais sans succès.
J'ai donc essayé de faire le test le plus minimum possible (voir ci-dessous.).
J'ai remarqué que tant que je n'utilisais pas AJAX pour charger ma box, je pouvais la créer autant de fois que je voulais (mais elle est vide ce qui évidemment n'est pas très intéressant !!).
IL m'est donc apparu que c'était sans doute le contenu de ce que je chargeais qui devait poser problème. J'ai donc essayé d'éliminer progressivement des lignes de mon code pour comprendre d'où cela pouvait venir.
Si je supprime "<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>" je n'ai plus le problème alors que dans le code de la procédure php que j'ai chargée dans la boite dialog je n'utilise jamais JQUERY. je pense (sans en être sûr) que ce script doit surcharger des fonctions standard de JS ce qui expliquerait sans doute ce comportement bizarre.

Si une bonne âme pouvait corriger mon code ci-dessous pour permettre de fermer correctement la boite de dialog, ce serait avant l'heure un beau cadeau de Noël. Merci d'avance.

Gérard

TEST.HTML

Code html :

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

1
2
3
4
5
6
7
8
<html lang="FR">
<head> 
 
<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> 
 
<script>

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
 
var str = "";
var maliste= "MMM";
var msg;  
var i = 0;
$(document).ready(function() {
         $("#boite" ).dialog({ 
		autoOpen: false, 
		modal: true 
		}); 
});
 
function executeAjax(id,url,parm)
{
	 var monString="";
	 $.ajax({
	  	 type: 		"POST",
	 	 url:    	url,
	 	 data:   	{options: parm} , 
	 	 async: 	false,
	 	 dataType: 	'html',
	 	 success:  	function( msg )
	 	 		{
					$(id).html( msg );
					monString=msg;
				} 
	 	});
}	 	
function ouvrirBoite()
{
	    wk= executeAjax("#boite","test.php","52"); 
	   $( "#boite" ).dialog( "open" );
} 
</script>

Code html :

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

1
2
3
4
5
6
7
8
</head><body bgcolor="#FFFFFF" >
<h3>
<div id="boite" ><p> 
</p></div> 
<form><center><p>
<input  type=button value="Cliquez" onClick="ouvrirBoite();"/>&nbsp;&nbsp;&nbsp; pour ouvrir la boite de dialog puis re-essayer lorsque la boite de dialog sera fermée. 
</form> 
</body></html>

TEST.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
<html lang="FR">
<head> 
<title>Test PH</title>
 
<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> 
 
<script>
function monTest(id)
{
	alert("Clic OK");
}	
</script>
</head><body>
<?php
$str ="";
$str .= '<form><input type="button" value="Cliquez encore"  onclick="monTest(this.value);" /></form>'; 
echo $str;
?>
</body></html>

**danielhagnoul** · 24/11/2014, 23h49

Bonsoir

Exemple, voir les commentaires dans les codes.

Fichier 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
<?php
    $messages = [
        '<p>Information n° 0 transmise par PHP.</p>',
        '<p>Information n° 1 transmise par PHP.</p>',
        '<p>Information n° 2 transmise par PHP.</p>',
    ];
 
    if ( isset( $_GET[ "choix" ] ) ){
        $n = $_GET[ "choix" ];
 
        echo $messages[ $n ];
    } else {
        echo 'Erreur dans PHP';
    }
?>

Page web :

Code CSS :

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

1
2
#dialog-message { display: none; }
.rouge { font-weight: 800; color: red; }

Code HTML :

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

1
2
3
4
5
6
7
<div id="dialog-message" title="Download complete">
    <p>
 
    </p>
</div>
 
<button id="btnShowDialog">Voir le dialogue</button>

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
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
$( function(){
 
    /*
     * Construction du dialogue modal
     */ 
    $( "#dialog-message" ).dialog({
        "autoOpen" : false,
        "modal" : true,
        "buttons" : {
            "OK" : function( ){
                $( this ).dialog( "close" );
            }
        }
    });
 
    /*
     * Réserve de messages
     */ 
    var dataset = [
        '<p>Un nouveau message.</p>',
        '<p class="rouge">Un message important.</p>'
    ];
 
    var boolPHP = false;
 
    /*
     * Ouverture du dialogue
     */ 
    $( "#btnShowDialog" ).on( "click", function( ){
 
        /*
         * Au premier clic on sélectionne le troisième message PHP
         * Au deuxième click on sélectionne le second message de datatset
         * idem pour les clics suivant, en alternance PHP ou dataset
         */ 
        boolPHP = ! boolPHP;
 
 
        if ( boolPHP ) {
            /*
             * AJAX $.get()
             *
             * On sélectionne le troisième message du fichier PHP
             */ 
            var jqXHR = $.get( "monPHP.php", { "choix" : 2 }, "html" );
 
            jqXHR.done( function( data, textStatus, jqXHR ){
                // succès de la transaction, on doit traiter le contenu de data
                console.log( data, textStatus, jqXHR );
 
                $( "#dialog-message" )
                    .html( data )
                    .dialog( "open" );
 
            });
 
            jqXHR.fail( function( jqXHR, textStatus, errorThrown ){
                // échec de la transaction, gérer la catastrophe
                console.log( jqXHR, textStatus, errorThrown );
 
                $( "#dialog-message" )
                    .html( errorThrown )
                    .dialog( "open" );
 
            });
 
            jqXHR.always( function( jqXHR, textStatus ){
                // la transaction est terminée
                console.log( jqXHR, textStatus );
 
            });
        } else {
            /*
             * On sélectionne le second message de dataset
             */ 
            $( "#dialog-message" )
                .html( dataset[ 1 ] )
                .dialog( "open" );
        }
 
    });
 
});

**GérardMartinelli** · 25/11/2014, 16h30

Merci beaucoup pour ta réponse et les exemples. Toutefois j'avais déjà essayé ce genre de code (sans succès). En effet j'ai deux problèmes avec ce type d'exemples :

1) Je ne veux pas systématiquement ajouter un bouton ""OK", mais simplement quitter le dialogue en cliquant sur la croix en haut à droite (cela marche aussi avec ton exemple sans le bouton).

2) dans ta procédure php il n'y a pas de code HTML. Si j'en ajoute alors pour créer dynamiquement des tables ou des select( par exemple), cela ne marche plus. Voir ton code modifié dessous.

Certainement je ne m'y prends pas bien. C'est la raison pour laquelle je cherche un code qui marcherait (si c'est possible)

Merci encore pour ton aide;

Gérard

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
 
<html lang="FR">
<head> 
<title>Test PH</title>
 
<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> 
</head/<body>
 
<?php
    $messages = [
        '<p>Information n° 0 transmise par PHP.</p>',
        '<p>Information n° 1 transmise par PHP.</p>',
        '<p>Information n° 2 transmise par PHP.</p>',
    ];
 
    if ( isset( $_GET[ "choix" ] ) ){
        $n = $_GET[ "choix" ];
 
        echo $messages[ $n ];
    } else {
        echo 'Erreur dans PHP';
    }
?>
</body></html>

**GérardMartinelli** · 01/12/2014, 11h34

J'ai résolu mon problème. En fait j'ai retiré toutes les lignes HTML et ça marche très bien;

JQuery close dialog

jQuery

Vue hybride

Discussions similaires

Partager

Partager