[AJAX] Ajax dans une modale box

**domino44240** · 12/03/2014, 12h55

Bonjour,
j’essaie de développer une modale box qui appel un fonction ajax lors du clic sur le bouton ok

j'ai actuellement

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
22
23
24
25
26
27
28
29
30
31
echo "<div class='source-code3 runnable' style='display:none;'>
<!--
BootstrapDialog.show({
       	title: 'Partage du dossier !',
        message: 'Voulez vous partager ce dossier ?',
        buttons: [{
            icon: 'glyphicon glyphicon-send',
            label: 'oui',
            cssClass: 'btn-primary',
            autospin: true,
            action: function(dialogRef){
                dialogRef.enableButtons(false);
                dialogRef.setClosable(false);
                dialogRef.getModalBody().html('Génération du lien en cours.');
                setTimeout(function(){
                    // ici requette ajax qui appel partage.php?variables
                    // qui renverra un lien  
                    dialogRef.getModalBody().html('https://mondomaine/d/fhjlfh5');
                    dialogRef.setClosable(true);
                    dialogRef.enableButtons(true);
                }, 1000);
            }
        }, {
            label: 'Close',
            action: function(dialogRef){
                dialogRef.close();
            }
        }]
    });
-->
</div>";

je précise que je ne suis pas développeur et que j essai temps bien que mal de comprendre js
j ai réussis php html et css mais js je ne suis pas très doué

si une âme charitable pouvais me donné un coup de main

**Bovino** · 12/03/2014, 13h00

La première des choses, c'est de lire et appliquer Important : Les règles incontournables d'utilisation de ce forum. Le code PHP est inutile, c'est le code HTML généré qu'il faut montrer.

Ensuite, c'est quoi ce code JavaScript dans une div ?

**domino44240** · 12/03/2014, 13h21

Bonjour Bovino
Merci de prendre du temps pour me répondre

Alors ce code js dans la div est une modalebox récupérer sur https://github.com/nakupanda/bootstr...les/index.html

le code html générer

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
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
<!DOCTYPE html>
<html>
<head>
	<title>exemple</title>
 
	<!-- script js externe-->
	<script src="js/jquery/jquery-1.10.2.min.js"></script>
	<link href="js/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<script src="js/bootstrap/js/bootstrap.min.js"></script>
	<script src="js/prettify/run_prettify.js"></script>
	<link href="js/bootstrap-dialog/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" />
	<script src="js/bootstrap-dialog/js/bootstrap-dialog.min.js"></script>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
 
 
 
</head>
 
<body>
 
<div class='source-code3 runnable' style='display:none;'>
	        <!--
	        BootstrapDialog.show({
	        	title: 'Partage du dossier !',
	            message: 'Voulez vous partager ce dossier ?',
	            buttons: [{
	                icon: 'glyphicon glyphicon-send',
	                label: 'oui',
	                cssClass: 'btn-primary',
	                autospin: true,
	                action: function(dialogRef){
	                    dialogRef.enableButtons(false);
	                    dialogRef.setClosable(false);
	                    dialogRef.getModalBody().html('Génération du lien en cours.');
	                    setTimeout(function(){
	                    	// ici requette ajax
	                         dialogRef.getModalBody().html('https://mondomaine.com/d/fhjlfh5'); //renverra le lien générer par partage.php
	                         dialogRef.setClosable(true);
	                         dialogRef.enableButtons(true);
 
	                    }, 1000);
	                }
	            }, {
	                label: 'Close',
	                action: function(dialogRef){
	                    dialogRef.close();
	                }
	            }]
	        });
	        -->
</div>
 
 
 
 
 
<script type="text/javascript">
$(function ajax(){
    $('.source-code3').each(function(index){
        var $section = $(this);
        var code = $(this).html().replace('<!--', '').replace('-->', '');
 
        // Code preview
        var $codePreview = $('<pre class="prettyprint lang-javascript"></pre>');
        $codePreview.text(code);
        $section.html($codePreview);
 
        // Run code
        if($section.hasClass('runnable')){
            var $button = $('<button>clic</button>');
            $button.on('click', {code: code}, function(event){
                eval(event.data.code);
 
            });
            $button.insertAfter($section);
            $('<div class="clearfix" style="margin-bottom: 10px;"></div>').insertAfter($button);
        }
    });
});
</script>
</body>
</html>

n’hésite pas a me dire si quelque chose ne va pas

**domino44240** · 12/03/2014, 20h39

je me répond à moi même au cas ou cela pourrai aidé d'autres personnes

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
48
49
50
 
echo "<div class='source-code3 runnable' style='display:none;'>
	        <!--
	         BootstrapDialog.show({
	        	title: 'Partage du dossier !',
	            message: 'Voulez vous partager ce dossier ?',
	            buttons: [{
	                icon: 'glyphicon glyphicon-send',
	                label: 'oui',
	                cssClass: 'btn-primary',
	                autospin: true,
	                action: function(dialogRef){
	                    dialogRef.enableButtons(false);
	                    dialogRef.setClosable(false);
	                    dialogRef.getModalBody().html('Génération du lien en cours <img src=images/loader-line.gif >');
	                     setTimeout(function(){
 
								var xmlhttp;
								if (window.XMLHttpRequest)
								  {// code for IE7+, Firefox, Chrome, Opera, Safari
								  xmlhttp=new XMLHttpRequest();
								  }
								else
								  {// code for IE6, IE5
								  xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
								  }
								xmlhttp.onreadystatechange=function()
								  {
									  if (xmlhttp.readyState==4 && xmlhttp.status==200)
								    {
								   dialogRef.getModalBody().html(xmlhttp.responseText);
								    }
								  }
								xmlhttp.open('GET','partage.php?variable en GET',true);
								xmlhttp.send();
 
	                         dialogRef.setClosable(true);
	                        dialogRef.enableButtons(true);
 
	                    }, 1000);
	                }
	            }, {
	                label: 'Close',
	                action: function(dialogRef){
	                    dialogRef.close();
	                }
	            }]
	        });
	        -->
	    </div>";

ps je laisse le echo puisque dans le cas présent c'est une page en php

[AJAX] Ajax dans une modale box

AJAX

Discussions similaires

Partager

Partager