Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PHP][AJAX]Integracja jQueryDialog z PHP
Forum PHP.pl > Forum > Przedszkole
northwest
28.01.2011, 15:02:30
Witam serdecznie,
mam taki kod:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.     <meta charset="utf-8">
  5.     <link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css"> 
  6.     <script src="http://jqueryui.com/jquery-1.4.4.js"></script> 
  7.     <script src="http://jqueryui.com/external/jquery.bgiframe-2.1.2.js"></script> 
  8.     <script src="http://jqueryui.com/ui/jquery.ui.core.js"></script> 
  9.     <script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script> 
  10.     <script src="http://jqueryui.com/ui/jquery.ui.mouse.js"></script> 
  11.     <script src="http://jqueryui.com/ui/jquery.ui.button.js"></script> 
  12.     <script src="http://jqueryui.com/ui/jquery.ui.draggable.js"></script> 
  13.     <script src="http://jqueryui.com/ui/jquery.ui.position.js"></script> 
  14.     <script src="http://jqueryui.com/ui/jquery.ui.resizable.js"></script> 
  15.     <script src="http://jqueryui.com/ui/jquery.ui.dialog.js"></script> 
  16.     <script src="http://jqueryui.com/ui/jquery.effects.core.js"></script> 
  17.     <script src="http://jqueryui.com/ui/jquery.effects.blind.js"></script> 
  18.     <script src="http://jqueryui.com/ui/jquery.effects.explode.js"></script> 
  19.     <link rel="stylesheet" href="http://jqueryui.com/demos/demos.css">
  20.     <style> 
  21.         body { font-size: 62.5%; }
  22.         label, input { display:block; }
  23.         input.text { margin-bottom:12px; width:95%; padding: .4em; }
  24.         fieldset { padding:0; border:0; margin-top:25px; }
  25.         h1 { font-size: 1.2em; margin: .6em 0; }
  26.         div#users-contain { width: 350px; margin: 20px 0; }
  27.         div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
  28.         div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
  29.         .ui-dialog .ui-state-error { padding: .3em; }
  30.         .validateTips { border: 1px solid transparent; padding: 0.3em; }
  31.     </style>  
  32.     <script> 
  33.     // increase the default animation speed to exaggerate the effect
  34.     $.fx.speeds._default = 1000;
  35.     $(function() {
  36.         $( "#dialog" ).dialog({
  37.             autoOpen: false,
  38.             height: 240,
  39.             width: 240,
  40.             show: "explode",
  41.             modal: true,
  42.             hide: "explode"
  43.         });
  44.  
  45.         $( "#opener" ).click(function() {
  46.             $("#dialog").dialog( "open" );
  47.             return false;
  48.         });
  49.     });
  50.     </script> 
  51.  
  52.  
  53. <script>     
  54. $(function() {
  55.         // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
  56.         $( "#dialog:ui-dialog" ).dialog( "destroy" );
  57.  
  58.         var name = $( "#name" ),
  59.             email = $( "#email" ),
  60.             password = $( "#password" ),
  61.             allFields = $( [] ).add( name ).add( email ).add( password ),
  62.             tips = $( ".validateTips" );
  63.  
  64.         function updateTips( t ) {
  65.             tips
  66.                 .text( t )
  67.                 .addClass( "ui-state-highlight" );
  68.             setTimeout(function() {
  69.                 tips.removeClass( "ui-state-highlight", 1500 );
  70.             }, 500 );
  71.         }
  72.  
  73.         function checkLength( o, n, min, max ) {
  74.             if ( o.val().length > max || o.val().length < min ) {
  75.                 o.addClass( "ui-state-error" );
  76.                 updateTips( "Length of " + n + " must be between " +
  77.                     min + " and " + max + "." );
  78.                 return false;
  79.             } else {
  80.                 return true;
  81.             }
  82.         }
  83.  
  84.         function checkRegexp( o, regexp, n ) {
  85.             if ( !( regexp.test( o.val() ) ) ) {
  86.                 o.addClass( "ui-state-error" );
  87.                 updateTips( n );
  88.                 return false;
  89.             } else {
  90.                 return true;
  91.             }
  92.         }
  93.  
  94.         $( "#dialog-form" ).dialog({
  95.             autoOpen: false,
  96.             height: 300,
  97.             width: 350,
  98.             modal: true,
  99.             buttons: {
  100.                 "Create an account": function() {
  101.                     var bValid = true;
  102.                     allFields.removeClass( "ui-state-error" );
  103.  
  104.                     bValid = bValid && checkLength( name, "username", 3, 16 );
  105.                     bValid = bValid && checkLength( email, "email", 6, 80 );
  106.                     bValid = bValid && checkLength( password, "password", 5, 16 );
  107.  
  108.                     bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
  109.                     // From jquery.validate.js (by joern), contributed by Scott Gonzalez: <a href="http://projects.scottsplayground.com/email_address_validation/" target="_blank">http://projects.scottsplayground.com/email...ess_validation/</a>
  110.                     bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com" );
  111.                     bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );
  112.  
  113.                     if ( bValid ) {
  114.  
  115.                         $( "#users tbody" ).append( "<tr>" +
  116.                             "<td>" + name.val() + "</td>" + 
  117.                             "<td>" + email.val() + "</td>" + 
  118.                             "<td>" + password.val() + "</td>" +
  119.                         "</tr>" ); 
  120.                         $( this ).dialog( "close" );
  121.                     }
  122.                 },
  123.                 Cancel: function() {
  124.                     $( this ).dialog( "close" );
  125.                 }
  126.             },
  127.             close: function() {
  128.                 allFields.val( "" ).removeClass( "ui-state-error" );
  129.             }
  130.         });
  131.  
  132.         $( "#create-user" )
  133.             .button()
  134.             .click(function() {
  135.                 $( "#dialog-form" ).dialog( "open" );
  136.             });
  137.     });
  138.     </script> 
  139. </head> 
  140. <body> 
  141.  <?php
  142. echo"mam $_POST[abc]";
  143.  
  144. print_r($_POST);
  145. print_r($_GET);
  146. ?>
  147. <div class="demo"> 
  148.  
  149. <div id="dialog" title="Basic dialog"> 
  150. <form action="" type="post">
  151. <input type="text" name="abc">
  152. <input type="submit">
  153. </form>
  154.  
  155.     <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> 
  156. </div> 
  157.  
  158. <button id="opener">Open Dialog</button> 
  159. <a href="#" id="opener">text</a> 
  160. </div><!-- End demo --> 
  161.  
  162.  <div id="dialog-form" title="Create new user"> 
  163.     <p class="validateTips">All form fields are required.</p> 
  164.  
  165.     <form method = "post"> 
  166.     <fieldset> 
  167.         <label for="name">Name</label> 
  168.         <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" /> 
  169.         <label for="email">Email</label> 
  170.         <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" /> 
  171.         <label for="password">Password</label> 
  172.         <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" /> 
  173.     </fieldset> 
  174.     </form> 
  175. </div> 
  176.  
  177. <div class="demo-description"> 
  178. <p>Dialogs may be animated by specifying an effect for the show and/or hide properties.  You must include the individual effects file for any effects you would like to use.</p> 
  179.  
  180.  
  181. <div id="users-contain" class="ui-widget"> 
  182.     <h1>Existing Users:</h1> 
  183.     <table id="users" class="ui-widget ui-widget-content"> 
  184.         <thead> 
  185.             <tr class="ui-widget-header "> 
  186.                 <th>Name</th> 
  187.                 <th>Email</th> 
  188.                 <th>Password</th> 
  189.             </tr> 
  190.         </thead> 
  191.         <tbody> 
  192.             <tr> 
  193.                 <td>John Doe</td> 
  194.                 <td>john.doe@example.com</td> 
  195.                 <td>johndoe1</td> 
  196.             </tr> 
  197.         </tbody> 
  198.     </table> 
  199. </div> 
  200. <button id="create-user">Create new user</button> 
  201. </div><!-- End demo-description --> 
  202.  
  203. </body> 
  204. </html> 
