>  기사  >  웹 프론트엔드  >  jQuery UI의 Dialog가 submit_jquery되지 않는 문제에 대한 해결 방법

jQuery UI의 Dialog가 submit_jquery되지 않는 문제에 대한 해결 방법

WBOY
WBOY원래의
2016-05-16 18:12:21915검색

구체적인 표현은 다음과 같습니다.
1. 제출 버튼이 유효하지 않으며 클릭 후 응답이 없습니다.
2. 다른 수단을 사용하여 페이지를 제출하더라도 서버는 대화 상자에서 양식 데이터를 얻을 수 없습니다.

이유: JQuery는 양식 대신 Body에 Dialog 요소를 추가합니다. 페이지 소스 코드를 연구한 결과 jQuery UI Dialog 컨트롤이 초기화될 때 동적으로 생성된 HTML 요소가 페이지 끝과 양식 요소 뒤에 추가되고 원본 Dialog 템플릿 부분(양식 요소가 포함됨)이 추가되었음을 발견했습니다. 또한 HTML 요소 내에서 동적으로 생성된 으로 이동되었습니다. 즉, Dialog가 초기화된 후 원래 양식에 있던 양식이 양식 외부로 이동되어 Dialog 템플릿의 모든 양식이 유효하지 않게 된 것입니다.

방법 1:
jQuery UI의 Dialog 디자인이 기능인지 버그인지 모르겠습니다. 위의 분석을 바탕으로 Dialog에서 정상적인 페이지 제출을 달성하기 위해 간단한 해결책을 찾았습니다. 즉, Dialog 컨트롤에 의해 동적으로 생성된 HTML 요소를 jQuery UI 컨트롤의 "open" 이벤트 핸들러에 있는 양식 요소로 이동하는 것입니다. 코드는 다음과 같습니다.
사용 코드: $("#dialog").parent().appendTo("/html/body/form[0]")
또는
$("#dlg" ).dialog({
open: function () {
$("body > div[role=dialog]").appendTo("form#aspnetForm");
}
});
코드의 "aspnetForm"은 ASP.NET 응용 프로그램에서 자동으로 생성된 현재 페이지의 양식 요소 ID로 사용 시 자신의 페이지의 양식 ID로 변경할 수 있습니다.

두 번째 방법:

과 같은 DIV를 추가한 다음 이 DIV에 대화 상자를 작성합니다.
$("#dialog").parent().appendTo("#dialog_target");

세 번째 방법:
1. Dialog의 JS 코드를 수정합니다. form , 본문 내부 대신
2. Dialog 내부의 사용자 정의 HTML을 사용하지 않고 IFRAME을 직접 추가하고 내부 HTML을 다른 페이지로 이동한 다음 상위 페이지와 상호 작용해도 괜찮습니다( 제가 사용하는 방법은 이러한 독립적인 코드를 재사용할 수 있는 방법입니다

두 번째 방법은 서버 이벤트에 응답할 수 있고 효과도 좋기 때문에 우선순위를 부여할 수 있습니다.
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.