Problema com botão em tabela pix x filho

WCM
1

Alguém já conseguiu lidar com botões em uma tabela pai x filho? Estou com um problema onde, o botão funciona normalmente está tudo correto, e um botão para adicionar imagem e outro que apresenta a imagem em um modal.

image
image161×430 5.44 KB

Porém quando passo a atividade o index é perdido no button de visualizar a imagem e não consigo mais encontrar ele para apresentar a imagem.

Esse é o campo na atividade ativo

<div class="btn-group">
    <a class="file-input-wrapper btn btn-primary btn-md">
        <input type="file" name="img_btn_m___2" id="img_btn_m___2" data-toggle="tooltip" data-placement="left" title="Adicionar Foto" onclick="uploadFile(this)">
        <i class="flaticon flaticon-camera icon-md" aria-hidden="true" name="img_btn_m___2___2" id="img_btn_m___2___2" value=""></i>
        <input type="hidden" name="obrigafotom___2" id="obrigafotom___2" value="Sim">
    </a>
    <button class="btn btn-info" id="data_modal_img_m___2" onclick="fnAbreFoto(this)" value="" name="data_modal_img_m___2">
        <i class="flaticon flaticon-view icon-md" aria-hidden="true"></i>
    </button>
</div>

Esse é o campo em outra atividade

<div class="btn-group">
    <a class="file-input-wrapper btn btn-primary btn-md">
        <input type="file" name="img_btn_m___2" id="img_btn_m___2" data-toggle="tooltip" data-placement="left" title="" onclick="uploadFile(this)" value="" disabled="" data-original-title="Adicionar Foto">
        <i class="flaticon flaticon-camera icon-md" aria-hidden="true"></i>
        <input type="hidden" name="obrigafotom___2" id="obrigafotom___2" value="Sim">
    </a>
    <button class="btn btn-info btn-md" id="data_modal_img_m" onclick="fnAbreFoto(this)" >
        <i class="flaticon flaticon-view icon-md" aria-hidden="true"></i>
    </button>
</div>

E eu preciso desse index pois é como eu busco o url da imagem:

function fnAbreFoto(campo){
  var tab = campo.id.split("_")[3];
  var index = campo.id.split("___")[1];
  let url = document.getElementById("img_url_"+tab+"___"+index).value;
  document.getElementById('modal_img').innerHTML = `
  <div class="fs-align-items-center fs-display-flex fs-flex-direction-column fs-md-gap fs-sm-padding-vertical">
    <img src="${url}" id="foto_modal"></img>
    <button class="btn btn-default" data-dismiss="modal">Close</button> 
  </div> 
  `;
  var template = $('#modal_img').html();
  FLUIGC.modal({
    content: Mustache.render(template),
    id: 'fluig_dialog',
    size: "full", 
    showHeader: false,
    showFooter: false
  });
}
1 curtida
2

Olá, tudo bem? O botão não fica com o índice mesmo, teria que procurar um input pelo elemento do botão para pegar o índice. Tipo assim:

$("#data_modal_img_m").parent("div").find("input[value^=img_btn_m___]").split("___")[1];

Abs

3

Boa tarde Eduardo, obrigado pelo retorno.
Problema com essa busca é que buscando pelo parent ou querySelector ele entra sempre no td que é gerado sem o índice, aquele “padrão” de toda tabela e por conta disso não consigo encontrar em lugar nenhum o índice do botão que é clicado. E é nesse problema que estou preso.

4

Acredito que assim funcionaria, usando JQuery :

function fnAbreFoto(campo){
    const url = $(campo).closest("tr").find('[id*="img_url____"]').val()
    // ...
}
1 curtida
5

Tive que fazer uma gambiarra mas funcionou

url = $(campo).closest("tr").children().eq(4).find("input").eq(2).val();

Obrigado pelo apoio.

6

Eu não tinha reparado bem que tem um tab antes dos ___, por isso que o código não deve ter funcionado.

Talvez trocar pra esse funcione.

// coloquei o input pra reduzir consultas e no id deixei só o início antes do tab
const url = $(campo).closest("tr").find('input[id*="img_url_"]').val();

Do jeito que você fez tá indo mais direto ao input correto também. Tá valendo.

2 curtidas