Consulta ajax

[Montes28]

Hola amigos tengo la siguiente consulta


estoy trabajando con el Dialog modal form de jquery http://jqueryui.com/demos/dialog/#modal-form el ejemplo funcina sin conexion a base de datos , como hago para que al abrirse el dialog modal form e insertar los datos en base de datos se actualiza la tabla

el inconveniente es para actualizar la tabla cada vez que se ingresen los datos

gracias

[IsaBelM]

quizás, ..... ajax??

[reonevk]

mira tienes que tener 2 archivos, el archivo javascript que sera el encargado de hacer la llamada ajax y el archivo php que sera el que realice la sentencia a la base de datos.

En javascript tienes que hacer la llamada con algo como esto(de manera sincrona):

function createAjax()
{
var xmlhttp=false;
try
{
// Creacion del objeto AJAX para navegadores no IE
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
// Creacion del objet AJAX para IE
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(E) { xmlhttp=false; }
}
if (!xmlhttp && typeof XMLHttpRequest!="undefined") { xmlhttp=new XMLHttpRequest(); }

return xmlhttp;
}


//funcion que ejecuta el ajax llamando al archivo php y devolviendo un objeto JSON que manda el php
function executeAjax(vars)
{
var ajax = createAjax();
ajax.open("POST", "ajax.php", false);
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
ajax.send(vars);
return ajax.responseText;
}



----------------------------


llamarias a executeAjax y te devolveria lo que el php devuelva.

[Montes28]

amigos gracias por responder estoy intentando implementar el codigo me resultan varios inconvenientes:

el siguiente codigo sirve para abrir el dialog modal form

Código Javascript:

<script>
    $(function() {
        // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
        $( "#dialog:ui-dialog" ).dialog( "destroy" );
        
        var name = $( "#name" ),
            email = $( "#email" ),
            password = $( "#password" ),
            allFields = $( [] ).add( name ).add( email ).add( password ),
            tips = $( ".validateTips" );
 
        function updateTips( t ) {
            tips
                .text( t )
                .addClass( "ui-state-highlight" );
            setTimeout(function() {
                tips.removeClass( "ui-state-highlight", 1500 );
            }, 500 );
        }
 
        function checkLength( o, n, min, max ) {
            if ( o.val().length > max || o.val().length < min ) {
                o.addClass( "ui-state-error" );
                updateTips( "Length of " + n + " must be between " +
                    min + " and " + max + "." );
                return false;
            } else {
                return true;
            }
        }
 
        function checkRegexp( o, regexp, n ) {
            if ( !( regexp.test( o.val() ) ) ) {
                o.addClass( "ui-state-error" );
                updateTips( n );
                return false;
            } else {
                return true;
            }
        }
        
        $( "#dialog-form" ).dialog({
            autoOpen: false,
            height: 300,
            width: 350,
            modal: true,
            buttons: {
                "Create an account": function() {
                    var bValid = true;
                    allFields.removeClass( "ui-state-error" );
 
                    bValid = bValid && checkLength( name, "username", 3, 16 );
                    bValid = bValid && checkLength( email, "email", 6, 80 );
                    bValid = bValid && checkLength( password, "password", 5, 16 );
 
                    bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
                    // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
                    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]" );
                    bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );
 
                 
                    if ( bValid ) {
                        $( "#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" );
                }
            },
            close: function() {
                allFields.val( "" ).removeClass( "ui-state-error" );
            }
        });
 
        $( "#create-user" )
            .button()
            .click(function() {
                $( "#dialog-form" ).dialog( "open" );
            });
    });
    </script>
 

estoy tratando de guardar en base de datos por tal motivo utilizo ajax pero no me funciona,este codigo ajax lo coloco en entre

if ( bValid ) {


$( this ).dialog( "close" );

}

Código Javascript:

$.ajax({ 
              url:'archivo.php',
                  type:'post',
                  data:'name='+name+'&email='+email+'&password='+password,
                  }).done(function(data) {
                
               alert(name+" "+email+" "+password);
                
    
                  })
 

que estoy haciendo mal?

[Montes28]

hola amigos ya logro insertar en la base de dato por media de la ventana modal,

en la pagina.php tengo una tabla html donde listo los registros de la base de datos necito que al momento de insertar los datos mediante la ventana modal aparezca el nuevo registro en la tabla sin necesidad de recargar la pagina.

tengo unas preguntas para lo que me recomendo reonevk

"mira tienes que tener 2 archivos, el archivo javascript que sera el encargado de hacer la llamada ajax y el archivo php que sera el que realice la sentencia a la base de datos.

En javascript tienes que hacer la llamada con algo como esto(de manera sincrona):

function createAjax()
{
var xmlhttp=false;
try
{
// Creacion del objeto AJAX para navegadores no IE
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
// Creacion del objet AJAX para IE
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(E) { xmlhttp=false; }
}
if (!xmlhttp && typeof XMLHttpRequest!="undefined") { xmlhttp=new XMLHttpRequest(); }

return xmlhttp;
}


