lipis / bootstrap-sweetalert Goto Github PK

I need an alert to tell the user it should wait because work is being done, can I achieve this with sweetalert? I was using blockUI and bootstrap modals, but sweetalert looks better.

The alert appears but no faded black/grey overlay appears at all so the alert blends in on a white background.

Working on a simple ASP.net webforms project and have a page with a standard text box and a calendar extender from AJAX v16.1. When I run the project I get "0x800a01bd - JavaScript runtime error: Object doesn't support this action" on the calendar extender. Have found NOTHING useful on the web about this. Any clue what's happening or what I can do to fix it?
-Yes, Ajax is installed correctly. I have Ajax combo boxes on the form and they're not causing any problems.

<asp:TextBox ID="txtQuestion_4" runat="server" Width="85px">/asp:TextBox
<asp:CalendarExtender ID="txtQuestion_4_CalendarExtender" runat="server" BehaviorID="txtQuestion_4_CalendarExtender" TargetControlID="txtQuestion_4">/asp:CalendarExtender

Hey all, thanks for the awesome plugin!!

I'm noticing an issue where the text gets clipped in the title, especially when using capital letters. Has anyone else seen this? Or have a quick fix? I tried a few things with no luck so far. Using Firefox at the moment.

swal({
title: "Text With Capital Letters",
text: "Text is getting clipped",
type: "success",
showCancelButton: true,
confirmButtonClass: "btn-success",
confirmButtonText: "Okay",
closeOnConfirm: false
},
function () {}
);

Just wanted to asked if this is a known issues or if there's something I can do about it.
The alert doesn't show on ie8. Firefox, Safari works fine.
Best regards

Because this is "just a fork" of the original, I would expect it to work with the timer property, however, it seems to just get ignored. Is this to be expected ? Since there are no onOpen callbacks nor any function to close dialog, I can't do this manually either.

I tried the standard SA, and there it is working, but when I use bootstrap-sweetalert, it is ignored. No matter what value I supply, such as 'slide-from-bottom', the modal is popped up with the same exact double pop effect.

Here is the sources of the entire HTML page: https://gist.github.com/ipolevoy/9dc5955d17cd42d805da

Any help is appreciated!

Hi.

Today I read your sweet-alert.js for customizing my job.

And I found some issue in sweet-alert.js.

529~532 lines need to run? (this lines...)

      $customIcon.css({
        'width': imgWidth + 'px',
        'height': imgHeight + 'px'
      });

When I tested custom icon imageSize, I think this line make error like uncaught type error.

Check this...

cant set showConfirmButton to false as it isn't an option.

This error occurs when the sweet alert pops up and you press any key.
Using IE 11
Code:

 swal({
                title: "Are you sure?",
                text: "Delete : " + fileName,
                type: 'error',
                showCancelButton: true,
                confirmButtonClass: "btn-danger",
                confirmButtonText: "Yes, delete it",
                cancelButtonText: "No, cancel",
                closeOnConfirm: false,
                closeOnCancel: false
            },
            function (isConfirm) {
                if (isConfirm) {
                   //Do something
                } else {
                    //Do something else
                }
            });

`swal({   
title: "An input!",   
text: "Write something interesting:",   
type: "input",   
showCancelButton: true,  
closeOnConfirm: false,   
inputPlaceholder: "Write something" }, 
function(inputValue){   
if (inputValue === false) 
return false;      
if (inputValue === "") {    
swal.showInputError("You need to write something!");     return false   }      
swal("Nice!", "You wrote: " + inputValue, "success"); });
`

Is it just not supported or is there an underlying issue?

Here's the message I get, on Windows 10:

