我在这里和互联网上搜索了几乎所有的东西,但是我无法使用这些代码。当用户点击php生成的链接加载另一个页面并且它有一个表单等时,我试图打开对话框。 点击某个链接,它会生成一个弹出窗口,关闭它然后点击其他一些或相同的链接,它将无法打开弹出窗口。
这就是我的html生成方式
echo '<div class=product_name><a href="edit_order.php?order_number='.$order_numbers.'&product_id='.$row['id'].'&quantity='.$row['quantity'].'&sale_price='.$row['sale_price'].'&id='.$row['order_product_id'].'" style="text-decoration: none" title="View Details"><h3>'.$row['productname'].'</h3></div>
<div class=quantity><h3>'.$row['quantity'].'</h3></div>
<div class=sale_price><h3>'.$row['sale_price'].'</h3></div></a>';
页面上的Jquery代码:
<script type="text/javascript" src="jquery/jquery-1.8.0.min.js"></script>
<script src="ui/jquery.ui.core.js"></script>
<script src="ui/jquery.ui.widget.js"></script>
<script src="ui/jquery.ui.mouse.js"></script>
<script src="ui/jquery.ui.draggable.js"></script>
<script src="ui/jquery.ui.position.js"></script>
<script src="ui/jquery.ui.resizable.js"></script>
<script src="ui/jquery.ui.dialog.js"></script>
<script>
$(function() {
$('.dialog').dialog({
modal: true,
height: 200,
autoOpen: false,
closeOnEscape: true,
hide: "slide",
open: function(event, ui) {
var url = $('.header a').attr('href');
alert(url);
$(".dialog").load(url); //use the previously saved id
},
close: function(event, ui) {
alert("ali");
$(this).dialog('destroy').remove();
}
});
$('.header a').bind("click", function(event) {
event.preventDefault();
$('.dialog').dialog('open');
});
});
</script>
来自Firefox的实际HTML Ctrl + u:
<script type="text/javascript" src="jquery/ko.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script>
//custom binding to initialize a jQuery UI button
ko.bindingHandlers.jqButton = {
init: function(element, valueAccessor) {
var options = ko.utils.unwrapObservable(valueAccessor()) || {};
//handle disposal
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$(element).button("destroy");
});
$(element).button(options);
}
};
ko.bindingHandlers.showModal = {
init: function(element, valueAccessor) {
var value = valueAccessor();
$(element).dialog({
close: function() {
if (ko.isWriteableObservable(value)) {
value(null);
}
}
});
//handle disposal
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$(element).dialog("destroy");
});
},
update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
var value = ko.utils.unwrapObservable(valueAccessor());
$(element).dialog(value ? "open" : "close");
}
};
//wrapper to an observable that requires accept/cancel
ko.protectedObservable = function(initialValue) {
//private variables
var _actualValue = ko.observable(initialValue);
var _tempValue = initialValue;
//dependentObservable that we will return
var result = ko.dependentObservable({
//always return the actual value
read: function() {
return _actualValue();
},
//stored in a temporary spot until commit
write: function(newValue) {
_tempValue = newValue;
}
});
//if different, commit temp value
result.commit = function() {
if (_tempValue !== _actualValue()) {
_actualValue(_tempValue);
}
};
//force subscribers to take original
result.reset = function() {
_actualValue.valueHasMutated();
_tempValue = _actualValue(); //reset temp value
};
return result;
};
function Item(id, name) {
this.id = id;
this.name = ko.protectedObservable(name);
}
function ViewModel() {
var self = this;
self.items = ko.observableArray([
new Item(1, "one"),
new Item(2, "two"),
new Item(3, "three")
]);
self.selectedItem = ko.observable();
self.accept = function() {
self.selectedItem().name.commit();
self.selectedItem(null);
};
self.cancel = function() {
self.selectedItem().name.reset();
self.selectedItem(null);
}
};
ko.applyBindings(new ViewModel());
$("#items").delegate(".item", "click", function() {
var context = ko.contextFor(this);
context.$root.selectedItem(context.$data);
return false;
});
$(function() {
$('.dialog').dialog({
modal: true,
height: 200,
autoOpen: false,
closeOnEscape: true,
hide: "slide",
open: function(event, ui) {
var url = $('.header a').attr('href');
alert(url);
$(".dialog").load(url); //use the previously saved id
}
});
//alert('');
$('.header a').bind("click", function(event) {
event.preventDefault();
$('.dialog').dialog('open');
//$('#dialog').load(url);
});
});
​</script>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<link href="style/base/jquery.ui.dialog.css" rel="stylesheet" type="text/css" />
<div id="style">
<div class="dialog"></div>
<div id=header1><div class=header><div class=order_number><h1>Order Number:</h1><h3>1000</h3></div><div class=h2><h2>Products</h2></div><br />
<div class=container><div class=product_name><h3>Products</h3></div>
<div class=quantity><h3>Quantity</h3></div>
<div class=sale_price><h3>Sale Price</h3></div><div class=product_name><a href="edit_order.php?order_number=1000&product_id=14&quantity=8619&sale_price=98769&id=66" style="text-decoration: none" title="View Details"><h3>Valium Diazepam</h3></a></div>
<div class=quantity><h3>8619</h3></div>
<div class=sale_price><h3>98769</h3></div><div class=product_name><a href="edit_order.php?order_number=1000&product_id=41&quantity=1264&sale_price=193248&id=77" style="text-decoration: none" title="View Details"><h3>hhhha</h3></a></div>
<div class=quantity><h3>1264</h3></div>
<div class=sale_price><h3>193248</h3></div><div class=product_name><a href="edit_order.php?order_number=1000&product_id=37&quantity=-1435&sale_price=1302&id=78" style="text-decoration: none" title="View Details"><h3>Tamezepaam</h3></a></div>
<div class=quantity><h3>-1435</h3></div>
<div class=sale_price><h3>1302</h3></div></div></div><div class=header><div class=order_number><h1>Order Number:</h1><h3>128</h3></div><div class=h2><h2>Products</h2></div><br />
<div class=container><div class=product_name><h3>Products</h3></div>
<div class=quantity><h3>Quantity</h3></div>
<div class=sale_price><h3>Sale Price</h3></div><div class=product_name><a href="edit_order.php?order_number=128&product_id=37&quantity=-1435&sale_price=1568&id=81" style="text-decoration: none" title="View Details"><h3>Tamezepaam</h3></a></div>
<div class=quantity><h3>-1435</h3></div>
<div class=sale_price><h3>1568</h3></div></div></div><div class=header><div class=order_number><h1>Order Number:</h1><h3>200</h3></div><div class=h2><h2>Products</h2></div><br />
<div class=container><div class=product_name><h3>Products</h3></div>
<div class=quantity><h3>Quantity</h3></div>
<div class=sale_price><h3>Sale Price</h3></div><div class=product_name><a href="edit_order.php?order_number=200&product_id=37&quantity=-1435&sale_price=14400&id=70" style="text-decoration: none" title="View Details"><h3>Tamezepaam</h3></a></div>
<div class=quantity><h3>-1435</h3></div>
<div class=sale_price><h3>14400</h3></div></div></div><div class=header><div class=order_number><h1>Order Number:</h1><h3>300</h3></div><div class=h2><h2>Products</h2></div><br />
<div class=container><div class=product_name><h3>Products</h3></div>
<div class=quantity><h3>Quantity</h3></div>
<div class=sale_price><h3>Sale Price</h3></div><div class=product_name><a href="edit_order.php?order_number=300&product_id=37&quantity=-1435&sale_price=1344&id=73" style="text-decoration: none" title="View Details"><h3>Tamezepaam</h3></a></div>
<div class=quantity><h3>-1435</h3></div>
<div class=sale_price><h3>1344</h3></div><div class=product_name><a href="edit_order.php?order_number=300&product_id=14&quantity=8619&sale_price=1344&id=80" style="text-decoration: none" title="View Details"><h3>Valium Diazepam</h3></a></div>
<div class=quantity><h3>8619</h3></div>
<div class=sale_price><h3>1344</h3></div></div></div></div>
</div>
答案 0 :(得分:0)
问题是使用dialog
参数在close回调中调用destroy
方法。你有:
close: function(event, ui) {
alert("ali");
$(this).dialog('destroy');
}
你打电话给$(this).dialog('destroy');
,这就是为什么它只能工作一次。
这是适用于我的代码,请尝试将其替换为您的代码:
<script>
$(function() {
$('.dialog').dialog({
modal: true,
height: 200,
autoOpen: false,
closeOnEscape: true,
hide: "slide",
open: function(event, ui) {
var url = $('.header a').attr('href');
//alert(url);
$(".dialog").load(url); //use the previously saved id
}
});
$('.header a').bind("click", function(event) {
event.preventDefault();
$('.dialog').dialog('open');
//$('#dialog').load(url);
});
});
</script>
这是FIDDLE