Iconvenientes php ajax

[Montes28]

hola amigos del foro espero me puedan ayudar

me encuentro trabajando con modal dialog form de jquery

en esta pagina tengo una tabla donde listo los registros de la base de datos
y tengo una un boton

Código HTML:

<button id="create-user">Insertar Nuevo Destinatario</button>
 

que abre una ventana modal con un formulario para ingresar un nuevo registro y utulizo ajax para cargar de nuevo la tabla con los registros de la base de datos incluyendo en nuevo registro.

Código Javascript:

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

Código Javascript:

function cargar_usuarios() {
 * * $.ajax({
 * * * * *url: 'views/cargar_usuarios.php',
 * * * * *type:'get',
 * * * * *cache:false,
 * * * * *success: function(data) {
 * * * * * * * $('#div_tabla_usuario').html(data);
 * * * * *}
 * * });
}
 

cargar de nuevo la tabla con los registros de la base de datos incluyendo en nuevo registro.

en esta parte es donde tengo el problema ya que en una parte de la tabla tengo 3 iconos botones que son para consultar ,modificar,eliminar.
al darle click a cada botton se abren una ventana modal correspondiente al metodo o sea consultart, modificar,eliminar. estas ventanas se abren en la pagina inicial pero si se inserta un nuevo registro cuando mediante ajax devuelvo cargar_usuarios.php ya no tienen comportamiento los botones.

que estoy haciendo mal

a continuacion comparto mi cargar_usuarios.php

Código PHP:

<?
$servidor = 'localhost';
$bd = 'correo';
$usuario = 'postgres';
$contrasenia = 'hoe798cs';
    
global $servidor, $bd, $usuario, $contrasenia;
$db = new PDO('pgsql:host=' . $servidor . ';dbname=' . $bd, $usuario, $contrasenia);
 
 
$consulta = $db->prepare("SELECT * FROM correo order by id");
$consulta->execute();
 
?>
 
<div id='div_tabla_usuario'>
 
<table width="100%" class="ui-widget ui-widget-content" id="users">
        <thead>
            <tr class="ui-widget-header ">
                <th width="12%">N°</th>
                <th width="15%">Destinatario</th>
                <th width="9%">Email</th>
                <th width="11%">Telefono</th>
                <th width="11%">Telefono</th>
                <th width="8%">Fax</th>
                <th width="20%">Web</th>
                <th width="14%"><div align="center">Acciones</div></th>
 
            </tr>
        </thead>
<?      
while($fila = $consulta->fetch(PDO::FETCH_ASSOC))
    {
 
    echo    "<tbody>";
            echo"<tr>";
                  echo "<td align='center'>" .$fila['id'] . "</td>";
                  echo "<td align='center'>" .$fila['name'] . "</td>";
                  echo "<td align='center'>" .$fila['email'] . "</td>";
                  echo "<td align='center'></td>";
                  echo "<td align='center'></td>";
                  echo "<td align='center'></td>";
                  echo "<td> <input type='checkbox' name='checkbox' value='checkbox' /></td>";
                  echo "<td><div class='fg-toolbar'>
    <button class='fg-button ui-state-default ui-corner-all' title='Consultar' id=''><span class='ui-icon ui-icon-search'></span></button>
    <button class='fg-button ui-state-default ui-corner-all' title='Modificar' id=''><span class='ui-icon ui-icon-pencil'></span></button>
    <button class='fg-button ui-state-default ui-corner-all' title='Eliminar'  id=''><span class='ui-icon ui-icon-trash'></span></button>
    </div></td>";
            echo"<tr>";
        echo"</tbody>";
    
        
        }
        ?>
        </table></div>
 

para mi el inconveniente es en esta parte pero no se como debo hacerlo para que funcione


echo "<td><div class='fg-toolbar'>
<button class='fg-button ui-state-default ui-corner-all' title='Consultar' id=''><span class='ui-icon ui-icon-search'></span></button>
<button class='fg-button ui-state-default ui-corner-all' title='Modificar' id=''><span class='ui-icon ui-icon-pencil'></span></button>
<button class='fg-button ui-state-default ui-corner-all' title='Eliminar' id=''><span class='ui-icon ui-icon-trash'></span></button>
</div></td>";

[Naahuel]

Iniciado por Montes28

pero si se inserta un nuevo registro cuando mediante ajax devuelvo cargar_usuarios.php ya no tienen comportamiento los botones.

que estoy haciendo mal

Vos lo dijiste. Si insertás nuevos elementos, estos no tienen asignado ningún event handler. Tu script se los asignó a los elementos que existían en el momento de ejecutarse.

Para solucionarlo podés mirar a las funciones:

.live()
.delegate()

[Montes28]

gracias por responder Naahuel

tengo un par de dudas .live() ,.delegate() los coloco en cargar_usuarios.php ? o en la inicial

[Naahuel]

No sé qué es cargar_usuario.php

Las colocás en la página donde necesitás realizar acciones con los elementos...

[Montes28]

en cargar_usuario tengo esto

Código PHP:

echo "<td><div class='fg-toolbar'>
    <button class='fg-button ui-state-default ui-corner-all' title='Consultar' id=''><span class='ui-icon ui-icon-search'></span></button>
    <button class='fg-button ui-state-default ui-corner-all' title='Modificar' id=''><span class='ui-icon ui-icon-pencil'></span></button>
    <button class='fg-button ui-state-default ui-corner-all' title='Eliminar'  id=''><span class='ui-icon ui-icon-trash'></span></button>
    </div></td>";
 

que hace parte de <div id='div_tabla_usuario'> y este div es el que se actualiza en la otra pagina despues de una insercion

