Variable value in tabs inside a modal - Javascript

Question

I would like to pass a value of a variable contained in javascript through tabs within a modal to all tabs. Below is an example of what I’m trying to do.

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

Answer 1

From what I can tell you want to fill out the td with some number, follows example:

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

As there are several it is necessary to use $.each to iterate over the resulting set which is a array ($.each($(".modal-body #id_td1")).