30

PHPを使用してレコードを削除しています。JQuery UI ダイアログを使用してアクションを確認したいのですが、変数 (自分の RecordID) をリダイレクト URL 関数に渡す方法や、URL に へのアクセスを許可する方法がわかりませんwindow.location.href。

$("#confirm" ).dialog({
resizable: false,
autoOpen: false,
modal: true,
buttons: {
    'OK': function() {
            window.location.href = 'url and myvar??';
        $( this ).dialog( "close" );
        },
    'Cancel': function() {
        $( this ).dialog( "close" );
        }
    }
});


$("#delete").click(function() {
    $("#confirm").dialog( "open" ).html ( "Are U Sure?" );
    return false;
});

HTML

<a href='index.php?recordid=$row[recordid]' id='delete'>DELETE</a>

これを行う良い方法はありますか？

4

4 に答える 4

85

.data() メソッドを使用してデータを保存してみることができます。この回答を見てください jQuery UIダイアログにデータを渡す

たとえば、変数を渡すには、ダイアログを開く前に data 関数を使用して変数を保存できます。

$("#dialog_div")
.data('param_1', 'whateverdata')
.dialog("open");

次に、次の方法でこれを取り戻すことができます。

var my_data = $("#dialog_div").data('param_1')
于 2013-02-15T16:50:51.590 に答える
7

クリック時にダイアログの構成を変更したい (この場合は、[OK] ボタンの動作)。そのためには、多くのソリューションがありますが、それらはすべて醜いです（imo）。ダイアログをその場で生成し、使用したら破棄することをお勧めします。次のようになります。

$("#delete").click(function(ev) {
    ev.preventDefault(); // preventDefault should suffice, no return false
    var href = $(this).attr("href");
    var dialog = $("<div>Are you sure?</div>");

    $(dialog).dialog({
        resizable: false,
        autoOpen: true,
        modal: true,
        buttons: {
            'OK': function() {
                window.location = href;
                $( this ).dialog( "close" );
            },
            'Cancel': function() {
                $( this ).dialog( "close" );
            }
        },
        close: {
            $( this ).remove();
        }
    });
});

または、確認ダイアログを関数にカプセル化して、次のように再利用できるようにすることをお勧めします。

function confirmDialog(msg) {
    var dialog = $("<div>"+msg+"</div>");
    var def = $.Deferred();

    $(dialog).dialog({
        resizable: false,
        autoOpen: true,
        modal: true,
        buttons: {
            'OK': function() {
                def.resolve();
                $( this ).dialog( "close" );
            },
            'Cancel': function() {
                def.reject();
                $( this ).dialog( "close" );
            }
        },
        close: {
            $( this ).remove();
        }
    });
    return def.promise();
}

そして、それを次のように使用します

confirmDialog("are your sure?").done(function() {
    window.location = $(this).attr("href"); 
}).fail(function() {
    // cry a little
});

ダイアログを閉じる前に、延期されたオブジェクトが拒否または解決されているかどうかを確認して、閉じるときに拒否を確認する必要がある場合があります ([キャンセル] ボタンを押すだけではありません)。これは、 def.state() === "pending" 条件で実行できます。

jquery deferred の詳細については、http://api.jquery.com/category/deferred-object/ を参照してください。

于 2013-02-15T16:45:09.100 に答える
0

削除アクションはおそらく GET を使用して行うべきではありませんが、そのようにしたい場合は、jQuery で $.data を使用して、各リンクに data-record-id 属性を持たせることをお勧めします。次に、リンクのいずれかをクリックすると、ダイアログがポップアップし、確認されると、それが URL に追加され、リダイレクトされます。 例：

$(function(){
    $(".deleteLink").click(function(){
       var id = $(this).data("record-id");
       var myHref = $(this).attr('href');
        $("#confirmDialog").dialog({
            buttons:{
            "Yes": function()
                {
                    window.location.href = myHref + id;
                }
            }
        });
    });

});

<a class="deleteLink" data-record-id="1">Delete</a>
...
<div id="confirmDialog">
   <p>Are you sure?</p>
</div>
于 2013-02-15T16:52:28.917 に答える
0

  1. HTML

    <a data-title="Title" data-content="content" data-mydata="1" class="confirmation-dialog" href="#">Link</a>

  2. JS

    $('.confirmation-dialog').confirm({ buttons: { Yes: function(){ console.log(this.$target.attr('data-mydata')); No: function(){ } } });

于 2019-01-05T23:25:56.093 に答える