Código Javascript:

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

Código Javascript:

<script type="text/javascript">
    function cargar_usuarios() {
 * * $.ajax({
 * * * * *url: 'views/cargar_usuarios.php',
 * * * * *type:'get',
 * * * * *cache:false,
 * * * * *success: function(data) {
 * * * * * * * $('#div_tabla_usuario').html(data);
 * * * * *}
 * * });
}
 
 
    </script>
 

[Naahuel]

No entiendo... ¿dónde decís qué tienen que hacer los botones?

[Montes28]

en la inicial

pero me da dificultad implementar lo que dices

Código Javascript:

$('div[class=fg-toolbar] :button').on('click',function() {
    //alert($(this).val());
    
    $('div[class=fg-toolbar] :button').on('click',function() {
    var titulo = $(this).attr('title');
    var idc=$(this).attr('id');
    switch(titulo) {
        case 'Consultar':
            $( "#dialog-consultar" ).dialog( "open" );
            //$( "#dialog-consultar" ).text(idc+" "+"Oscar");
            
                 $.ajax({ 
                  url:'views/consultar2.php',
                  type:'post',
                  data:'id='+idc,
                  }).done(function(data) {
                  $("#consulta2").html(data);
                
});
 
            break;
        case 'Modificar':
            //alert('boton modificar');
            break;
        case 'Eliminar':
           $( "#dialog-confirm" ).dialog( "open" );
           //$( "#dialog-confirm" ).text(idc+" "+"Oscar");
            $.ajax({ 
                  url:'views/consultar.php',
                  type:'post',
                  data:'id='+idc,
                  }).done(function(data) {
                  $("#consulta").html(data);
});
           //
           
          
           
            break;
    }
});
 

[Naahuel]

¿Me podés explicar la lógica en esto?

Código Javascript:

$('div[class=fg-toolbar] :button').on('click',function() {    
    $('div[class=fg-toolbar] :button').on('click',function() {
    // ...
    }
}
 

1ro.- ¿Por qué uno dentro del otro? Eso implicaría que al recién luego de clickear un botón, recién allí se asignaría la acción a otro botón. Pero en tu caso es totalmente inútil porque los selectores son iguales :S Realmente no entiendo que hiciste ahí.

2do.- ¿Qué es div[class=fg-toolbar] :button? :| O sea, un div con la clase fg-toolbar que está en estado button? :| :| ¿Acaso no son elementos <button> con clase fg-toolbar? No debería ser así entonces:

Código Javascript:

$('button.fg-toolbar')
 

3ro.- Después de corregir lo que te menciono más arriba, sólo deberías cambiar .on por .live

Mirá la diferencia entre estos dos ejemplos:

Usando .on: http://jsbin.com/anufic/
Fijate que si hacés click en "primer <p>" se genera un segundo <p> con el texto "<p> generado", pero si hacés click en este <p> generado, no se siguen agregando <p>'s pues este último parrafo generado ya no tiene la función asignada.

Usando .live: http://jsbin.com/anufic/2/
Si te fijás acá, haciendo click en cualquier <p> la función se dispara, incluso en <p>'s generados dinámicamente.

[Montes28]

Naahuel gracias por responder

ya revise el
1ro.- ¿Por qué uno dentro del otro? .... selectores son iguales :S Realmente no entiendo que hiciste ahí.

si el error fue mio ya lo organize

y en
2do.- ¿Qué es div[class=fg-toolbar] :button? ......


aplico lo que me indicas y no me funciona $('button.fg-toolbar')

$('button.fg-toolbar').live('click',function() {.....

estoy generando los botones
<td><div class='fg-toolbar'>
<button class='fg-button ui-state-default ui-corner-all' title='Consultar' id='<? echo $field['id'] ?>'><span class='ui-icon ui-icon-search'></span></button>
<button class='fg-button ui-state-default ui-corner-all' title='Modificar' id='<? echo $field['id'] ?>'><span class='ui-icon ui-icon-pencil'></span></button>
<button class='fg-button ui-state-default ui-corner-all' title='Eliminar' id='<? echo $field['id'] ?>'><span class='ui-icon ui-icon-trash'></span></button>
</div></td>


y en 3ro que me indicas

de esta menra si me funciona

Código Javascript:

$('div[class=fg-toolbar] :button').live('click',function() {
    var titulo = $(this).attr('title');
 

[Montes28]

me sirvieron mucho tus consejos pero si quiero saber que diferencias hay entre

$('div[class=fg-toolbar] :button').live('click',function() { ..... y $('button.fg-toolbar')

[Naahuel]

No te funciona porque me equivoqué yo. Debería ser:

Código Javascript:

$('button.fg-button')
 

Un selector de jQuery es igual a uno CSS.

button.fg.button significa seleccionar elementos <button> que tengan la clase fg-button.
div[class=fg-toolbar] :button' Yo creo que acá los dos puntos son ignorados y por eso te funciona. Los dos puntos indican estado o algún selector avanzado (:hover, :visible, :last-child, etc). En tu caso (suponiendo que los dos puntos son ignorados) signfica:

Seleccionar elementos button dentro de divs que tenga un atributo class igual a fg-toolbar. Medio complicado ¿No? Es más fácil decir todos los buttons con clase fg-button.

[Montes28]

gracias por la explicacion

en la ventanas modal de jquery tiene un icono de x para cerrar la ventana como hago para limpiar un div al cerrar mediante el icono

[Naahuel]

No sé, eso dependerá del plugin que estés usando. Hay cientos de ventanas modales para jQuery. Revisá en la documentación del plugin que estas utilizando.