자바 스크립트 소스에 HTML을 넣거나 AJAX를 사용하여 HTML을 검색 하시겠습니까?

Question

내 응용 프로그램에는 페이스 북과 같은 메시지 상자가 있습니다. 나는 잘 작동하지만, 메시지 상자의 특정 부분을 구현하는 방식을 싫어합니다.

모든 메시지 상자에는 제목 표시 줄, 제목 표시 줄의 제목 및 상자를 닫기위한 선택적인 "X"단추가 있습니다. 각 상자에는 메시지를 만들 때마다 기본 본문 (메시지의 경우 <p> 요소)과 닫기 단추가 있지만 상자의 본문에 HTML을 넣을 수 있습니다. 여기서 내 불확실성이있는 곳입니다.

로그인 페이지에서 비밀번호를 잊어 버린 경우 '비밀번호 찾기'를 클릭하십시오. 텍스트 메시지 상자가 나타나고 상자의 본문은 사용자 지정 HTML (전자 메일 주소 및 제출 단추의 입력 필드)이며 상자를 만들 때 자바 스크립트 소스에서 HTML을 가져옵니다.

예 :

이 응용 프로그램의 말까지

.... 
.... 
var bodyHTML = 'Custom HTML for the body of this box'; 
var options = {'title': 'Password Recovery', 'bodyHTML': bodyHTML, 'hideBigCloseButton': true, 'removeOnClose': true}; 
createMessageBox('password-recovery-box', options, callback); 

나는 확실히 그것은 단지 HTML의 10 줄 수 있으며, 상자의 몸이 사용자 정의 HTML을 가지고 적어도 7 또는 8 메시지 상자와 함께 종료됩니다 또는 50 일 수도 있고 자바 스크립트 파일의 소스에 너무 많은 HTML이 흩어져 있다는 생각을 좋아하지 않습니다.

어쩌면 jQuery를 사용하여 응용 프로그램 (site.com/ajax/load-box-template/recover-password)의 컨트롤러에 GET 요청을 보내려고하면 HTML을 넣을 수있을 것이라고 생각했습니다. 사용자 지정 메시지 상자의 본문?

후자가 잔인합니까? 둘 다 작동하지만 어느 것이 더 좋은 방법입니까? 아니면 내가 언급 한 두 가지 방법보다 나은 방법이 있을까요?

도움을 주시면 감사하겠습니다.

Answer 1

당신은 메시지 상자에서 HTML과 외부 페이지를로드는 $ .load() 함수를 사용할 수 있습니다 당신이 JS에서 사용할 수있는 후에는 숨겨진 사업부의 HTML을 넣어 :

예 : HTML을 >

<div id="somediv" style="display: none"> 

JS>

$('#somediv').load('someExternalHTML.html', function() { 
    var options = {'title': 'Password Recovery', 'bodyHTML': $('#somediv').html(), 'hideBigCloseButton': true, 'removeOnClose': true}; 
createMessageBox('password-recovery-box', options, callback); 
}); 

희망이 도움이됩니다.

파블로.