0

Gostaria de passar um valor de uma variável contido em javascript através das tabs dentro de um modal para todas as abas. Segue abaixo um exemplo do que eu estou tentando fazer.

$(function () { $(".btn-lg").click(function () {

var td1 = "Teste";
$(".modal-body #id_codigo").val(id_codigo);
td1.innerHTML = id_codigo;

})
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<ul class="nav nav-tabs nav-justified" style='margin-top: 0px;' >
<li role="presentation" class="active"><a href="#t1" aria-controls="t1" role="tab" data-toggle="tab">Teste1</a></li>
<li role="presentation"><a href="#t2" aria-controls="t2" role="tab" data-toggle="tab">Teste2</a></li>
<li role="presentation"><a href="#t3" aria-controls="t3" role="tab" data-toggle="tab">Teste3</a></li>
<li role="presentation"><a href="#t4" aria-controls="t4" role="tab" data-toggle="tab">Teste4</a></li>
<li role="presentation"><a href="#t5" aria-controls="t5" role="tab" data-toggle="tab">Teste5</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="t1">
<div class='container-fluid'>
<div class='table-wrapper'>
<div class='table-title'>
</div>
<table class="table table-responsive" border="0">
<tr>
<th>Código:</th>
<td id="id_td1"></td>
</tr>
</table>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="t2">
<div class='container-fluid'>
<div class='table-wrapper'>
<div class='table-title'>
</div>
<table class="table table-responsive" border="0">
<tr>
<th>Código:</th>
<td id="id_codigo"></td>
</tr>
</table>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane active" id="t3">
<div class='container-fluid'>
<div class='table-wrapper'>
<div class='table-title'>
</div>
<table class="table table-responsive" border="0">
<tr>
<th>Código:</th>
<td id="id_td1"></td>
</tr>
</table>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane active" id="t4">
<div class='container-fluid'>
<div class='table-wrapper'>
<div class='table-title'>
</div>
<table class="table table-responsive" border="0">
<tr>
<th>Código:</th>
<td id="id_td1"></td>
</tr>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>

</div>
</div>

</div>

1 Resposta 1

0

Pelo que pude perceber você quer preencher o td com algum número, segue exemplo:

$(function() {
  $(".btn-lg").click(function() {
    const id_codigo = 1;    
    $.each($(".modal-body #id_td1"), (index, item) => {    
        $(item).text(id_codigo);
    });
  });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <ul class="nav nav-tabs nav-justified" style='margin-top: 0px;'>
            <li role="presentation" class="active"><a href="#t1" aria-controls="t1" role="tab" data-toggle="tab">Conteúdo</a></li>
            <li role="presentation"><a href="#t2" aria-controls="t2" role="tab" data-toggle="tab">Avaliação</a></li>
            <li role="presentation"><a href="#t3" aria-controls="t3" role="tab" data-toggle="tab">Avaliação</a></li>
            <li role="presentation"><a href="#t4" aria-controls="t4" role="tab" data-toggle="tab">Avaliação</a></li>
            <li role="presentation"><a href="#t5" aria-controls="t5" role="tab" data-toggle="tab">Avaliação</a></li>
          </ul>
          <!-- Tab panes -->
          <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="t1">
              <div class='container-fluid'>
                <div class='table-wrapper'>
                  <div class='table-title'>
                  </div>
                  <table class="table table-responsive" border="0">
                    <tr>
                      <th>Código:</th>
                      <td id="id_td1"></td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="t2">
              <div class='container-fluid'>
                <div class='table-wrapper'>
                  <div class='table-title'>
                  </div>
                  <table class="table table-responsive" border="0">
                    <tr>
                      <th>Código:</th>
                      <td id="id_td1"></td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
            <div role="tabpanel" class="tab-pane active" id="t3">
              <div class='container-fluid'>
                <div class='table-wrapper'>
                  <div class='table-title'>
                  </div>
                  <table class="table table-responsive" border="0">
                    <tr>
                      <th>Código:</th>
                      <td id="id_td1"></td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
            <div role="tabpanel" class="tab-pane active" id="t4">
              <div class='container-fluid'>
                <div class='table-wrapper'>
                  <div class='table-title'>
                  </div>
                  <table class="table table-responsive" border="0">
                    <tr>
                      <th>Código:</th>
                      <td id="id_td1"></td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>

        </div>
      </div>

    </div>

Como são vários é necessário utilizar $.each para iterar sobre o conjunto resultante que é um array ($.each($(".modal-body #id_td1")).

1
  • 1
    Muito obrigado amigo. Solucionou minha dúvida.
    – Carlos
    Commented 30/09/2019 às 19:43

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 .