Các tab AJAX hoạt động hoàn hảo. Nó khá đơn giản với phần đó. Tuy nhiên, việc nhận được cửa sổ giao diện người dùng AJAX UI Dialog để kích hoạt một liên kết đã không thành công.Cửa sổ Hộp thoại giao diện người dùng jQuery được tải trong phong cách AJAX Các tab giao diện người dùng jQuery
Bất kỳ trợ giúp nào trong điều này sẽ được đánh giá cao.
<a href="javascript:void(0)" onclick="$('#myDialog').dialog();">
Open as dialog
</a>
<div id="myDialog">
I have a dialog!
</div>
Không có gì dễ dàng hơn người đàn ông đó. Hãy thử cách này:
<?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>
Lưu ý rằng bạn không thể tải từ xa từ địa phương, vì vậy bạn phải tải tệp này lên máy chủ hoặc bất kỳ thứ gì. Cũng lưu ý rằng bạn không thể tải từ các tên miền nước ngoài, vì vậy bạn nên thay thế href của liên kết đến một tài liệu được lưu trữ trên cùng một tên miền (và here's the workaround).
Cheers
// đúng định dạng
<script type="text/Javascript">
$(function()
{
$('<div>').dialog({
modal: true,
open: function()
{
$(this).load('mypage.html');
},
height: 400,
width: 600,
title: 'Ajax Page'
});
});
Đây chắc chắn là câu trả lời tốt nhất và sạch nhất. – Zaptree
một vài điều còn thiếu; bạn nên "trả về false" và jQuery khuyên bạn nên đóng một cách rõ ràng các thẻ $ ("
") –Để tránh bổ sung thêm div s khi nhấp vào liên kết nhiều lần, và tránh các vấn đề khi sử dụng kịch bản để hiển thị các hình thức, bạn có thể thử một biến thể của mã @ 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;
});`
Điểm tốt thực sự .. bạn có phiền không nếu tôi bao gồm tinh chỉnh này trong câu trả lời ban đầu của mình? – jek
@jek không sao cả! – CGK
Trang sau diggs độc đáo vào các vấn đề như vậy và sử dụng hàm one() của jQuery để thực hiện cùng chức năng: http://blog.nemikor.com/category/jquery-ui/jquery-ui-dialog/ Vì nó sử dụng hộp thoại (' mở ') nó không cần điều trị đặc biệt(). –
tò mò - tại sao câu trả lời 'không có gì dễ hơn' này (ở trên) không hoạt động? có vẻ hợp lý? http://206.251.38.181/jquery-learn/ajax/iframe.html
Cả hai câu trả lời đầu tiên đều không hoạt động với nhiều phần tử có thể mở hộp thoại trỏ đến các trang khác nhau.
này cảm giác giống như các giải pháp sạch, chỉ tạo ra các đối tượng thoại một lần vào tải và sau đó sử dụng các sự kiện để mở/đóng/hiển thị một cách thích hợp:
$(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;
});
});
Bạn thực sự có thể ngăn chặn hành động mặc định trong hàm bằng cách sử dụng: '$ ('..'). Live ('click', function (event) {event.preventDefault(); ...});' Bằng cách này bạn có thể bỏ qua 'return false;' và ngăn chặn sự kích hoạt ngẫu nhiên của sự kiện 'click' mặc định. – plaes
Như đã nêu trong phản hồi câu trả lời của CGK, bạn cũng có thể quan tâm đến giải pháp này: http://blog.nemikor.com/2009/08/07/creating-dialogs-on-demand/#comments đặc biệt cho nhiều phần tử hộp thoại –
Chỉ cần một sự bổ sung cho câu trả lời nicktea của. Mã này tải nội dung của một trang từ xa (mà không cần chuyển hướng ở đó), và cũng dọn dẹp khi đóng nó.
<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>
Thực ra, tôi không chắc đây là thứ bạn đang tìm kiếm, tôi sẽ quay lại và cập nhật trừ khi có ai đó nhặt nó lên. Bạn có thể làm rõ điều gì đang gây ra sự cố không? – cgp