Question

这是我目前遇到的问题。

我有一个带有文本字段和拖放区的表单，用于上传文件。

基本上，我要完成的工作是，如果用户未将任何文件添加到放置区而提交表单，我想在提交按钮上显示一个确认（使用bootstrap-confirmation），以确认他们将要创建一个空相册。

这是我的代码

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <link rel="stylesheet" href="/css/lightbox.css">
        <link rel="stylesheet" href="/css/bootstrap.min.css">
        <link rel="stylesheet" href="/css/dropzone.css">
        <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
        <link rel="stylesheet" href="/css/custom.css">
        <title>Test Page</title>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <form class="form newAlbumForm" id="newAlbumForm" role="form">
                        <div class="form-group">
                            <input type="text" class="form-control form-control-lg" id="inputNewAlbumName" aria-describedby="newAlbumHelp" placeholder="New Album Name" required>
                        </div>                        
                    </form>
                    <div>
                        <div id="myDropzone" style="height:50px;"></div>
                        <div class="dropzone-previews dropzone"></div>
                    </div>
                    <div>
                        <button type="button" class="btn btn-large btn-primary btnSubmitNewAlbum">
                            Create Album
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <script src="/js/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
        <script src="/js/bootstrap.min.js"></script>
        <script src="/js/bootstrap-confirmation.js"></script>
        <script src="/js/lightbox.js"></script>
        <script src="/js/jquery.cookie.js"></script>
        <script src="/js/dropzone.js"></script>
        <script src="/reload/reload.js"></script>
        <script src="/js/common.js"></script>
        <script>

            Dropzone.autoDiscover = false;

        $(function() {

            $('.btnSubmitNewAlbum').confirmation({
                btnOkLabel: "Create Album",
                btnOkClass: "btn-success",
                btnOkIconClass: "material-icons",
                btnOkIconContent: "",
                btnCancelLabel: "Add photos!",
                btnCancelClass: "btn-danger",
                btnCancelIconClass: "material-icons",
                btnCancelIconContent: "",
                title: "Create Empty Album?",
                content: "No photos have been added. A new empty album will be created.",
                onConfirm: function() {
                    $('.newAlbumForm').submit();
                },
                onCancel: function() {
                    return false;
                }
            });

            var myDropzone = new Dropzone("div#myDropzone", {
                url: "/api/upload",
                acceptedFiles: "image/*, application/pdf",
                autoProcessQueue: false,
                previewsContainer: ".dropzone-previews",
            });

             $('.btnSubmitNewAlbum').click(function(e) {
                    console.log('Clicked on submit button') //This does not get logged when I click the button

                    if(!myDropzone.getQueuedFiles().length || myDropzone.getQueuedFiles().length == 0) {
                        // Enable Confirmation
                    } else {
                        // Disable Confirmation
                    }
             });

        });

        </script>
    </body>
</html>

由于某种原因，当我在“提交”按钮上初始化确认时，单击事件停止工作。如果我不初始化确认，则单击事件有效。

如果myDropzone.getQueuedFiles == 0，如何启用确认？

任何帮助将不胜感激。

Answer 1

我终于能够解决问题。

在引导程序确认文档中，他们没有提及可以设置为“手动”的触发选项。我在bootstrap-popover文档中找到了此选项。

因此，我要做的就是设置trigger: "manual"选项，然后在我想显示确认时调用.confirmation（'show'）方法。

根据条件在按钮上启用/禁用Bootstrap确认

1 个答案: