부트 스트랩 모달에 데이터 전달

Question

트위터 부트 스트랩을 사용하여 간단한 모달을 만들려고합니다. 그 모달의 기능은 클릭 된 링크의 이름을 가져 와서 그 이름을 헤더로 사용하는 것입니다. 각 이름은 장고 데이터베이스에 있습니다. Passing data to a bootstrap modal

#Button to toggle modal 
<a data-toggle="modal" data-id="{{ name }}" title="Add this item" class="open- AddBookDialog " href="#addBookDialog">{{ name }}</a><br /> 

#Modal 
<div class="modal hide fade" id="addBookDialog"> 
    <div class="modal-header"> 
     <button class="close" data-dismiss="modal">×</button> 

    </div> 
    <div class="modal-body"> 
     <input type="text" name="nameId" id="nameId" /> 
     <p>some content</p> 

    </div> 
</div> 

#JavaScript 
<script type="text/javascript"> 
$(document).on("click", ".open-AddBookDialog", function() { 
    var myNameId = $(this).data('id'); 
    $("modal-body #nameId").val(myNameId); 

    }); 
</script> 

무엇 위가하는 것은 표시 상자에 문자 이름 텍스트 상자입니다 : 내가 참조를 위해이 링크를 따라 갔다. 내가 원하는 것은 텍스트 상자가 아닌 머리글로 이름을 지정하는 것입니다. 텍스트 상자를 제거하고 동일한 ID와 이름의 머리글 태그를 배치하면 아무 것도 표시되지 않습니다. 이 작업을 완료하는 방법이 있습니까?

Answer 1

헤더가 모달의 첫 번째 h3입니다. 그래서 ".modal-header"아래에 id가있는 h3 요소를 추가하고 해당 요소의 .html()을 설정해야합니다. :) 참조 여기

봐 :

#Modal 
<div class="modal hide fade" id="addBookDialog"> 
    <div class="modal-header"> 
     <button class="close" data-dismiss="modal">×</button> 
     <h3 class="hdrtitle">This is the header</h3> 
    </div> 
    <div class="modal-body"> 
     <input type="text" name="nameId" id="nameId" /> 
     <p>some content</p> 

    </div> 
</div> 

같은 코드를 사용 :

$('.modal').modal('toggle'); 

: 다음

$('.modal .hdrtitle').html('This is the header'); 

과 함께 보여주는 여기 http://twitter.github.io/bootstrap/javascript.html#modals

코드입니다

작품.

Answer 2

이 혹시 귀하의 사이트/앱에서 UI 결합 동작을 할 이런 일을 수행하는 데 필요한 유일한 시간 인 경우 일회성 방법

:

$('.header-link').click(function(e) { 
    $('.modal-header h4').html($(e.target).html()) 
}) 

가

CodePen Demo

이것은 링크 자체의 텍스트 (실제로는 HTML)를 가져 와서 헤더에 넣습니다. 앱의 많은 부분에서 멋진 트릭 이러한 종류의 작업을 수행하려는 경우 라이브러리

를 사용

는

, 각도 JS 또는 넉 아웃 같은 UI 결합 라이브러리를 사용하는 것이 좋습니다. 이렇게하면 이벤트가있는 UI 부분에 data-bind 부분을 추가 할 수 있습니다.

Answer 3

답변을 찾았습니다. 레이아웃을 위해 @PaoloCasciello에게 감사드립니다.

자바 스크립트에서 .on 함수 대신에 실제로는 .html이어야합니다. 최종 코드는 다음과 같습니다.

<!-- Modal --> 
<div class="modal hide fade" id="addBookDialog"> 
    <div class="modal-header"> 
     <button class="close" data-dismiss="modal">×</button> 
     <h3 id="nameId" /> 

     </div> 
     <div class="modal-body"> 
     <p>some content</p> 
     </div> 
</div> 


<script type="text/javascript"> 
$(document).on("click", ".open-AddBookDialog", function() { 
var myNameId = $(this).data('id'); 
var myNameDescription = $(this).data('description'); 
$(".modal-header #nameId").html(myNameId);