在jQuery中的对话框中添加一个复选框

时间:2010-11-29 14:11:37

标签: jquery

我是jQuery和JavaScript的新手,我必须修改一些代码。我需要在此对话框中添加一个复选框,并根据选择做出决定。有什么建议吗?

function deleteFacets()
{
    //  button click
    $("#b_facetsDelete").button().click(function(){
        // selected fIds
        var $fIds=checkSfALOneSelectedFId();
        if(!$fIds)
        {
            return;
        }
        $('#deleteFacetsDialog').dialog('open');        
        return;

    });

    // dialog
    $("#deleteFacetsDialog").dialog({
        autoOpen: false,
        resizable: false,
        height:160,
        modal: true,
        buttons: {
            "Cancel": function() {
                $(this).dialog('close');
            },
            "Delete selected facets": function() {
                $(this).dialog('close');

                // get the selected fIds
                var $fIds=getSfSelectedFIds();

                //update database
                $.ajax({
                    url: 'ajax/ajax_facetsDelete.php',
                    type: 'POST',
                    data: {"fIds":$fIds},
                    async: false,
                    dataType: 'xml',
                    error: function(){
                        alert('Error loading XML document');
                    },
                    success: function(data){
                        //check error
                        var $error=$(data).find('error').text();
                        if($error!="0")
                        {
                            messageBox("Error",$error);
                            return;
                        }
                        //content
                        var $content=$(data).find('content').text();
                        //refresh source facets tab
                        var $srcTabIndex=$("#srcFacetsTab").tabs('option', 'selected');
                        if($content=="0")
                        {
                            messageBox("Succeed!","Delete successfully!");
                            if($srcTabIndex==0)
                            {   // for navigation
                                sfNavRefreshUntilParent();
                            }
                            else if($srcTabIndex==1)
                            {   //for search
                                sfSearchGridRefreshAll();
                            }
                        }
                        else
                        {                                                       
                            messageBox("Warning!", $content+" can not be deleted since they have child facets or terms. <br/>Please empty them first(Move the child facets and move all the terms).");
                            if($srcTabIndex==0)
                            {   // for navigation (refresh and highlight the invalid fIds)
                                sfNavRefreshWithHighlightFIds($content);
                            }
                            else if($srcTabIndex==1)
                            {   //for search
                                sfSearchGridRefreshWithHighlightFIds($content);
                            }
                        }
                    }
                });
                return; 
            }
        }
    });

}

HTML

<!-- delete facets confirmation dialog -->
<div id="deleteFacetsDialog" title="Sure to delete?">
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These facets will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

1 个答案:

答案 0 :(得分:1)

您正在调用的ID .dialog on deleteFacetsDialog,是对话框正文的所有代码都存在的位置。因此,您需要做的是在HTML源代码中找到该ID并在其中添加一个复选框(以及您需要的任何文本/标签)。

然后在你的删除函数回调中,你可以访问该复选框,查找它的值,并根据他们的选择做你需要的其他if / else逻辑。例如:

<div id="deleteFacetsDialog">
...
<label><input type="checkbox" id="permaDelete" />Perminantly delete this facet?</label>
...
</div>

...
"Delete selected facets": function() {
    ...
    if ($('#permaDelete').is(':checked')) {

    } else {

    }
    ...
}

只需确保您在输入的HTML中使用的ID与您在JS中调用的内容一致。