0

同じjqueryuiダイアログボックスを複数の目的で使用したいと思います。

この場合、すべての行にチェックボックスが付いたデータグリッドがあります。ユーザーはボタンを押す（削除）ことでチェックした行を削除できます。ボタンを押すと、jquery uiダイアログボックス（確認ボックス）が表示され、「削除しますか？」などのメッセージが表示されます。はい、もしくは、いいえ

しかし、チェックボックスがチェックされておらず、ユーザーが削除ボタンを押した場合、コンテンツに異なるタイトルとメッセージ（行が選択されていない）のjqueryuiダイアログボックスを表示したいと思います。これどうやってするの ？

現在、私のコードは次のようになっています。

 $(document).ready(function() {
            $( "#dialog" ).dialog({
                autoOpen: false,
                width:"400px",
                modal: true,
                resizable: true,
                buttons: [
                    {
                        text: "Yes",
                        click: function() {
                            $('#form_list_action').submit();
                        }
                    },
                    {
                        text: "Cancel",
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });
            $( "#action-delete" ).on('click', function(event) {
                event.preventDefault();
                $( "#dialog" ).dialog( "open" );

            });



<div id="dialog" title="Delete Selected Items">
 <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;">   </span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

 <a href="" class="action-delete" id="action-delete">Delete</a>
4

1 に答える 1

1

この関数を使用して、必要なときにダイアログボックスを動的に作成しています。

function showPopup(title,url,height,width,data,showCloseBtn)
{
    showCloseBtn = showCloseBtn || false;
    height = height || 'auto';
    width = width || 'auto';

    //Create popup container if needed or remove content
    if($('#popup').length == 0)
        $('body').append('<div id="popup"></div>');
    else
        $('#popup').empty();

    //Reset dialog widget if needed
    try{$('#popup').dialog('destroy');}catch(e){}

    if(showCloseBtn)
        btnCode = {"Fermer": function(){$( this ).dialog( "close" );}}
    else
        btnCode = null;

    //Load content if the data provided is html code
    if(url.search('<') >= 0)
    {
        $('#popup').html(url);
        $('#popup').dialog({
                resizable: false,
                modal: true,
                width: width,
                height : height,
                buttons:btnCode,
                title : title
            });        
    }
    else
    {
        var data = data || {};
        //Load data from url
        $('#popup').load(url,data,function(){
            $(this).dialog({
                resizable: false,
                modal: true,
                width: width,
                height : height,
                buttons:btnCode,
                title : title
            });        
        });                           
    }    
}
于 2013-02-10T09:23:33.943 に答える