반응형
jQuery: Ajax를 통해 모달 대화 상자 내용 로드
현재 내 모달 대화상자는 이렇다.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/humanity/jquery-ui.css" type="text/css" />
</head>
<body>
<div id="dialog" title="Title Box">
<p>Stuff here</p>
</div>
<script type="text/javascript">
jQuery(
function() {
jQuery("#dialog")
.dialog(
{
bgiframe: true,
autoOpen: false,
height: 100,
modal: true
}
);
jQuery('body')
.bind(
'click',
function(e){
if(
jQuery('#dialog').dialog('isOpen')
&& !jQuery(e.target).is('.ui-dialog, a')
&& !jQuery(e.target).closest('.ui-dialog').length
){
jQuery('#dialog').dialog('close');
}
}
);
}
);
</script>
<a href="#" onclick="jQuery('#dialog').dialog('open'); return false">Click to view</a>
</body>
</html>
로드된 Div가 같은 페이지에 포함되어 있습니다.대화상자가 나타나면 어떻게 그 div를 두 번째 페이지로 이동하고 Ajax를 통해 내용을 로드합니까?그리고 필요에 따라 스크립트를 재사용하여 다른 콘텐츠를 로드할 수 있습니까?
Nemikor의 블로그 투고를 확인해 주세요.이 투고는, 당신이 원하는 것을 할 수 있습니다.
http://blog.nemikor.com/2009/04/18/loading-a-page-into-a-dialog/
기본적으로 '열림'을 호출하기 전에 먼저 다른 페이지의 내용을 '로드'합니다.
jQuery('#dialog').load('path to my page').dialog('open');
이걸 써보세요.
$(document).ready(function(){
$.ajax({
url: "yourPageWhereToLoadData.php",
success: function(data){
$("#dialog").html(data);
}
});
$("#dialog").dialog(
{
bgiframe: true,
autoOpen: false,
height: 100,
modal: true
}
);
});
$(function () {
$('<div>').dialog({
modal: true,
open: function ()
{
$(this).load('Sample.htm');
},
height: 400,
width: 400,
title: 'Dynamically Loaded Page'
});
});
http://www.devcurry.com/2010/06/load-page-dynamically-inside-jquery-ui.html
var dialogName = '#dialog_XYZ';
$.ajax({
url: "/ajax_pages/my_page.ext",
data: {....},
success: function(data) {
$(dialogName ).remove();
$('BODY').append(data);
$(dialogName )
.dialog(options.dialogOptions);
}
});
Ajax-Request가 대화상자를 로드하고 현재 페이지의 본문에 추가한 후 대화상자를 엽니다.
콘텐츠만 로드하려는 경우 다음을 수행할 수 있습니다.
var dialogName = '#dialog_XYZ';
$.ajax({
url: "/ajax_pages/my_page.ext",
data: {....},
success: function(data) {
$(dialogName).append(data);
$(dialogName )
.dialog(options.dialogOptions);
}
});
<button class="btn" onClick="openDialog('New Type','Sample.html')">Middle</button>
<script type="text/javascript">
function openDialog(title,url) {
$('.opened-dialogs').dialog("close");
$('<div class="opened-dialogs">').html('loading...').dialog({
position: ['center',20],
open: function () {
$(this).load(url);
},
close: function(event, ui) {
$(this).remove();
},
title: title,
minWidth: 600
});
return false;
}
</script>
이 코드가 당신에게 어떤 아이디어를 줄지도 모릅니다.
http://blog.nemikor.com/2009/04/18/loading-a-page-into-a-dialog/
$(document).ready(function() {
$('#page-help').each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href'))
.dialog({
autoOpen: false,
title: $link.attr('title'),
width: 500,
height: 300
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
});
});
언급URL : https://stackoverflow.com/questions/3837166/jquery-load-modal-dialog-contents-via-ajax
반응형
'programing' 카테고리의 다른 글
| 잔가지/시간 표시자 테마에서 사용자 정의 자리 표시자 이미지 설정 (0) | 2023.03.18 |
|---|---|
| 네이티브 텍스트가 내 화면에서 지워지고 포장을 거부합니다.무엇을 해야 하나? (0) | 2023.03.18 |
| 많은 클래스가 없는 GSON 구문 분석 (0) | 2023.03.18 |
| readyState vs status==200 (0) | 2023.03.13 |
| JSON에서 커스텀 Json Converter를 구현하는 방법.인터넷? (0) | 2023.03.13 |