javascript - Jquery UI ダイアログの複数のダイアログ作成の問題

Question

こことインターネットでほぼすべてのものを検索しましたが、このコードを機能させることができません。ユーザーが別のページをロードする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);
    });
});    
â€‹&lt;/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>

score 0 · Accepted Answer

問題は、引数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>

ここにフィドルがあります

javascript - Jquery UI ダイアログの複数のダイアログ作成の問題

1 に答える 1

Related

Reference