[HTML] pobierz, plaintext




Co trzeba zrobić, ażeby ten skrypt wysyłał dane w POST lub GET i od¶wierzył tabelkę?
To co teraz jest, nie bardzo działa
w print_r($_POST) i print_r($_GET) nie zwraca mi żadnych wyników Wiecie może co jest nie tak?

wyczytałem że formularze wysyła się czym¶ takim:
[HTML] pobierz, plaintext 
  1. if ( bValid ) {
  2. $.post("aktualnyplik.php", { name: $('#name').attr("value"), 
  3. mail: $('#email').attr("value")} 
[HTML] pobierz, plaintext


ale to nie bardzo działa sad.gif


Northwest
wookieb
28.01.2011, 15:12:26
1) Nie zapoznajesz się z konsol± błędów
2) A skoro się z ni± nie zapoznajsz to komunikatu błędu nie podajesz nam.
northwest
28.01.2011, 16:40:18

udało mi się smile.gif
if ( bValid ) {
$.post('test.php', { 'name' : $('#name').val(),'email' : $('#email').val(),'send': 'ok'});

mam takie pytanko, co zrobić żeby od¶wieżyć t± tabelkę: id="users" po zapisie?
wookieb
28.01.2011, 16:41:54
http://api.jquery.com/jQuery.post/
northwest
28.01.2011, 17:25:41
znalazłem taki sposób:
[PHP] pobierz, plaintext 
  1. $( this ).dialog( "close" ); 
  2. $("#users").toggle('slow'); 
  3. $('#users').load('slow').load();
  4. $("#users").load("dane.php");
  5. $("#users").toggle('slow');
[PHP] pobierz, plaintext


tabelka:
[HTML] pobierz, plaintext 
  1. <table id="users" class="ui-widget ui-widget-content"> 
  2. 		<thead> 
  3. 			<tr class="ui-widget-header "> 
  4. 				<th>Name</th> 
  5. 				<th>Email</th> 
  6. 			</tr> 
  7. 		</thead> 
  8. 		<tbody> 
  9. 			<tr> 
  10. 			<?php
  11. 			include"dane.php";
  12. ?>
  13. 			</tr> 
  14. 		</tbody> 
  15. 	</table> 
[HTML] pobierz, plaintext 

[PHP] pobierz, plaintext 
  1. $lista = file('baza.txt');
  2. foreach ($lista as $userek)
  3. {
  4. $tuser = explode('|',$userek);
  5. echo"<tr> <td>$tuser[0]</td>";
  6. echo"<td>$tuser[1]</td></tr> ";
  7. }
[PHP] pobierz, plaintext


po wykonaniu zapisu do pliku ramka się od¶wieża, ale nie wczytuje nowych danych... sad.gif dlaczego??
To jest wersja lo-fi głównej zawarto¶ci. Aby zobaczyć pełn± wersję z większ± zawarto¶ci±, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.