2016-12-28 5 views
0

난 조금 어색한 상황에 처박혔습니다. 내 페이지에 양식을 표시하기 위해 부트 스트랩 모달을 사용하고 있습니다. 이전에는 모달을 열 때마다 이전 데이터가 유지되고있었습니다. 그래서이 코드를 코드에 추가했습니다.부트 스트랩 모달이 데이터를 표시하지 않습니다.

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

$ (". 모달 - 본문") .html (""); addHoliday를 포함하여 .modal-body 내부의 모든 것을 지우고 있으므로 다음에 버튼을 클릭하면 #addHoliday가 더 이상 존재하지 않습니다. – abbottmw

+0

다음 줄을 제거하면이 문제를 해결하는 방법 모달을 닫은 후에 이전 데이터가 지워지지 않고 –

답변

0

한 빠른 해결책 잘못이 무엇인지 알려 주시기 바랍니다 부트 스트랩을 팝업되어있는 양식 필드에서 다음과 같이 할 수 있습니다.

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

.clickMe 클릭 이벤트가 발생할 때마다 새 입력 필드를 추가하고 있습니다. 나는이 같은 것으로 교체 한 후 #addHoliday 라인에 첨부 된을 당신이 그것을 원하는 .modal - 본문에 입력 필드와 그 HTML 코드를 넣어 것입니다 ..

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

UPDATE

의견에 대한 답변으로 모달 바디의 #addHoliday의 html을 여기로 변경하십시오.

  <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

관련 문제