2016-12-28 5 views
0

Я просто застрял в неловкой ситуации. Я использую bootstrap modal, чтобы показать форму на моей странице. Ранее старые данные становились неизменными каждый раз, когда я открываю модальный. так что я добавил эту строку в своем кодеbootstrap modal not show data

$(".modal").on("hidden.bs.modal", function(){ 
    $(".modal-body").html(""); 
}); 

Теперь первый раз показывает правильные данные, но второй раз и далее он не показывает ничего в моей модели. Ниже мой код модели

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" id="closeTab" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title" id="myModalLabel">add holiday</h4> 
      </div> 

      <div class="modal-body"> 
      <form action="" id="holidayForm"> 
      <h3> <label id="addHoliday"><span class="label label-info">date</span></label> </h3> 

      <h3> <label id="holidayDetail"><span class="label label-info">description</span></label> </h3> 
       <input class="form-control input-lg" id="inputlg" placeholder="description" type="text"> 
       </form> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" id="close" class="btn btn-default" data-dismiss="modal">Close</button> 
       <button type="submit" id="saveChanges" class="btn btn-primary">Save changes</button> 
      </div> 

     </div> 
    </div> 
</div> 

это код всплывал самозагрузку

$('.clickMe').click(function(){ 
    var clickId=$(this).attr('id'); 
    var myDate=clickId.toString().substr(0,2); 
    var myMonth=clickId.toString().substr(2,4); 
    $("#addHoliday").append("<h3><input type='text' name='newDate' disabled='disabled' id='newDate'value="+this_year+"-"+myMonth+"-"+myDate+"></input></h3>"); 
    $("#myModal").modal('show'); 


}) 

пожалуйста, дайте мне знать, что это неправильно

+0

$ (". Modal-body"). Html (""); очищает все внутри .modal-body, включая addHoliday, поэтому при следующем нажатии кнопки #addHoliday больше не существует. – abbottmw

+0

тогда, как решить эту проблему, если я удалю эту строку, старые данные не были очищены после закрытия модального –

ответ

0

Одно быстрое решение ...

Чтобы зачистить заполните поля формы, вы можете сделать что-то подобное

$(".modal").on("hidden.bs.modal", function(){ 
    $(".modal-body #holidayForm input").val(""); 
}); 

Вы добавляете новое поле ввода каждый раз при запуске события клика .clickMe. Я бы поставил этот HTML-код с полями ввода в .modal-тела, где вы хотите его, а затем заменить добавления к #addHoliday линии на что-то вроде этого ..

$(".modal-body #holidayForm #newDate").val(this_year + "-" + myMonth + "-" + myDate); 
$(".modal-body #holidayForm #inputlg").val(""); 

UPDATE

В ответ на ваш комментарий измените html #addHoliday в модальном теле на это.

  <h3> 
      <label id="addHoliday"> 
      <span class="label label-info">date</span> 
      <h3><input type="text" name="newDate" id="newDate" value=""/></h3> 
      </label> 
     </h3> 

Таким образом, вы одно поле ввода newDate, и событие щелчка обновляет это поле в .modal-теле

имеет смысл?

+0

, если я заменяю строку добавления, а затем не показываю поля даты –

+0

Вот [jsfiddle] (https://jsfiddle.net/abbottmw/ymdtbLgr /) того, о чем я говорю. – abbottmw