albert's blog: Bootbox

Showing posts with label Bootbox. Show all posts

2018/06/10

[Bootbox] How to keep the modal dialog open until the input is valid?

Problem
I utilize Bootbox to open a dialog, it has one dropdown list for end user to select. And click Import button after select dropdown list.

The code snippet looks like:

bootbox.dialog({
    title: '匯入專案',
    buttons: {
        importProject: {
            label: '匯入',
            className: 'btn-primary',
            callback: function() {
                var projectSelectedVal = document.getElementById("projectList").value;
                var importOptionVal = document.querySelector('input[name="importOption"]:checked').value;
                if (projectSelectedVal == '') {
                    bootbox.alert('<font color=red><b>請選擇要匯入的專案</b></font>');
                } else {
                    // do something
                }
            }
        },
        cancel: {
            label: '取消'
        }
    }
});

If end user do not select required attribute, I will show warning message to end user. But the Bootbox dialog will close it automatically, how do I keep the dialog open?

How-to
Here has updated code:

bootbox.dialog({
    title: '匯入專案',
    buttons: {
        importProject: {
            label: '匯入',
            className: 'btn-primary',
            callback: function() {
                var projectSelectedVal = document.getElementById("projectList").value;
                var importOptionVal = document.querySelector('input[name="importOption"]:checked').value;
                if (projectSelectedVal == '') {
                    bootbox.alert('<font color=red><b>請選擇要匯入的專案</b></font>');
                    return false;
                } else {
                    // do something
                }
            }
        },
        cancel: {
            label: '取消'
        }
    }
});

2018/05/08

[Bootbox] How to set button focus in bootbox dialog

Problem
I am using Bootbox.js to create a custom dialog

The default behavior is focusing on the second button, i.e. EXCEL, how to I change its focus to the first button.

The code snippet is as bellows:

  $scope.doExport = function() {
     bootbox.dialog({
     message: "請選擇要匯出 JSON 或 Excel",
         title: '匯出',
         buttons: {
            json: {
                label: 'JSON',
                callback: function() {
                    $scope.exportJson();
                }
            },
            excel: {
                label: 'Excel',
                callback: function() {
                    $scope.exportExcel();
                }
            }
         }
     });
  };

How-To
You can simply add btn-primay class to the first button, the code snippet is as following:

   $scope.doExport = function() {
     bootbox.dialog({
         message: "請選擇要匯出 JSON 或 Excel",
         title: '匯出',
         buttons: {
             json: {
                 label: 'JSON',
                 className: 'btn-primary',
                 callback: function() {
                     $scope.exportJson();
                 }
             },
             excel: {
                 label: 'Excel',
                 callback: function() {
                     $scope.exportExcel();
                 }
             }
         }
     });
   };

Here has the updated dialog:

2018/04/08

[Angular] [Bootbox] File Upload Example

Problem
How to implement file upload function via Angular and Bootbox?

How-To
Here has sample code.
Code snippet in JavaScript:

    $scope.importJson = function() {
     $scope.attachment = undefined;
     
     bootbox.dialog({
      message: "<input class='form-control' type='file' id='jsonFile' name='jsonFile' /> ",
      title: '匯入 JSON',
      buttons: {
       upload: {
           label: '上傳',
           callback: function() {
               cResource().uploadFile({
                   url: '/api/projects/' + $scope.project.id + '/importJSON',
                   file: $scope.attachment
               }).success(function(res, status, headers, config) {
                   cAlerter.success('上傳成功');
               }).error(function(res, status, headers, config) {
               });
           }
       },
       cancel: {
             label: '取消'
       }
      }
     });
     var jsonFile = document.getElementById("jsonFile");
     jsonFile.addEventListener("change", function (e) {
         $scope.attachment = this.files[0];
     }, false);
    };

Code snippet in controller class:

    @Transactional
    @PostMapping(value = "/{projectId}/importJSON", produces = MediaType.APPLICATION_JSON_VALUE)
    public void importJSON(@PathVariable Integer projectId,
      @RequestParam(value = "file") MultipartFile jsonFile) throws IOException {
  
    }

2017/11/10

[Bootbox] How to change default button and button color in confirmation dialog?

Problem
The confirmation dialog looks like:

I would like to change the default button in confirmation dialog from "確認"(confirm) to "取消"(cancel).
Owing to confirm to do delete is a dangerous action, so I would like to change it color to red.

How to meet the two requirements?

The original code snippet is as following:

    $scope.remove = function() {
        bootbox.confirm({
            message:'是否確定要刪除', 
            buttons: {
                confirm: { label: '確認' },
                cancel:  { label: '取消' }
            },
            callback:function(isConfirmed) {
                if(isConfirmed) {
                    // ....
                }
            }
        });
    };

How-to
Add btn-danger class name to confirm button, then the button color will change to red.
Add btn-primary class to cancel button, then the default button will be cancel button.

The updated code snippet is as bellows:

    $scope.remove = function() {
        bootbox.confirm({
            message:'是否確定要刪除', 
            buttons: {
                confirm: { label: '確認', className: 'btn-danger' },
                cancel:  { label: '取消', className: 'btn-primary' }
            },
            callback:function(isConfirmed) {
                if(isConfirmed) {
                    // ....
                }
            }
        });
    };

Updated screenshot:

2017/11/09

[Bootbox] How to change button name in Booxbox confirm dialog

Problem
I am using Bootbox to implement confirm dialog, the screenshot looks like:

The code snippet is as bellows:

    $scope.remove = function() {
        bootbox.confirm('是否確定要刪除', function(isConfirmed) {
            if(isConfirmed) {
                // ....
            }
        });
    };

How can I change OK label to "確定"? And how do I change Cancel label to "取消"?

How-to
Here has sample code to fulfill this requirement:

    $scope.remove = function() {
        bootbox.confirm({
            message:'是否確定要刪除', 
            buttons: {
                confirm: { label: '確認' },
                cancel:  { label: '取消' }
            },
            callback:function(isConfirmed) {
                if(isConfirmed) {
                    // ....
                }
            }
        });
    };

The confirmation dialog looks like:

Total Pageviews