[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 348
  • Last Modified:

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/
0
canuckconsulting
Asked:
canuckconsulting
1 Solution
 
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
 
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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
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

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now