2016-10-09 7 views
0

나는 이미 이것을 검색했지만 아직 작동시키지 못했습니다. 부트 스트랩 모달 대체 자리 표시 자

은 내가 모달

<div class="modal fade" id="info" tabindex="-1" role="dialog" aria-labelledby="infoLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-sm"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       Informations 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
      </div> 
      <div class="modal-body"> 
       Added: PLACEHOLDER 
       Modified: PLACEHOLDER2 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>   
      </div> 
     </div> 
    </div> 
</div> 
것은 이것이 루프

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#info" data-added="<?php if(strtotime($ecp_code->added) > strtotime('2000-01-01 01:00:00')) { echo date('d.m.y H:i', strtotime($ecp_code->added)); } else { echo "-";} ?>" data-modified="<?php if(strtotime($ecp_code->changed) > strtotime('2000-01-01 01:00:00')) { echo date('d.m.y H:i', strtotime($ecp_code->changed)); } else { echo "-";} ?>"><i class="fa fa-info" style="width:14px;"></i></button> 

이 버튼을 .... 내가 jQuery를/AJAX와 부트 스트랩에 새로운 오전 그리고 난 그것이 쉽지 않다 희망

스크립트 :

<script> 
    $(document).ready(function() { 
     $('#info').on('show.bs.modal', function (event) { 
      var button = $(event.relatedTarget); 
      var added = button.data('added'); 
      var modified = button.data('modified'); 

      var content = 'Added: ' + added + ' Modified: ' + modified + ''; 

      var modal = $(this); 
      modal.find('.modal-body').text(content); 
     }); 
    }); 
</script> 

잘 작동합니다. 그것은 모달 - 바디의 전체 내용을 대체합니다.


하지만 지금은 한 단어 만 바꿔줬으면합니다. PLACEHOLDER에 var가 추가되고 PLACEHOLDER2에 var가 수정됩니다. (단지 예일뿐입니다)

<script> 
    $(document).ready(function() { 
     $('#info').on('show.bs.modal', function (event) { 
      var button = $(event.relatedTarget); 
      var added = button.data('added'); 
      var modified = button.data('modified'); 
      var modal = $(this); 
      var res = replace("PLACEHOLDER", (added)); 
      modal.find('.modal-body').text(res); 
     }); 
    }); 
</script> 

이런 식으로 작동하지 않습니다.

한 번 더 질문 : jQuery와 AJAX를 lern 할 수있는 좋은 리소스를 알고 계십니까? 모달 몸에

답변

0

삽입 두 개의 새로운 요소

<div class="modal-body"> 
    <label>Added:</label> 
    <div id="Added"></div> 
    <label>Modified:</label>  
    <div id="Modified"></div> 
</div> 

modal.find('.modal-body #Added').text(your content added); 

: 그리고 당신이 그 된 div에 추가하는 내용이 html 태그가 포함 된 경우

modal.find('.modal-body #Modified').text(your content modified); 

당신은 더 나은 .text() 대신에 .html()을 사용할 수 있습니다

+0

감사합니다! 정말 좋은 생각이야. 하지만 관심이없는 것 : 모달에서 한 단어를 대체 할 수 있습니까? – wassereimer

+0

다음과 같이 바꿀 수 있습니다. content = content.replace (/ the_word/g, "other_word"); 여기서 the_word는 대체하려는 단어이고 the_word는 대체 단어입니다. 이 답을 대답으로 표시하십시오. 미래의 사용자에게 중요합니다. replace 메소드가 일치하는 모든 단어를 대체한다는 점도 명심하십시오. – Franco

+0

이미 답변으로 표시되었습니다. :) 내가 교체를 사용할 때 "잡히지 않은 ReferenceError : 바꾸기가 정의되지 않았습니다."라는 오류가 발생합니다. content = content.replace (/ PLACEHOLDER1/g, added); modal.find ('. 모달 - 본문'). 텍스트 (내용); – wassereimer

관련 문제