`Failed at the [email protected] install script 'grunt compile'.

Hi!
Giving the fact that the queryselector bug has a month, I wonder if this library is actively maintained

If it isn't, will be more honest to indicate it clearly to avoid people losting their time

Thanks!

It is probably time to tag a new release
In my opinion it should be a major version, considering the big changes when syncing to the original sweetalert.

@lipis What do you think about this?

This big bug has been corrected:
t4t5@364d83d

Thanks

First of all, i want to say thank you for this great project, its very useful and the look and feel of the alerts. The only problem that i'm facing now, its that the sweetalerts doesnt block input from previuosly openned modals. Would be nice to add a general backdrop block to block input of focus of everyone else in the dom, including the bootstrap modals.

Thank you for all the effort on this project, and i hope that this little issue get solved. (Sorry for my bad english).

On certain browsers (firefox and chrome), two small slits are created within the circle whenever the spinning animation terminates.

Cheers.

On confirm, I want to run an ajax call, and if there's a success, just close the dialog, and if there's an error I want to show another swal, so how would I achieve this ?

I use it in Meteor, but have problem with Esc Key to close alert

    swal({
        title: "Error",
        text: msg,
        type: "error",
        confirmButtonClass: "btn-danger",
    });

when I tried add showCancelButton: true, it work fine.
but I don't want to show Cancel Button.

Anybody with an example on how to use sweet-alert to display a select input?

I'd rather not fork this to put in events. It would be awesome if there was some way to tell when an alert was opened and when one was closed.

Thanks.

Hi!

I'm trying to make a swal with steps, I dont find any doc on your github but on sweetalerts2 exist this option https://sweetalert2.github.io/ -> Chaining modals (queue).

When I use the example, I get this error:
Uncaught TypeError: swal.queue is not a function

Is it possible to get this?

Thanks!

Hi! Great job!
Just wonder how to make it works with page onload function and prevent next showing up by set cookie (for next 24h). That will be awesome!

Hello there,

I tried using npm version of bootstrap-sweetalert (1.0.1), but when I require() it I get the following:

Error: Cannot find module './handle-dom' from '/tmp/node_modules/bootstrap-sweetalert/dist'
    at /tmp/node_modules/browserify/node_modules/resolve/lib/async.js:55:21
    at load (/tmp/node_modules/browserify/node_modules/resolve/lib/async.js:69:43)
    at onex (/tmp/node_modules/browserify/node_modules/resolve/lib/async.js:92:31)
    at /tmp/node_modules/browserify/node_modules/resolve/lib/async.js:22:47
    at FSReqWrap.oncomplete (fs.js:82:15)

On the other hand, if I go with "vanilla" sweetalert, I get no such issue.

Any ideas?

I copied the twitter.css to a custom.css since the twitter.css had most of the settings I wanted.

I tried to color the header background lightgray by adding this to the custom.css:

.sweet-alert header {
background-color: lightgray;
}

It did not work. Thanks for any ideas.

Hi,

After timer is expired reload is not working.

swal({ title: "Succes!", text: "Stergere efectuata cu succes!", type: "success", timer: 3000, showConfirmButton: false, }, function() { location.reload(true); });

With showConfirmButton: true, is working.

Is there a solution?

I get this error TypeError: Cannot read property 'querySelector' of null when running the plugin. I found it was a bug in the original SweetAlert and that it was already solved. Is there any chance your improved version is not up to date?

Swal modals doesnt have a nice api to get the result of confirmation dialogs as window.confirm return value. The only way is by callbacks, that make almost inposible take complex decisions based on the confirm result. Woulb be great if swal function could return the result of the confirm dialog directly from the function call, giving the swal function the ability to work in a if statement or any other boolean condition logic based.

You guys know of any?

A quick cursory Googling didn't provide any results, so not sure.

Thanks!

Works on some devices but consistently crashes on other.

When using a fixed bootstrap .navbar / navbar-fixed-top, the default css for the sweet-overlay won't hide the navbar.

Simply add/ or change CSS

.sweet-overlay{
    z-index: 1500; /* default value is 1000 */
}

The error is:
TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them

The source of the error is arguments.callee twice as seen below:

(function () {
  if (document.readyState === "complete" || document.readyState === "interactive" && document.body) {
    sweetAlertInitialize();
  } else {
    if (document.addEventListener) {
      document.addEventListener('DOMContentLoaded', function factorial() {
        document.removeEventListener('DOMContentLoaded', arguments.callee, false);  // <----- BUG
        sweetAlertInitialize();
      }, false);
    } else if (document.attachEvent) {
      document.attachEvent('onreadystatechange', function() {
        if (document.readyState === 'complete') {
          document.detachEvent('onreadystatechange', arguments.callee);  // <----- BUG
          sweetAlertInitialize();
        }
      });
    }
  }
})();

The "parent" sweetalert library also had this problem, but it's been fixed long ago. How do we deal with it for this "sub" project?

Looks like a simple fix, just to change to the function name. I'd do it, but not familiar with git.

Hi, Got it working.

swal('HELLO', 'WORLD', 'success');

loads confirm button with btn btn-lg, not btn.

Is this intentional behavior or just a bug? I don't think btn-lg is appropriate for default buttons.

Whenever I try to create an alert using "input" type for a prompt() replacement this component claims that type "input" is invalid and a regular alert() replacement appears instead.

My parameters object at the time of checking for a valid type is:

allowOutsideClick: false
cancelButtonClass: "btn-default"
cancelButtonText: "Cancel"
closeOnCancel: true
closeOnConfirm: true
confirmButtonClass: "btn-primary"
confirmButtonText: "OK"
containerClass: ""
doneFunction: ƒ (value)
imageSize: null
imageUrl: null
showCancelButton: false
text: "How many beans would you like?"
textClass: ""
timer: null
title: "Prompt"
titleClass: ""
type: "input"

The exact object I give to sweetAlert() is:

{
title: params.typeText,
text: params.text,
type: "input",
showCancelButton: true,
confirmButtonText: params.buttonTextOk,
confirmButtonClass: params.confirmButtonClass,
showCancelButton: params.inputRequired ? false : true,
cancelButtonText: params.buttonTextCancel,
inputPlaceholder: params.inputPlaceholder,
closeOnConfirm: true,
closeOnCancel: true,
}

The params object is of course variable from a wrapper function.

I am using the latest dev/master version of this component.

On the same page, if there is a pdfjs ( http://mozilla.github.io/pdf.js/ ) viewer in iframe, sweetalert randomly failed with no reason. (I repeat this action about 20 times, it failed 13 times).

I don't know which version I should provide for you. You can ask me if you need any further information.
Stack trace:

Cannot read property 'querySelector' of null (this line https://github.com/lipis/bootstrap-sweetalert/blob/master/lib/sweet-alert.js#L458 )
setParameters (this line https://github.com/lipis/bootstrap-sweetalert/blob/master/lib/sweet-alert.js#L458 )
window.sweetAlert.window.swal (this line https://github.com/lipis/bootstrap-sweetalert/blob/master/lib/sweet-alert.js#L258 )

My page js dependency

            'bower_components/jquery/dist/jquery.js',
            'bower_components/bootstrap/dist/js/bootstrap.js',
            'bower_components/wow/dist/wow.min.js',
            'bower_components/sticky-kit/jquery.sticky-kit.js',
            'bower_components/toastr/toastr.js',
            'bower_components/bootstrap-sweetalert/lib/sweet-alert.js',
            'bower_components/pace/pace.js',
            'bower_components/jquery-unveil/jquery.unveil.js',
            'bower_components/jquery-form/jquery.form.js',
            'bower_components/selectize/dist/js/standalone/selectize.js'
            'bower_components/FroalaWysiwygEditor/js/froala_editor.min.js',
            'bower_components/FroalaWysiwygEditor/js/langs/vi.js',
            'bower_components/FroalaWysiwygEditor/js/plugins/colors.min.js'

I know it is a heavy js page, but I don't have a clue why it fails randomly

Could you update the npm package?

Cheers

Hi,

Having a blast with this. Thanks for all the hard work.

Is there a BS3 version in the mix/coming?

Thanks. Jeff.

When adding dynamic HTML like a bootstrap tablist with tables and other html components inside, the Sweet alert is not centered on the screen.

i declared html content as:

var htmlcontent = '<ul class="nav nav-pills" role="tablist">' +
                             '<li role="presentation" class="active"><a href="#POCInfo" data-toggle="tab">Details</a></li>' +
                            '<li role="presentation" >' +
                                   '<a href="#Questionnaires" data-toggle="tab">' +
                                    '<span class="label label-success"> ' + markers[z].QuestionnairesCount + '</span>' +
                                         ' Questionnaires' +
                                   '</a>' +
                              '</li>' +
                               '<li role="presentation" class="disabled"><a href="#" >Orders</a></li>' +
                            '</ul>' + .......

and I called SweetAlert like this:

swal({
     title: markers[z].Name + ' visit on ' + markers[z].VisitDate,
     text: htmlcontent,
     html: true
});

Do you have a solution for this or is there something i'm doing wrong?

after click cancle or other button, modal will not fit the modal frame

chrom version 57.0.2987.133 (64-bit windows)

Hi,

Has anyone made a bootstrap-sweetalert gem for Rails 3/4? If so, is it turbolinks-ready?

Thanks. Jeff.

Thx https://www.npmjs.org/package/bootstrap-sweetalert :)

In some cases, to access resources that are wrapper maybe will want to make accessible in swal callback when it is triggered.
To do this, we use the known .bind()
swal({ title: "Are you sure?", text: "You will not be able to recover this imaginary file!", type: "warning", showCancelButton: true, confirmButtonClass: "btn-danger", confirmButtonText: "Yes, delete it!", cancelButtonText: "No, cancel plx!", closeOnConfirm: false, closeOnCancel: false }, (function(isConfirm) { debugger; if (isConfirm) { swal("Deleted!", "Your imaginary file has been deleted.", "success"); } else { swal("Cancelled", "Your imaginary file is safe :)", "error"); } }).bind());
But when used this technique, in case of cancel, the callback is never called, only when confirm.

The second one overwrite the first one.

swal({
            title: "Note",
            text: "Blah",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
          });

swal({
            title: "Note 2",
            text: "Blah",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
          });

On the other hand if we have our usual simple alert, we can easily do alert('a'); alert('b') and they'll work properly.

Hello,

Check out: https://github.com/t4t5/sweetalert/blob/master/lib/sweet-alert.js#L25

Bests

I would like to show alert on alert (multiple).
Could example.

using isConfirm will not suffice in this case because there is more complex logic through multiple objects before the second call is made

It seems that bootstrap-sweetalert added extremely useful initialization properties cancelButtonClass, confirmButtonClass, containerClass not present in original sweetalert. Could you please add additional property to control class of buttons container?

<p /* class = "SOMECLASS" */>
<button class="cancel btn btn-lg btn-primary">No, I made an oopsy.</button>
<button class="confirm btn btn-lg btn-secondary">Yes, do it!</button>
</p>

We need that to control buttons wrapping(white-space: nowrap), otherwise we get http://imgur.com/Dm8REnh when there is not enough width in modal.