javascript - 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='.$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 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>

最佳答案

问题是在带有 destroy 参数的关闭回调中调用 dialog 方法。你有:

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

关于javascript - Jquery UI Dialog 多对话框创建问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12116000/

上一篇：javascript - 将 KML 从 XML 字符串添加到矢量图层

下一篇：javascript - 想要点击按钮

相关文章：

php - 无法通过 $.ajax 函数发送 $_POST

jquery - 嵌套 jQuery 可排序问题

jquery - IE 中的 BlockUI jquery-ui 主题支持

javascript - Jquery UI Draggable 克隆消失

javascript - Algolia Instantsearch for rails 没有结果

javascript - ParcelJS 只重建一次

javascript - 如何将屏幕坐标转换为场景坐标

javascript - jQuery.off 不使用变量函数名称

javascript - 我认为我的 jquery 函数不正确

javascript - 按类属性排序对象的树结构

©2024 IT工具网  联系我们