generar dialog modal dinamicamente

[Montes28]

hola compañeros de foro espero me ayudo me encuntro generando un dialog modal
dinamicamente.

estoy generando una tabla con el resultado de una consulta a una base de datos y necesito que se cree el link para que en todos lo registros-filas se pueda abrir el dialog hasta el momento solo puedo con el primer registro , cree un contador para generar el link pero el inconveniente es para que que en la function de jquery sepa que valor de contador la esta llamando

<script>
$(function() {
$( "#dialog:ui-dialog" ).dialog( "destroy" );

$( "#dialog-confirm" ).dialog({
autoOpen: false,
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
},
Cancelar: function() {
$( this ).dialog( "close" );
}

}
});
$( "#consultar" )
.button()
.click(function() {
$( "#dialog-confirm" ).dialog( "open" );
});
});
</script>

Código HTML:

<thead>
            <tr class="ui-widget-header ">
                <th width="12%">Destinatario</th>.............
 

Código PHP:

mediante php estoy creando la tabla y los botones 
 
id='consultar$cont'
 
.........
<td><?php echo "<div class='fg-toolbar'>
    <button class='fg-button ui-state-default ui-corner-all' title='Consultar' id='consultar$cont'><span class='ui-icon ui-icon-search'></span></button>
    <button class='fg-button ui-state-default ui-corner-all' title='Modificar' id='modificar$cont'><span class='ui-icon ui-icon-pencil'></span></button>
    <button class='fg-button ui-state-default ui-corner-all' title='Eliminar'  id='eliminar$cont'><span class='ui-icon ui-icon-trash'></span></button>
    </div>"; ?> </td>
 

y como resultado tendria

consultar1
consultar2
consultar3

como hago para que el codigo js sepa que es consultar1...... y no solo consultar

$( "#consultar" )
.button()
.click(function() {
$( "#dialog-confirm" ).dialog( "open" );
});

[Nemutagk]

No se entiende lo que pretendes hacer, pero estoy suponiendo que quieres agregar el evento "click" a todos los botones "consutarX", si es así estas creando mal el "selector"...

Código Javascript:

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

[Montes28]

gracais Nemutagk por responder implemente tu codigo y me abre una misma modal para los 3 botones necesito una modal diferente para cada boton

Código PHP:

<button class='fg-button ui-state-default ui-corner-all' title='Consultar' id='consultar'><span class='ui-icon ui-icon-search'></span></button>
    <button class='fg-button ui-state-default ui-corner-all' title='Modificar' id='modificar'><span class='ui-icon ui-icon-pencil'></span></button>
    <button class='fg-button ui-state-default ui-corner-all' title='Eliminar'  id='eliminar'><span class='ui-icon ui-icon-trash'></span></button>
 

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" );
    
        $( "#dialog-confirm" ).dialog({
            autoOpen: false,
            resizable: false,
            height:140,
            modal: true,
            buttons: {
                "Delete all items": function() {
                    $( this ).dialog( "close" );
                },
                Cancelar: function() {
                    $( this ).dialog( "close" );
                }
                
            }
        });
        $('div[class=fg-toolbar] :button').on('click',function() {
    //alert($(this).val());
    $( "#dialog-confirm" ).dialog( "open" );
});
            
                
            
    });
 

[Nemutagk]

amigo, hay que usar la imaginación >.<...

Código Javascript:

$('div[class=fg-toolbar] :button').on('click',function() {
    var titulo = $(this).attr('title');
    switch(titulo) {
        case 'Consultar':
            alert('boton consultar');
            break;
        case 'Modificar':
            alert('boton modificar');
            break;
    }
});
 

[Montes28]

Nemutagk gracias me sirvio de mucho tu ayuda.

queria preguntarte algo, desde

<button class='fg-button ui-state-default ui-corner-all' title='Consultar' id='consultar'><span class='ui-icon ui-icon-search'></span></button>

puedo enviar la llave primaria para hacer una consulta y mostrar el resultado en la modal?

[Nemutagk]

no entendi nada, cual llave primaria? en tu boton no veo mas que un span vacío....

[Montes28]

mira te explico y me Corriges si es el caso

por ejemplo en la modal de consultar solo voy a imprimir los datos dela consulta por el id en este caso creo que no necesito ajax , pero para el modificar si porque necesito leer el id que traigo desde la base de datos.

para saber el id realize lo siguiente

en <button clas... id='<? echo $field['id'] ?>'

<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>

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

ya tengo el id mi duda es donde imprimo la consulta me toca con ajax?

[Nemutagk]

ya tengo el id mi duda es donde imprimo la consulta me toca con ajax?

tss, me dejas igual, no entendi nada, pero bueno, con lo que has dicho estoy suponiendo que vas a modificar algún registro en una db, si es el caso es obvio que necesitas ajax, pero repito, realmente no entiendo tu pregunta, cual consulta? imprimir?

[Montes28]

te explico

tengo una tabla donde listo n registros y cada registro tiene un boton para consultar,editar,modificar.

hasta el momento si doy click sobre cada botton se abre una ventana modal. ahora me encuentro ropiendome la cabeza para que al darle click al botton consultar se pueda vizualizar toda la consulta correspondiente solo a dicho registro(y para hacer esta consulta necesito el id del registro).

creo que seria de la siguiente manera
este es el valor del id del registro

$field['id']

<button clas... id='<? echo $field['id'] ?>'

<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>

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

[Nemutagk]

sigo sin entender tu problema, lo que eh llegado a entender es que solo te faltaría hacer la petición ajax después de obtener el id para visualizar la consulta, pero repito, me es confuso tu problema y lo que intentas hacer