Fênetre popup js

**mimi6060** · 22/03/2013, 15h44

bonjour,
j'aimerais integré a mon site php lorsque je choisi un article pouvoir cliquer sur le bouton editer et avoir une fênetre qui s'affiche devant et qui grise l'autre
avec le bouton valider et cancel qui me permet de modifier les données

j'espere avoir été clair merci

**SpaceFrog** · 22/03/2013, 15h49

=> "lightbox"

**mimi6060** · 22/03/2013, 15h54

merci tu aurais pas un code souce pour un formulaire ?

merci

**SpaceFrog** · 22/03/2013, 16h01

http://xhtml.developpez.com/faq/?pag...laire-elements
http://javascript.developpez.com/faq...ipt/?page=Form

**mimi6060** · 25/03/2013, 09h13

j'ai le code suivant mais je ne voit pas comment une fois les information recupere comment l'envoyer par un $_POST pour recuprer en php et l'ajouter dans ma db

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
  $(function() {
    var name = $( "#name" ),
      email = $( "#email" ),
      password = $( "#password" ),
      allFields = $( [] ).add( name ).add( email ).add( password ),
      tips = $( ".validateTips" );
 
    $( "#dialog-form" ).dialog({
      autoOpen: false,
      height: 600,
      width: 600,
      modal: true,
      buttons: {"save": function() {
 
            $( "#users tbody" ).append( "<tr>" +
              "<td>" + name.val() + "</td>" +
              "<td>" + email.val() + "</td>" +
              "<td>" + password.val() + "</td>" +
            "</tr>" );
            $( this ).dialog( "close" );
 
        },
 
 
        Cancel: function() {
          $( this ).dialog( "close" );
        }
 
      },
 
    });
 
    $( "#create-user" )
      .button()
      .click(function() {
        $( "#dialog-form" ).dialog( "open" );
      });
  });

**Bovino** · 25/03/2013, 09h36

Code :

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

$.post(...);

?

**mimi6060** · 25/03/2013, 17h23

ca ne marche pas :s

j'utilise le code js suivant parce que les données varie suivant le champs selected :

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
 
// ajax pour afficer les ms fonction cocher 
function createXmlHttpRequest()
 // Création d'unobjet XmlHttpRequest en fonction des navigateurs
{
			if (window.XMLHttpRequest) 
				return xhr = new XMLHttpRequest(); 
			else if (window.ActiveXObject) 
				return xhr = new ActiveXObject('Microsoft.XMLHTTP');
			else 
				alert('JavaScript : votre navigateur ne supporte pas les objets XMLHttpRequest...');
}
 
function getinfo(inf){
// partie getfommysql
var id_array=inf.split("//");
var id=id_array;
xhr=createXmlHttpRequest(); // Création d'unobjet XmlHttpRequest en fonction des navigateurs
xhr.open('POST','getInfomysql.php',true); // ouverture
// attribution d'une fonction à la propriété "onreadystatechange"
			xhr.onreadystatechange = function(){
				switch(xhr.readyState) {
					case 0 : break;
					case 1 : break;
					case 2 : break;
					case 3 : break;
					case 4 : document.getElementById("info").innerHTML = xhr.responseText;
							 break;
					default : break;
				}
			}	
			// envoi de l'en-tête Content-type, car utilisation de POST
			xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
			//envoi de requète en préparant le(s) paramètre(s)
			var req = 'id='+id;
			xhr.send(req);
 
// partie getedit    
 
 
    if (window.XMLHttpRequest) 
				 xhr2 = new XMLHttpRequest(); 
			else if (window.ActiveXObject) 
				 xhr2 = new ActiveXObject('Microsoft.XMLHTTP');
			else 
				alert('JavaScript : votre navigateur ne supporte pas les objets XMLHttpRequest...');
 
 
// Création d'unobjet XmlHttpRequest en fonction des navigateurs
xhr2.open('POST','getEdit.php',true); // ouverture
// attribution d'une fonction à la propriété "onreadystatechange"
			xhr2.onreadystatechange = function(){
				switch(xhr2.readyState) {
					case 0 : break;
					case 1 : break;
					case 2 : break;
					case 3 : break;
					case 4 : document.getElementById("dialog-form2").innerHTML = xhr2.responseText;
							 break;
					default : break;
				}
			}	
			// envoi de l'en-tête Content-type, car utilisation de POST
			xhr2.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
			//envoi de requète en préparant le(s) paramètre(s)
			var req = 'id='+id;
			xhr2.send(req); 
}

code html :

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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
 
 
 <script src=../js/menuchoix.js type=text/javascript charset=utf-8></script>
 <link rel="stylesheet" href="../js/jquery-ui.css" />
 <script src="../js/jquery-1.9.1.js"></script>
 <script src="../js/jquery-ui.js"></script>
 <script src=../js/lightbox.js type=text/javascript charset=utf-8></script>   
<?php
$nav_en_cours = 2;
include '../headerFooter/header.php';
  
         // menu admin si bien connecter
        if (!empty($_SESSION['conexion'])){include '../headerFooter/header2.php'; }
             else   echo '<div id="body">';
             
