Как передать данные модальной в Bootstrap 3?

Question

Я пытался передать данные в модальный режим, как пример из документации Bootstrap на моем собственном веб-сайте, но он все еще не работает?

Мое первое предположение было бы, что это имеет какое-то отношение к включениям или той позиции каждого включения.

Я не мог выяснить, почему это не работает, поэтому я надеюсь, что вы можете помочь.

Мой модал запускается нажатием на строку таблицы. Это выглядит так:

<tr data-toggle="modal" data-id="' . $trans['id'] . '" data-target="#transferModal">
    <td>' . $trans['id'] . '</td>
    <td>' . $trans['restaurant'] . '</td>
    <td>' . $trans['korer'] . '</td>
    <td>' . $trans['dato'] . '</td>
    <td>' . $trans['tillader'] . '</td>
  </tr>

Мой модал выглядит так:

<div class="modal fade" id="transferModal" tabindex="-1" role="dialog" aria-labelledby="transferModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
    <div class="modal-body">
    <form>
      <div class="form-group">
        <label for="recipient-name" class="control-label">Recipient:</label>
        <input type="text" class="form-control" id="recipient-name">
      </div>
      <div class="form-group">
        <label for="message-text" class="control-label">Message:</label>
        <textarea class="form-control" id="message-text"></textarea>
      </div>
    </form>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Send message</button>
  </div>
</div>

Это JavaScript, который контролирует data-id:

$('#transferModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('id') // Extract info from data-* attributes
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

Когда я щелкаю строку таблицы, открывается модальное окно, но идентификатор данных никуда не вставляется.

Включенные файлы включены в список (в том же порядке)

bootstrap.css // Включено в голову
style.css // Собственный css-файл - включен в заголовок
jquery.min.js // Последнее в файле
bootstrap.js // Последнее в файле

javascript jquery html css twitter-bootstrap

0

Oliver Karstoft 17 Дек 2015 в 14:47

Answer 1

Вы упустили из виду, что тег script с модальным содержимым был выше тега script, где вызывался jQuery.

0

k0pernikus 17 Дек 2015 в 12:55

Answer 2

Возможно, вы можете попробовать мой ответ, надеюсь, это поможет.

$(document).ready(function(){
  $(".thehide").hide();
  $(document).on("click", "table button", function(){
    $("#trigger_modal").trigger("click");
    $("#myModal .modal-title").html("COMPLETE INFO");
    $("#myModal .modal-body").html($("#partial_container").html());
    $('#myModal input[name="fullname"]').val($(this).closest("tr").find("td:nth-child(1)").text());
    $('#myModal input[name="age"]').val($(this).closest("tr").find("td:nth-child(2)").text());
    $('#myModal input[name="civil_status"]').val($(this).closest("tr").find("td:nth-child(3)").text());
    
  });
  
});

.thehide{display: none;}
.display_table{display: table;}
.center{margin-left: auto; margin-right: auto;}
.margin_zero{margin: 0px !important;}
.text_align_center{text-align: center;}
.text_align_left{text-align: left;}
.text_transform_uppercase{text-transform: uppercase;}
.divider{height: 15px; width: 100%; clear: both; float: none;}

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


<table class="table table-hover">
  <thead>
    <tr>
      <th class="text_align_left text_transform_uppercase">Full Name</th>
      <th class="text_align_center text_transform_uppercase">Age</th>
      <th class="text_align_center text_transform_uppercase">Gender</th>
      <th class="text_align_center text_transform_uppercase">Civil Status</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="text_align_left">Full Name 1</td>
      <td class="text_align_center">20</td>
      <td class="text_align_center">Single</td>
      <td>
        <div class="display_table center">
          <button class="btn btn-sucess">View</button>
        </div>
      </td>
    </tr>
    <tr>
      <td class="text_align_left">Full Name 2</td>
      <td class="text_align_center">15</td>
      <td class="text_align_center">Widow</td>
      <td>
        <div class="display_table center">
          <button class="btn btn-sucess">View</button>
        </div>
      </td>
    </tr>
  </tbody>
</table>



<!-- Button trigger modal -->
<button type="button" id="trigger_modal" class="thehide btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel"></h4>
      </div>
      <div class="modal-body">
       
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- the partial container -->

<div class="thehide" id="partial_container">
  <form>
    <fieldset>
      <div class="container-fluid">
        <div class="row">
          <div class="col-sm-12">
            <div class="form-group">
              <label>FULL NAME:</label>
              <input type="text" name="fullname" class="form-control" />
            </div>
          </div>
          <div class="col-sm-12">
            <div class="form-group">
              <label>AGE:</label>
              <input type="text" name="age" class="form-control" />
            </div>
          </div>
          <div class="col-sm-12">
            <div class="form-group">
              <label>CIVILS STATUS:</label>
              <input type="text" name="civil_status" class="form-control" />
            </div>
          </div>
        </div>
      </div>
    </fieldset>
    <div class="divider"></div>
    <div class="display_table center">
          <button class="btn btn-sucess">Save</button>
        </div>
  </form>
</div>

0

Juliver Galleto 17 Дек 2015 в 13:16

Answer 3

Я думаю, что вы можете попробовать,

id = $ (event.relatedTarget) .attr ('data-id'); , который я использовал в одном из моих модальностей.

0

Sravan 17 Дек 2015 в 12:03

Как передать данные модальной в Bootstrap 3?

3 ответа

Похожие вопросы

Новые вопросы

javascript