Bootstrap이 원격 데이터를 한 번만 로드하는 문제 해결

요약: 프런트 엔드 프레임워크 부트스트랩의 모달 대화 상자의 경우 원격 옵션을 사용하여 URL을 지정할 수 있습니다. 그러면 대화 상자가 팝업될 때 이 주소의 데이터를 .modal-body로 자동으로 로드합니다. 처음에는 한 번만 로드되지만 이벤트에서 RemoveData() 메서드를 호출하면 이 문제를 해결할 수 있습니다.

1. 부트스트랩 모달 대화 상자 및 간단한 사용

 1 11044ab4e39092bf3655a081d6df70d6 2     0b561c7c414147a96bbbb8cc10c3d06d 3         6e52c62ccaa796a4ccb90a0458fc6482x65281c5ac262bf6d81768915a4a77ac0 4         684271ed9684bde649abda8831d4d355对话框标题39528cedfa926ea0c01e69ef5b2ea9b0 5     16b28748ea4df4d9c2150843fecfba68 6     6e1ceff927595656120650f97442eabc 7         e388a4556c0f65e1904146cc1a846bee对话框主体94b3e26ee717c64999d7867364b1b4a3 8     16b28748ea4df4d9c2150843fecfba68 9     fcea287e1681f6566fd9116658b8e4f010         3967e4ba8273165820a9b7674e47f6ae取消5db79b134e9f6b82c0b36e0489ee08ed11         68ea5ffc0ceb7fd5909bec72cbe1fb30确定5db79b134e9f6b82c0b36e0489ee08ed12     16b28748ea4df4d9c2150843fecfba6813 16b28748ea4df4d9c2150843fecfba68

표시 효과는 아래 그림과 유사합니다.

버튼이나 링크를 사용하여 모달 대화 상자를 직접 호출할 수 있습니다. 사용법:

d6301f9ab9f294fdeb81d11564d75ad2打开对话框65281c5ac262bf6d81768915a4a77ac04cbacbf3366c8120d74e550377e58870打开对话框65281c5ac262bf6d81768915a4a77ac0

 <br/>

대화 상자에 정적 콘텐츠만 표시할 수 있으며 대화 상자의 원격 옵션을 사용하면 더욱 강력한 효과를 얻을 수 있습니다.

2. 모달 대화 상자가 페이지를 .modal-body에 로드하도록 하려면 원격 옵션을 사용하세요.

두 가지 방법이 있습니다. 하나는 링크를 사용하는 것이고, 다른 하나는 스크립트를 사용하는 것입니다.

2.1 링크 사용

c06a237a3239f2443464e77605828245打开对话框5db79b134e9f6b82c0b36e0489ee08ed

이 링크를 클릭하면 page.jsp의 내용이 대화 상자의 .modal-body에 로드되어 대화 상자가 표시됩니다.

2.2 스크립트 사용

$("#myModal").modal({
    remote: "page.jsp"
});

이 스크립트의 효과는 링크를 사용하는 것과 같습니다. 이 스크립트가 실행되면 page.jsp의 내용이 대화 상자의 .modal-body에 로드됩니다. , 대화 상자 표시를 차례로 클릭합니다.

이 두 가지 방법 뒤에 Bootstrap은 jQuery의 load() 메서드를 호출하여 서버에서 page.jsp 페이지를 로드합니다. 하지만 이 로딩은 한 번만 발생합니다. 링크를 몇 번 클릭하든, 스크립트를 여러 번 실행하든, 원격 옵션에 전달된 값을 변경하든, 대화 상자는 페이지를 다시 로드하지 않습니다. 이는 정말 골치 아픈 일입니다. . 그러나 문제는 여전히 해결될 수 있습니다.

3. 대화 상자를 열 때마다 페이지를 다시 로드할 수 있도록 데이터를 제거합니다.

관련 문서를 검색하고 참조한 결과 대화 상자의 숨겨진 이벤트에 다음과 같은 설명을 작성하는 것으로 충분하다는 것을 알았습니다.

$("#myModal").on("hidden", function() {
    $(this).removeData("modal");
});

대화 상자를 열기 전에 매번 데이터를 제거할 수도 있지만 효과는 동일합니다.

참고: 위 코드는 Bootstrap v2를 기반으로 합니다. Bootstrap v3을 사용하는 경우 모달 대화 상자의 HTML과 이벤트 작성 방법이 다소 다릅니다. 예를 들어 위의 숨겨진 이벤트의 경우 작성:

$("#myModal").on("hidden.bs.modal", function() {
    $(this).removeData("bs.modal");
});

위 내용은 Bootstrap이 원격 데이터를 한 번만 로드하는 문제 해결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!