2016-10-09 2 views
0

Я прочитал документацию Bootsrap и даже протестировал их вариант «Изменение модального контента на основе кнопки триггера», но это не сработает.Bootstrap Передача данных модному

Любая идея о том, как передать данные в модальную форму, чтобы я не создавал на моей странице несколько модалов.

Вот кнопка, которая запускает модальность:

<a class="btn btn-danger" data-toggle="modal" data-target="#deleteSubject" data-whatever="<?= $subj_id ?>" role="button" title="Delete Subject"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a> 

А вот модальный:

<div class="modal fade" id="deleteSubject" tabindex="-1" role="dialog" aria-labelledby="deleteSubjectLabel"> 
      <div class="modal-dialog" role="document"> 
      <div class="modal-content"> 
       <form action="#" method="post"> 
        <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="deleteSubjectLabel">Delete Subject</h4> 
        </div> 
        <div class="modal-body"> 
        <h4>Do you want to delete this subject?</h4> 
        <input type="text" id="subjid" name="subjid"> 
        </div> 
        <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
        <button type="submit" class="btn btn-danger">Delete</button> 
        </div> 
       </form> 
      </div> 
      </div> 
     </div> 

А вот JavaScript:

<script> 
     $('#deleteSubject').on('show.bs.modal', function (event) { 
      var button = $(event.relatedTarget) 
      var subjId = button.data('whatever') 
      var modal = $(this) 
      modal.find('.modal-body input').val(subjId) 
     }) 
    </script> 

Я также попытался show.bs.modal, но ничего не происходит. Я попытался создать отдельный скрипт, чтобы проверить, читается ли $subj_id с использованием alert, но он работает.

Любые идеи?

ответ

2

вам нужно обернуть код в документ готов, и так как ваш вход назван и имеет идентификатор - цель непосредственно и тогда вам не нужно находку либо:

<script> 
    $(document).ready(function(){ 
     $('#deleteSubject').on('show.bs.modal', function (event) { 
      var button = $(event.relatedTarget); 
      var subjId = button.data('whatever'); 
      $('#subjid').val(subjId); 
     }) 
    }) 
</script> 
+0

Спасибо, этот работает! – aronccs

+0

добро пожаловать - с удовольствием помогите :) – gavgrif

0

Я думаю, что вы забыли $ на вашем модальной, например, он должен быть $modal

<script> 
     $('#deleteSubject').on('show.bs.modal', function (event) { 
      var button = $(event.relatedTarget) 
      var subjId = button.data('whatever') 
      var $modal = $(this) 
      $modal.find('.modal-body input').val(subjId) 
     }) 
    </script> 
+0

Знак доллара в переменной «$ modal» не имеет значения. Может захотеть удалить это, пока вы не опущены. –

+0

Я пробовал, но ничего не происходит – aronccs

0

Просто установите значение входа subjid с помощью JavaScript/JQuery в течение по щелчку события.

$ ('# subjid'). Val (value);

Смежные вопросы