트위터 부트 스트랩 모달에 외부 데이터 (다중 필드)로드하기

이것은 첫 번째 부트 스트랩/jQuery 애플리케이션입니다.트위터 부트 스트랩 모달에 외부 데이터 (다중 필드)로드하기

개인용으로 여러 개의 주소를 표시하는 앱이 있으며 각 주소는 수정 버튼을 사용하여 수정할 수 있습니다.

나는 "편집"을 클릭 한 다음 데이터베이스에서 해당 특정 데이터를로드하고 트위터 모달 창에 배치하는 스크립트를 호출하는 방법을 알아낼 수 없습니다.

편집 버튼 코드는 다음과 같습니다

a class="btn btn-small open-EditAddress" data-toggle="modal" data-id="#custom.addr_id#"   href="##edit_address_modal"><i class="icon-pencil"></i> Edit</a>

각각의 편집 버튼을 누른 다음 편집을 위해 채워진 데이터 트위터 모달 창을 실행할 것 Addr_id을 전달합니다.

모달 편집 실행 중이지만 업데이트를 위해 외부 데이터를 모달에로드하기 위해 다음에 수행해야 할 작업이 확실하지 않습니다.

사람이 외부 데이터를 호출하고 모달에로드하기 위해 jQuery를 지원할 수 ?

출처

2012-12-04 Tony K

맞춤 주소 입력란 및 시작일/종료일에 대한 HTML과 모달 양식에 대한 HTML을 함께 제공하십시오. – mccannf

클릭 할 때 모달을 보여주는 트리거되지 않습니다 있도록 Edit 링크는 다음과 같이 할 수

갱신 : 당신은 로딩 후 JQuery와 통해이 별도로 트리거되기 때문에 그렇게하지 않으

<a class="btn btn-small open-EditAddress" data-id="#custom.addr_id#" href="/ControllerName/ActionNameToGetAddressInfo/[locationId]" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#ModalEditAddress"><i class="icon-pencil"></i> Edit</a>

귀하의 양식. 이러한 추가 데이터 속성도 모두 확인하십시오. ajax 호출을 사용하여 모달 div에 필요한 정보를 채 웁니다. 페이지

어딘가에 당신은 당신의 모달 요소가 있어야합니다

여기

public ActionResult ActionNameToGetAddressInfo(int id) // locationId 
{ 
    var model = [get all the address information from DB or however you get it]; 
    return View("~/Views/[ControllerName]/_EditAddress.cshtml", model); 
}

이다 : 그것은 다음과 같은 조치에 Ajax 호출로 채워집니다 때문에

<div id="ModalEditAddress" class="modal hide fade"> 
</div>

이 비어 있습니다 귀하의 부분보기 _EditAddress.cshtml :

@using(Ajax.BeginForm("[ActionNameToSaveAddress]","[ControllerName]", new AjaxOptions{...})) 
    { 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
      <h3>Edit Address</h3> 
     </div> 
     <div class="modal-body"> 
      [all the form related inputs] 
     </div> 
     <div class="modal-footer"> 
      <input type="submit" value="Save Address" /> 
     </div> 
    } 
    <script type="text/javascript"> 
     $('#ModalEditAddress').modal('show'); 
    </script>

편집 링크를 클릭하면 Ajax 호출이 트리거됩니다. ActionNameToGetAddressInfo 작업은 div에 id="ModalEditAddress"으로 결과를 넣습니다. 이런 일이 발생하면 부분 뷰의 맨 끝에서 스크립트를 실행하고 모달을 표시합니다.

주소를 저장하기 위해 다른 작업을 작성하고 저장 될 때 모달을 숨길 수있는 JQuery를 작성해야합니다.

이것은 모두 의사 코드이므로 일부 조정 작업을 수행해야 작동 할 수 있습니다.

출처

2012-12-13 21:59:48 Dmitry

트위터 부트 스트랩 모달에 외부 데이터 (다중 필드)로드하기

답변

관련 문제