1

Estou recuperando os dados do banco de dados mysql, por meio de um while, para cada linha do banco de dados é gerado um botão, cada botão abre uma janela modal com detalhes também vindos do banco de dados, mas apenas o primeiro botão esta abrindo a janela modal!

html:

<?php  while ($row = $QUESTResult->fetch_array()) { ?>
<a id="test" class="active step"><?php echo $row['title']; ?></a>
<?php } ?>

<div class="ui modal test">
  <i class="close icon"></i>
  <div class="header">
    Profile Picture
  </div>
  <div class="image content">
    <div class="ui medium image">
      <img src="https://semantic-ui.com/images/avatar2/large/rachel.png">
    </div>
    <div class="description">
      <div class="ui header">We've auto-chosen a profile image for you.</div>
      <p>We've grabbed the following image from the <a href="https://www.gravatar.com" target="_blank">gravatar</a> image associated with your registered e-mail address.</p>
      <p>Is it okay to use this photo?</p>
    </div>
  </div>
  <div class="actions">
    <div class="ui black deny button">
      Nope
    </div>
    <div class="ui positive right labeled icon button">
      Yep, that's me
      <i class="checkmark icon"></i>
    </div>
  </div>
</div>

javascript:

<script type="text/javascript">
$(document).ready(function(){
        $("#test").click(function(){
            $(".test").modal('show');
        });
        $(".test").modal({
            closable: true
        });
});
</script>

OBS: Estou usando Semantic-ui Framework

1 Resposta 1

1

O problema é que você está utilizando o ID, que deve ser único, em vários elementos.

O correto é:

HTML:

<?php  while ($row = $QUESTResult->fetch_array()) { ?>
    <a id="test<?php echo $row["id"] ?>" class="active step"><?php echo $row['title']; ?></a>
<?php } ?>

É necessário que gere ID's diferente, ex: test1, test2, teste3, test4, etc.

JS:

$("a[id^=\"test\"]").click(function(){
    $(".test").modal('show');
});
1
  • ah, sim obrigado!
    – FoX
    Commented 31/12/2017 às 21:06

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .