Tema: Consulta ajax
Ver Mensaje Individual
  #6 (permalink)  
Antiguo 03/06/2012, 23:02
Montes28
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.853
Antigüedad: 14 años, 2 meses
Puntos: 6
Respuesta: Consulta ajax
hola amigos no he logrado implentar el codigo.


este es el codigo que estoy utilizando hasta el momento logro abrir la venta modal , validar los campos e insertar en la base de datos.

pero no logro que la tabla se actualize al insertar en la base toca darle f5 o refrescar la pagina para ver los cambios.

Código Javascript: 
Ver original
  1. <script>
  2.     $(function() {
  3.         $( "#tabs" ).tabs();
  4.     });
  5.     </script>
  6.     <script>
  7.     $(function() {
  8.         // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
  9.         $( "#dialog:ui-dialog" ).dialog( "destroy" );
  10.         
  11.         var name = $( "#name" ),
  12.             email = $( "#email" ),
  13.             password = $( "#password" ),
  14.             allFields = $( [] ).add( name ).add( email ).add( password ),
  15.             tips = $( ".validateTips" );
  16.  
  17.         function updateTips( t ) {
  18.             tips
  19.                 .text( t )
  20.                 .addClass( "ui-state-highlight" );
  21.             setTimeout(function() {
  22.                 tips.removeClass( "ui-state-highlight", 1500 );
  23.             }, 500 );
  24.         }
  25.  
  26.         function checkLength( o, n, min, max ) {
  27.             if ( o.val().length > max || o.val().length < min ) {
  28.                 o.addClass( "ui-state-error" );
  29.                 updateTips( "Length of " + n + " must be between " +
  30.                     min + " and " + max + "." );
  31.                 return false;
  32.             } else {
  33.                 return true;
  34.             }
  35.         }
  36.  
  37.         function checkRegexp( o, regexp, n ) {
  38.             if ( !( regexp.test( o.val() ) ) ) {
  39.                 o.addClass( "ui-state-error" );
  40.                 updateTips( n );
  41.                 return false;
  42.             } else {
  43.                 return true;
  44.             }
  45.         }
  46.         
  47.         $( "#dialog-form" ).dialog({
  48.             autoOpen: false,
  49.             height: 300,
  50.             width: 350,
  51.             modal: true,
  52.             buttons: {
  53.                 "Create an account": function() {
  54.                     var bValid = true;
  55.                     allFields.removeClass( "ui-state-error" );
  56.  
  57.                     bValid = bValid && checkLength( name, "username", 3, 16 );
  58.                     bValid = bValid && checkLength( email, "email", 6, 80 );
  59.                     
  60.  
  61.                     //bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
  62.                     // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
  63.                     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. [email protected]" );
  64.                     bValid = bValid && checkLength( password, "password", 5, 16 );
  65.                     bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );
  66.                     
  67.                 var namec = $("#name").val();
  68.                 var emailc = $("#email").val();
  69.                 var passwordc = $("#password").val(); 
  70.                  
  71.                     if ( bValid ) {
  72.                         /*$( "#users tbody" ).append( "<tr>" +
  73.                             "<td>" + name.val() + "</td>" + 
  74.                             "<td>" + email.val() + "</td>" + 
  75.                             "<td>" + password.val() + "</td>" +
  76.                         "</tr>" );*/
  77.                 $.ajax({ 
  78.                   url:'archivo.php',
  79.                   type:'post',
  80.                   data:'name='+namec+'&email='+emailc+'&password='+passwordc,
  81.                   }).done(function(data) {
  82.                  //alert(titleq+" "+arrayOpt+" "+startq+" "+endq);
  83.                  
  84.                  alert(namec+" "+emailc+" "+passwordc);
  85.                  
  86.                 
  87.     
  88.                   }); 
  89.             
  90.                         $( this ).dialog( "close" );
  91.                     
  92.                     }
  93.                 },
  94.                 Cancel: function() {
  95.                     $( this ).dialog( "close" );
  96.                 }
  97.             },
  98.             close: function() {
  99.                 allFields.val( "" ).removeClass( "ui-state-error" );
  100.             }
  101.         });
  102.  
  103.         $( "#create-user" )
  104.             .button()
  105.             .click(function() {
  106.                 $( "#dialog-form" ).dialog( "open" );
  107.             });
  108.     });
  109.     </script>

Código HTML: 
Ver original
  1. <body>
  2.  
  3. <div class="demo">
  4.  
  5. <div id="tabs">
  6.     <ul>
  7.         <li><a href="#tabs-1">Boletines</a></li>
  8.         <li><a href="#tabs-2">Periodistas</a></li>
  9.     </ul>
  10.     <div id="tabs-1">
  11.       <div id="users-contain" class="ui-widget">
  12.     <h1>Boletines</h1>
  13.     <button id="create-user">Create new user</button>
  14.     <br>
  15.     <br>
  16. <table width="268%" class="ui-widget ui-widget-content" id="users">
  17.         <thead>
  18.             <tr class="ui-widget-header ">
  19.                 <th width="16%">Destinatario</th>
  20.                 <th width="16%">Email</th>
  21.                 <th width="10%">Telefono</th>
  22.                 <th width="13%">Telefono</th>
  23.                 <th width="13%">Telefono</th>
  24.                 <th width="9%">Fax</th>
  25.                 <th width="9%">Web</th>
  26.                 <th width="14%">Direcci&oacute;n</th>
  27.             </tr>
  28.         </thead>
  29.          <?php
  30.           
  31.         $cont = 1; 
  32.         
  33.         foreach($fl as $field)
  34.         
  35.         {
  36.         
  37.     ?>
  38.         <tbody>
  39.             <tr>
  40.                 <td><?php echo $cont?></td>
  41.                 <td><?php echo $field['name']?></td>
  42.                 <td><?php echo $field['email']?></td>
  43.                 <td></td>
  44.                 <td></td>
  45.                 <td></td>
  46.                 <td></td>
  47.                 <td></td>
  48.             </tr>
  49.         </tbody>
  50.             <?php
  51.     
  52.         $cont++;
  53.         
  54.         }
  55.  
  56.     ?>
  57.     </table>
  58.     <p><div id="dialog-form" title="Create new user">
  59.     <p class="validateTips">All form fields are required.</p>
  60.  
  61.     <form>
  62.     <fieldset>
  63.         <label for="name">Name</label>
  64.         <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
  65.         <label for="email">Email</label>
  66.         <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
  67.         <label for="password">Password</label>
  68.         <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
  69.     </fieldset>
  70.     </form>
  71. </div></p>
  72.       </div>
  73. </div>
  74.     <div id="tabs-2">
  75.         <p>Periodistas</p>
  76.     </div>
  77.   </div>
  78.  
  79. </div><!-- End demo -->
  80. <!-- End demo-description -->
  81. </body>