//funcion que ejecuta el ajax llamando al archivo php y devolviendo un objeto JSON que manda el php
function executeAjax(vars)
{
var ajax = createAjax();
ajax.open("POST", "ajax.php", false);
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
ajax.send(vars);
return ajax.responseText;
}
"

en donde de mi codigo llama la function createAjax() ya que utilizo la venta modal

[Montes28]

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:

<script>
    $(function() {
        $( "#tabs" ).tabs();
    });
    </script>
    <script>
    $(function() {
        // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
        $( "#dialog:ui-dialog" ).dialog( "destroy" );
        
        var name = $( "#name" ),
            email = $( "#email" ),
            password = $( "#password" ),
            allFields = $( [] ).add( name ).add( email ).add( password ),
            tips = $( ".validateTips" );
 
        function updateTips( t ) {
            tips
                .text( t )
                .addClass( "ui-state-highlight" );
            setTimeout(function() {
                tips.removeClass( "ui-state-highlight", 1500 );
            }, 500 );
        }
 
        function checkLength( o, n, min, max ) {
            if ( o.val().length > max || o.val().length < min ) {
                o.addClass( "ui-state-error" );
                updateTips( "Length of " + n + " must be between " +
                    min + " and " + max + "." );
                return false;
            } else {
                return true;
            }
        }
 
        function checkRegexp( o, regexp, n ) {
            if ( !( regexp.test( o.val() ) ) ) {
                o.addClass( "ui-state-error" );
                updateTips( n );
                return false;
            } else {
                return true;
            }
        }
        
        $( "#dialog-form" ).dialog({
            autoOpen: false,
            height: 300,
            width: 350,
            modal: true,
            buttons: {
                "Create an account": function() {
                    var bValid = true;
                    allFields.removeClass( "ui-state-error" );
 
                    bValid = bValid && checkLength( name, "username", 3, 16 );
                    bValid = bValid && checkLength( email, "email", 6, 80 );
                    
 
                    //bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
                    // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
                    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]" );
                    bValid = bValid && checkLength( password, "password", 5, 16 );
                    bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );
                    
                var namec = $("#name").val();
                var emailc = $("#email").val();
                var passwordc = $("#password").val(); 
                 
                    if ( bValid ) {
                        /*$( "#users tbody" ).append( "<tr>" +
                            "<td>" + name.val() + "</td>" + 
                            "<td>" + email.val() + "</td>" + 
                            "<td>" + password.val() + "</td>" +
                        "</tr>" );*/
                $.ajax({ 
                  url:'archivo.php',
                  type:'post',
                  data:'name='+namec+'&email='+emailc+'&password='+passwordc,
                  }).done(function(data) {
                 //alert(titleq+" "+arrayOpt+" "+startq+" "+endq);
                 
                 alert(namec+" "+emailc+" "+passwordc);
                 
                
    
                  }); 
            
                        $( this ).dialog( "close" );
                    
                    }
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
            close: function() {
                allFields.val( "" ).removeClass( "ui-state-error" );
            }
        });
 
        $( "#create-user" )
            .button()
            .click(function() {
                $( "#dialog-form" ).dialog( "open" );
            });
    });
    </script>
 

Código HTML:

<body>
 
<div class="demo">
 
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Boletines</a></li>
        <li><a href="#tabs-2">Periodistas</a></li>
    </ul>
    <div id="tabs-1">
      <div id="users-contain" class="ui-widget">
    <h1>Boletines</h1>
    <button id="create-user">Create new user</button>
    <br>
    <br>
<table width="268%" class="ui-widget ui-widget-content" id="users">
        <thead>
            <tr class="ui-widget-header ">
                <th width="16%">Destinatario</th>
                <th width="16%">Email</th>
                <th width="10%">Telefono</th>
                <th width="13%">Telefono</th>
                <th width="13%">Telefono</th>
                <th width="9%">Fax</th>
                <th width="9%">Web</th>
                <th width="14%">Direcci&oacute;n</th>
            </tr>
        </thead>
         <?php
          
        $cont = 1; 
        
        foreach($fl as $field)
        
        {
        
    ?>
        <tbody>
            <tr>
                <td><?php echo $cont?></td>
                <td><?php echo $field['name']?></td>
                <td><?php echo $field['email']?></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
            <?php
    
        $cont++;
        
        }
 
    ?>
    </table>
    <p><div id="dialog-form" title="Create new user">
    <p class="validateTips">All form fields are required.</p>
 
    <form>
    <fieldset>
        <label for="name">Name</label>
        <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
        <label for="email">Email</label>
        <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
        <label for="password">Password</label>
        <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
    </fieldset>
    </form>
</div></p>
      </div>
</div>
    <div id="tabs-2">
        <p>Periodistas</p>
    </div>
  </div>
 
</div><!-- End demo -->
<!-- End demo-description -->
</body>