Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

dataset

ID Dinâmico. Modal Jquery

Recommended Posts

Prezados, boa tarde;

 

Eu faço uma consulta no banco de dados e retorno o número de boletos que um cliente tem que pagar. Nesse caso são 5 boletos.

Faço um LOOP e mostro na tela assim:

<tr>
    <td>
        <a id='ConsultaInstTit50'>150,00</a>
        <div id='dialogInstTit50' style='display:none;'>
            <iframe id='iConsultaInstTit50' frameborder='0' width='300px' height='300px' src=''></iframe>
        </div>
    </td>
</tr>


<tr>
    <td>
        <a id='ConsultaInstTit51'>150,00</a>
        <div id='dialogInstTit51' style='display:none;'>
            <iframe id='iConsultaInstTit51' frameborder='0' width='300px' height='300px' src=''></iframe>
        </div>
    </td>
</tr>


<tr>
    <td>
        <a id='ConsultaInstTit52'>150,00</a>
        <div id='dialogInstTit52' style='display:none;'>
            <iframe id='iConsultaInstTit52' frameborder='0' width='300px' height='300px' src=''></iframe>
        </div>
    </td>
</tr>


<tr>
    <td>
        <a id='ConsultaInstTit53'>150,00</a>
        <div id='dialogInstTit53' style='display:none;'>
            <iframe id='iConsultaInstTit53' frameborder='0' width='300px' height='300px' src=''></iframe>
        </div>
    </td>
</tr>


<tr>
    <td>
        <a id='ConsultaInstTit54'>150,00</a>
        <div id='dialogInstTit54' style='display:none;'>
            <iframe id='iConsultaInstTit54' frameborder='0' width='300px' height='300px' src=''></iframe>
        </div>
    </td>
</tr>

Daí faço uma numeração usando a Chave da Tabela pra colocar no ID, evitando a duplicidade de ID.

 

OK

 

Acontece que tenho uma função em JQuery, ao clicar sobre o link, eu chamo a função:

jQuery('#ConsultaInstTit').click(function() {
    jQuery('#iConsultaInstTit').attr('src', '/produto/frontend/consultas/titulosdetalhes.asp?codTit=??????');
    jQuery('#dialogInstTit').dialog('open');
});
jQuery('#dialogInstTit').dialog({
    autoOpen: false,
    position: 'top' ,
    title: 'Consulta Custo Médio',
    draggable: false,
    width: 615,
    height: 400, 
    resizable: true,
    modal: true,
});

Não funciona, pois o ID do <a> não é o mesmo na função JQuery... não sei como fazer isso dinamicamente.

 

Outro problema é que uma função chama outra. Veja que a função (.click) chama a outra (.dialog).

 

Alguém tem uma solução ?

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Quando fizer o Loop adiciona uma classe nos links e um data-id com o ID

 

Exemplo:

<a class="ConsultaInstTit" data-id='54' id='ConsultaInstTit54'>

 

 

Move esse codigo

jQuery('#dialogInstTit').dialog({
autoOpen: false,
position: 'top' ,
title: 'Consulta Custo Médio',
draggable: false,
width: 615,
height: 400,
resizable
: true,
modal: true,
});

 

Para dentro do loop, alterando:

jQuery('#dialogInstTit<?=$VARID?>').dialog({

autoOpen: false,
position: 'top' ,
title: 'Consulta Custo Médio',
draggable: false,
width: 615,
height: 400,
resizable
: true,
modal: true,
});

 

$VARID - vai substituir pelo mesma variavel que vc exibe os id.....

 

 

Na função Click seria algo assim:

jQuery('.ConsultaInstTit').click(function() {

jQuery(this).attr('src', '/produto/frontend/consultas/titulosdetalhes.asp?codTit='+jQuery(this).data('id'));
jQuery('#dialogInstTit'+jQuery(this).data('id')).dialog('open');

});

Compartilhar este post


Link para o post
Compartilhar em outros sites

Dellacurtais, você é fera hien !!

 

Funcionou certinho. Agora uma dúvida...

 

Tem uma forma do código não ficar dentro do LOOP ?

 

