AJAX 스타일 jQuery UI 탭에로드 된 jQuery UI 대화 상자 창
AJAX 탭은 완벽하게 작동합니다. 그 부분은 매우 간단합니다. 그러나 AJAX UI 대화 상자 모달 창을 링크에서 트리거하는 데 실패했습니다.
이것에 대한 도움을 주시면 감사하겠습니다.
그 남자보다 쉬운 것은 없습니다. 이걸로 해봐:
<?xml version="1.0" encoding="iso-8859-1"?>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<style>
.loading { background: url(/img/spinner.gif) center no-repeat !important}
</style>
</head>
<body>
<a class="ajax" href="http://www.google.com">
Open as dialog
</a>
<script type="text/javascript">
$(function (){
$('a.ajax').click(function() {
var url = this.href;
// show a spinner or something via css
var dialog = $('<div style="display:none" class="loading"></div>').appendTo('body');
// open the dialog
dialog.dialog({
// add a close listener to prevent adding multiple divs to the document
close: function(event, ui) {
// remove div with all data and events
dialog.remove();
},
modal: true
});
// load remote content
dialog.load(
url,
{}, // omit this param object to issue a GET request instead a POST request, otherwise you may provide post parameters within the object
function (responseText, textStatus, XMLHttpRequest) {
// remove the loading class
dialog.removeClass('loading');
}
);
//prevent the browser to follow the link
return false;
});
});
</script>
</body>
</html>
로컬에서 원격으로로드 할 수 없으므로이를 서버 등에 업로드해야합니다. 또한 외부 도메인에서로드 할 수 없으므로 동일한 도메인에서 호스팅되는 문서에 대한 링크의 href를 대체해야합니다 ( 해결 방법은 다음 과 같습니다 ).
건배
div링크를 여러 번 클릭 할 때 추가 s를 추가 하지 않고 스크립트를 사용하여 양식을 표시 할 때 문제를 방지하려면 @jek 코드의 변형을 시도 할 수 있습니다.
$('a.ajax').live('click', function() {
var url = this.href;
var dialog = $("#dialog");
if ($("#dialog").length == 0) {
dialog = $('<div id="dialog" style="display:hidden"></div>').appendTo('body');
}
// load remote content
dialog.load(
url,
{},
function(responseText, textStatus, XMLHttpRequest) {
dialog.dialog();
}
);
//prevent the browser to follow the link
return false;
});`
// 올바른 형식
<script type="text/Javascript">
$(function ()
{
$('<div>').dialog({
modal: true,
open: function ()
{
$(this).load('mypage.html');
},
height: 400,
width: 600,
title: 'Ajax Page'
});
});
Just an addition to nicktea's answer. This code loads the content of a remote page (without redirecting there), and also cleans up when closing it.
<script type="text/javascript">
function showDialog() {
$('<div>').dialog({
modal: true,
open: function () {
$(this).load('AccessRightsConfig.htm');
},
close: function(event, ui) {
$(this).remove();
},
height: 400,
width: 600,
title: 'Ajax Page'
});
return false;
}
</script>
Neither of the first two answers worked for me with multiple elements that can open dialogs that point to different pages.
This feels like the cleanest solution, only creates the dialog object once on load and then uses the events to open/close/display appropriately:
$(function () {
var ajaxDialog = $('<div id="ajax-dialog" style="display:hidden"></div>').appendTo('body');
ajaxDialog.dialog({autoOpen: false});
$('a.ajax-dialog-opener').live('click', function() {
// load remote content
ajaxDialog.load(this.href);
ajaxDialog.dialog("open");
//prevent the browser from following the link
return false;
});
});
curious - why doesn't the 'nothing easier than this' answer (above) not work? it looks logical? http://206.251.38.181/jquery-learn/ajax/iframe.html
<a href="javascript:void(0)" onclick="$('#myDialog').dialog();">
Open as dialog
</a>
<div id="myDialog">
I have a dialog!
</div>
'code' 카테고리의 다른 글
| Postgresql에서 캐리지 리턴과 새 줄을 제거하는 방법은 무엇입니까? (0) | 2020.12.06 |
|---|---|
| Mac의 $ PATH에서 항목을 제거하는 방법 (0) | 2020.12.06 |
| jQuery로 컬렉션에서 클릭 한 요소의 인덱스 가져 오기 (0) | 2020.12.06 |
| zlib 헤더는 어떻게 생겼습니까? (0) | 2020.12.06 |
| C 면접-캐스팅 및 비교 (0) | 2020.12.06 |