Fatal编程技术网
  • javascript/
  • Javascript Jquery UI对话框多对话框创建问题

Javascript Jquery UI对话框多对话框创建问题

javascript jquery jquery-ui

Javascript Jquery UI对话框多对话框创建问题,javascript,jquery,jquery-ui,jquery-ui-dialog,Javascript,Jquery,Jquery Ui,Jquery Ui Dialog,我已经在这里和互联网上搜索了几乎所有的东西，但是我无法让这些代码正常工作。我试图让对话框打开时，用户点击php生成的链接加载另一个页面，它有一个表单等。 单击某个链接，它将生成一个弹出窗口，关闭它，然后单击其他或相同的链接，它将不会打开弹出窗口 这就是我的html是如何生成的 echo '<div class=product_name><a href="edit_order.php?order_number='.$order_numbers.'&product_id='

我已经在这里和互联网上搜索了几乎所有的东西，但是我无法让这些代码正常工作。我试图让对话框打开时，用户点击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>';

echo'；
第页的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>


$（函数（）{
$（'.dialog'）.dialog({
莫代尔：是的，
身高：200，
自动打开：错误，
closeOnEscape：没错，
隐藏：“幻灯片”，
打开：功能（事件、用户界面）{
var url=$（'.header a'）.attr（'href'）；
警报（url）；
$（“.dialog”）.load（url）；//使用以前保存的id
},
关闭：功能（事件、用户界面）{
警报（“阿里”）；
$（this.dialog（'destroy'）.remove（）；
}
});
$（'.header a'）.bind（“单击”），函数（事件）{
event.preventDefault（）；
$（'.dialog'）。dialog（'open'）；
});
});
Firefox Ctrl+u中的实际HTML：

<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>


//用于初始化jQuery UI按钮的自定义绑定
ko.bindingHandlers.jqButton={
init：函数（元素、值访问器）{
var options=ko.utils.unwrapobbservable（valueAccessor（））|{}；
//处理处置
ko.utils.domNodeDisposal.addDisposeCallback（元素，函数（）{
$（元素）。按钮（“销毁”）；
}); 
$（元素）.按钮（选项）；
}    
};
ko.bindingHandlers.showmodel={
init：函数（元素、值访问器）{
var value=valueAccessor（）；
$（元素）。对话框({
关闭：函数（）{
if（ko.isWriteableObservable（值））{
值（空）；
}
}
}); 
//处理处置
ko.utils.domNodeDisposal.addDisposeCallback（元素，函数（）{
$（元素）。对话框（“销毁”）；
}); 
},
更新：函数（元素、valueAccessor、allBindingsAccessor、viewModel）{
var value=ko.utils.unwrapobbservable（valueAccessor（））；
$（元素）。对话框（值？“打开”：“关闭”）；
}
};
//包装到需要接受/取消的可观察对象
ko.protectedObservable=函数（初始值）{
//私有变量
var _实际值=可观察的ko（初始值）；
var _tempValue=初始值；
//我们会回来的
var结果=ko.DependentToServable({
//始终返回实际值
读：函数（）{
返回实际值（）；
},
//保存在临时位置，直到提交
写入：函数（newValue）{
_tempValue=newValue；
}
}); 
//如果不同，请提交临时值
result.commit=函数（）{
如果（_tempValue！=_actualValue（））{
_实际值（_tempValue）；
}  
};
//强制订阅者接受原件
result.reset=函数（）{
_actualValue.valueHasMutated（）；
_tempValue=_actualValue（）；//重置临时值
};
返回结果；
};
功能项（id、名称）{
this.id=id；
this.name=ko.protectedObservable（name）；
}
函数ViewModel（）{
var self=这个；
self.items=ko.array([
新项目（1，“一”），
新项目（2，“两”），
新项目（3，“三”）
]);
self.selectedItem=ko.observable（）；
self.accept=函数（）{
self.selectedItem（）.name.commit（）；
self.selectedItem（空）；
};
self.cancel=函数（）{
self.selectedItem（）.name.reset（）；
self.selectedItem（空）；
}
};
应用绑定（新的ViewModel（））；
$（“#项”）.delegate（“.item”，“click”，function（）{
var context=ko.contextFor（此）；
context.$root.selectedItem（context.$data）；
返回false；
});
$（函数（）{
$（'.dialog'）.dialog({
莫代尔：是的，
身高：200，
自动打开：错误，
closeOnEscape：没错，
隐藏：“幻灯片”，
打开：功能（事件、用户界面）{
var url=$（'.header a'）.attr（'href'）；
警报（url）；
$（“.dialog”）.load（url）；//使用以前保存的id
}
});
//警报（“”）；
$（'.header a'）.bind（“单击”），函数（事件）{
event.preventDefault（）；
$（'.dialog'）。dialog（'open'）；
//$（'#dialog'）。加载（url）；
});
});    
​
订单号：1000件产品

产品
量
销售价格
8619
98769
1264
193248
-1435
1302订单号：128个产品

产品
量
销售价格
-1435
1568订单号：200件产品

产品
量
销售价格
-1435
14400订单号：300件产品

产品
量
销售价格
-1435
1344
8619
1344
问题是在带有
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>




$（函数（）{
$（'.dialog'）.dialog({
莫代尔：是的，
身高：200，
自动打开：错误，
closeOnEscape：没错，
隐藏：“幻灯片”，
打开：功能（事件、用户界面）{
var url=$（'.header a'）.attr（'href'）；
//警报（url）；
$（“.dialog”）.load（url）；//使用以前保存的id
}
});
$（'.header a'）.bind（“单击”），函数（事件）{
event.preventDefault（）；
$（'.dialog'）。dialog（'open'）；
//$（'#对话框