Eu queria deixar mais enxuto sabe... tem clientes que possuem muitos títulos, e causa mais tráfego de dados, pois o HTML fica maior.

 

É que vou fazer a mesma coisa pra mais 4 colunas, ou seja... vou ter que colocar mais 4 linhas iguais aquelas pra abrir outros modais.

 

Serão ao total 5 links pra abrir em MODAL.

 

Veja a foto:

modal.jpg

 

Se pudesse ficar fora, seria perfeito. O sistema ia ficar mais otimizado e mais enxuto.

 

Agradeço a ajuda.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Remova essas div do loop

 

<div id='dialogInstTit54' style='display:none;'>
<iframe id='iConsultaInstTit54' frameborder='0' width='300px' height='300px' src=''></iframe>
</div>

 

Coloque fora

 

<div id='dialogInstTit' style='display:none;'>
<iframe id='dialogIframe' frameborder='0' width='300px' height='300px' src=''></iframe>
</div>

 

Coloque Fora:

jQuery('#dialogInstTit').dialog({

autoOpen: false,
position: 'top' ,
title: 'Consulta Custo Médio',
draggable: false,
width: 615,
height: 400,
resizable: true,
modal: true,
});

Altere o click:

jQuery('.ConsultaInstTit').click(function() {

jQuery('#dialogIframe').attr('src', '/produto/frontend/consultas/titulosdetalhes.asp?codTit='+jQuery(this).data('id'));

jQuery('#dialogInstTit').dialog('open');

});

Compartilhar este post


Link para o post
Compartilhar em outros sites

Dellacurtais, muito bom.

 

100%

 

Agora vou poder continuar meus trabalhos, muito obrigado !!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Amigo...

 

Surgiu outro problema e não to conseguindo fazer.

 

Veja essa imagem:

checkbox.jpg

 

O código ta assim

 

Botão Imprimir:

<a href='javascript:void(0)' id='imprimeboleto' class='boot'><span>Imprimir</span></a>

O iframe oculto e fora do LOOP, como você indicou:

    <div id='dialogInstTit' style='display: none;'>
        <iframe id='dialogIframe' frameborder='0' width='593px' height='355px' src=''></iframe>
    </div>

Dentro do LOOP tenho o checkbox, são criados vários, tem clientes que tem 30 boletos:

<input type='checkbox' name='auxCod' class='aplCheck' data-id='7032' value='7032' />

Daí dentro do jQuery(document).ready(function () {}) tenho:

jQuery('#imprimeboleto').click(function() {
    window.alert(jQuery('.aplCheck').data('id'));
    jQuery('#dialogIframe').attr('src', '/boleto.asp?codTit='+jQuery('.aplCheck').data('id'));
    jQuery('#dialogInstTit').dialog('open');
});


jQuery('#dialogInstTit').dialog({
    autoOpen: false,
    position: 'top' ,
    title: 'Consulta',
    draggable: false,
    width: 615,
    height: 400, 
    resizable: true,
    modal: true,
});

Eu botei um window.alert pra mostrar todos os valores do checkbox, mas não vem... na imagem tem 2 marcados, mas ta vindo apenas um.

 

Preciso passar como parâmetro pro boleto.asp todos os checkbox marcados, vai abrir os boletos num modal.

 

Você pode me ajudar ?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Já consegui...

 

Fiz assim, porém não sei se é a mehor forma. Peguei uns exemplos aqui no forum mesmo.

jQuery('#imprimeboleto').click(function() {
    if( $('.aplCheck:checked').length == 0 ){ 
        window.alert('Selecione um registro'); 
    }else{
        var val = new Array();
        $('.aplCheck:checked').each(function(){
            val.push($(this).val());
        });
        jQuery('#dialogIframe').attr('src', '/boleto.asp?codTit='+val);
        jQuery('#dialogInstTit').dialog('open');
    }
});

Só uma dúvida...

 

Tem como mudar o Título do Modal ?

 

Ele é definido nessa linha:

title: 'Consulta Custo Médio',

Mas cada MODAL vai receber um endereço diferente... então eu queria mudar o Título do Modal conforme o conteúdo que vai abrir.

 

Será que tem como passar o Título como parâmetro de uma função pra outra ?

 

Valeu

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.