if (!empty($_SESSION['conexion'])) {
 
       // partie ajout de famille dans la db
      //  if(isset($_POST)) print_r ($_POST); 
        if(isset($_POST["createfamilly"]))     
        if( isset($_POST["NOmNouvelleFamille"])){
        
          $outils->inject_stop(); 
           $ajoutfamilly = array("nomFamille" =>$_POST["NOmNouvelleFamille"], 
                                 "description" =>$_POST["description"],
                                                   );
           $famille->save($ajoutfamilly);
             
                 if (isset($_POST["modelcase"]))   {  
             $id =  $famille->id;
                    foreach (  $_POST["modelcase"] as $modelseries){
                                 // recup nom model serie   
                                     $element = explode(',',$modelseries, 2);
                                   // ajouter
                                     $ajout = array("idFamille" =>$id, 
                                                    "modelSerie" =>$element[0],
                                                    "MsFonction" =>$element[1]);
                                               
                                 if ( $model->modelexist($element[0],$element[1],$id) != 1 )  $model->save($ajout);        
                             }     
                    }
                 
                }         
  // partie edit de famille dans la db     
        if(isset($_POST)) print_r ($_POST); 
    ?>
<!-- fomulaire de lecture  --> 
    <br />
        <center>
            <table> 
 
                <tr><th>family :</th>
                    <th COLSPAN=2 ><select name="modelserie" onclick="getinfo(this.value,'getInfomysql.php')"> 
                          <?php
                          // afficher famille   
                            $condition = array( "fields" => "DISTINCT nomFamille,id","order"=>"nomFamille");
                            foreach ($famille->find($condition) as $i) {
                                echo' <option value="' . $i["id"] . '"> ' . $i["nomFamille"] . '</option>';  }  
                           ?>
                        </select>
                    </th>
                    <th>
                         <button id="edit-familly">edit familly</button>
                   </th>
                   <th>
                         <button id="create-user">Create familly</button>
                   </th>
               </tr>
             </table> 
 
        <br />
        <br />
 
 
        <div id="info" >
 
        </div>
     </center>
 
 
  <!-- formulaire creation  -->       
 
 <div id="dialog-form" title="Create familly">
  <p class="validateTips">name form fields is required.</p>
 
  <form action="#" method="POST" id="myform">   
         <center>
            <table> 
                 <tr> 
                    <th>
                        name:
                    </th>
                    <th>
                        <input size="38" type="text" name="NOmNouvelleFamille" id="NOmNouvelleFamille" />
                    </th>
 
                 </tr>  
                 <tr> 
                    <th>
                        description:
                    </th>
                    <th colspan="2">
                        <input size="38" type="text" name="description" id="description" />
                    </th>
 
                 </tr> 
            </table> 
 
             <br/><br/>
             <div id="déroulant">
                <table> 
                     <tr>
                         <th>model serie</th>
                         <th>ms function</th>
                          <th>selected </th>
                     </tr>    
                   <?php      
                        $list_model_function=  $allmodel->find(array("order"=>"txtMSDescription,txtMSFunction ASC"));
                        foreach ($list_model_function as $key => $valeur) { 
                   if(isset($valeur["txtMSDescription"]) and $valeur["txtMSDescription"] != '' ){
                  echo"<tr>
                                  <th>  " . $valeur["txtMSDescription"] . " </th> 
                                  <th>  " . $valeur["txtMSFunction"] . " </th>";      
                  echo  "<th><input name=\"modelcase[]\" value=\"" . $valeur["txtMSDescription"] .",". $valeur["txtMSFunction"]. " \" type=\"checkbox\" > </th>";
                  echo"</tr>  ";
 
                  }
                    } ?>
 
                </table> 
            </div>   
              <input  type="hidden"  value="ok" name="createfamilly" id="createfamilly">
         </center>    
 
   </form>   
</div>
 
 <!-- formulaire edit  -->             
 <div id="dialog-form2" title="modify familly">
  <p class="validateTips">All form fields are required.</p>
  <center>
 <form id="myformedit" method="POST" action="test.php">
 
 
  </form>
</center>
</div>
 
 
<?php } 
 echo "</div>";
include '../headerFooter/footer.php';
?>

et la partie lightbox

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
  $(function() {
 
 
    $( "#dialog-form" ).dialog({
      autoOpen: false,
      height: 800,
      width: 900,
      modal: true,
      buttons: {
 
                "save": function() {
 
                   var description = $( "#description" ).val();
                   var NOmNouvelleFamille = $( "#NOmNouvelleFamille" ).val();
 
                    if ( NOmNouvelleFamille  != "") document.forms["myform"].submit(); 
                    else alert ("name is empty ");
                    $( this ).dialog( "close" );
 
                    },
                Cancel: function() { $( this ).dialog( "close" ); }
 
                }
 
    });
 
     $( "#dialog-form2" ).dialog({ 
               autoOpen: false,
               height: 800,
               width: 900,
               modal: true,
               buttons: {
 
                "save": function() {
 
                   var description = $( "#description" ).val();
                   var NOmNouvelleFamille = $( "#NOmNouvelleFamille" ).val();
 
                    if ( NOmNouvelleFamille  != "") document.forms["myformedit"].submit(); 
                    else alert ("name is empty ");
                    $( this ).dialog( "close" );
 
                    },
                Cancel: function() { $( this ).dialog( "close" ); }
 
                }
 
 
        });
 
 
 
    $( "#create-user" )
      .button()
      .click(function() {
        $( "#dialog-form" ).dialog( "open" );
      });
 
 
      $( "#edit-familly" )
      .button()
      .click(function() {
        $( "#dialog-form2" ).dialog( "open" );
      });
 
  });

mon $post reste toujour quand je rafrechit ma page comment faire ?

Fênetre popup js

JavaScript

Discussions similaires

Partager

Partager