Determine which button pressed in Bootbox prompt

I'm using a bootbox prompt to allow a user to update a field or indicate if it should be deleted.  Unfortunately I can't work out how to determine which button has been pressed.

bootbox.prompt({
	title: "Edit Custom Product Catalog",
	value: 'Default Text',
	buttons: {
		cancel: {
			label: 'Delete Catalog',
			className: 'btn-danger',
			callback: function () {
				alert('Cancel Button Pressed');
			}
		},
		confirm: {
			label: 'Save',
			className: 'btn-success',
			callback: function () {
				alert('Save Button Pressed');
			}
		}
	},
	callback: function (result) {
		alert('This always called');
	}
});

Open in new window


https://jsfiddle.net/scotie/0az7ccc2/1/https://jsfiddle.net/scotie/0az7ccc2/1/
canuckconsultingAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

zephyr_hex (Megan)DeveloperCommented:
You can bind a regular click event listener:

$('.btn-success, .btn-danger').on('click',function() {
      alert($(this).text());
});

Updated Fiddle: https://jsfiddle.net/zephyr_hex/roy7umkf/2/
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Kim WalkerWeb Programmer/TechnicianCommented:
At what point do you need to determine which button was clicked? They each have separate callback functions, so you shouldn't have any trouble determining this on the front end. If you give them a name and a value, you should be able to determine which button is pressed on the backend after the form is submitted.
0
Julian HansenCommented:
Look at the docs for Prompt

callback: function (result) {
  // If null then cancelled
  if (result === null) {
    alert('null');
  }
  else {
    alert('not null');
  }
}

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

canuckconsultingAuthor Commented:
Hi guys, and thanks for the responses.

zephyr_hex - thanks...uglier than I'd hoped but does the trick given the apparent limitation of Fiddler.  Cheers!

Kim Walker - I should have noted neither of the button callbacks are working.  This can be verified in the jsfiddle.

Julian Hansen - This does not tell me if the Delete was pressed or if the dialog was closed by virtue of clicking the close X.   I should have added a third button to make my situation clearer.  I need to know what button is clicked.
0
Julian HansenCommented:
Null = delete
Not Null = save
Let me re-phrase the sample
callback: function (result) {
  if (result==null) {
    alert('Delete');
  }
  else {
    alert('Save');
  }
}

Open in new window


Updated fiddle https://jsfiddle.net/9st093a8/
0
canuckconsultingAuthor Commented:
Hi Julian and thanks for the follow up.

Unfortunately this does not tell me if the Delete was pressed or if the dialog was closed by virtue of clicking the close X:

gui
0
canuckconsultingAuthor Commented:
This worked great..thanks!

In the end I moved to using the custom dialog functionality which seemed to be a better fit for the task:

https://jsfiddle.net/scotie/9st093a8/1/

 bootbox.dialog({
        message: '<div class="form-group">' +
                    '<input id="CustomCatalogName" type="text" class="form-control" value="Default Text" autocomplete="off"></div>',
        buttons: {
            confirm: {
                label: 'Save',
                className: 'btn-success',
                callback: function () {
                      alert('save');
                    }
                },
            cancel: {
                label: 'Delete',
                className: 'btn-danger',
                callback: function () {
                   alert('delete');
                }
            }
        }
    });
0
Julian HansenCommented:
Begs the question as to why you are using bootbox in the first place. Essentially you are back to a customised Bootstrap modal
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.