Click here to Skip to main content
15,881,033 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
hello sir,
i want to set default focus on "cancel" button whnen "bootstrapdialog.confirm" popup open..
i searched in google but not find any result..

How TO do ?
Posted
Updated 27-Jan-15 14:47pm
v2

 
Share this answer
 
by the dialog confirmation, are you meaning one of these extensions on bootstrap?

http://ethaizone.github.io/Bootstrap-Confirmation/[^]

or

http://nakupanda.github.io/bootstrap3-dialog/[^]

anyhow, here's a jsfiddle that demonstrates how to launch a bootstrap (plain 3.x) modal and set the focus on the cancel button after the modal launches (that way the enter key should trigger the click event of the cancel button).

http://jsfiddle.net/jchoponis/orvdfmLe/3/[^]

since you are most likely using an extension of bootstrap 3.x, i'm thinking this jsfiddle is still relevant and could be adapted pretty easily.

hope this helps.
 
Share this answer
 
Comments
Manish Dalwadi 27-Jan-15 21:43pm    
i use this type of dialog box

http://nakupanda.github.io/bootstrap3-dialog/

but i cant focus on "cancel" button
ah. this library does look pretty cool!
http://nakupanda.github.io/bootstrap3-dialog/[^]

note that in the "available options" section, you can set css classes on buttons...you can also set the id value.
also, there's an option to run a method "onshown".

you could use set the id as desired in the example i took from their site below ("btn-ok") and so something like this:

JavaScript
($"#btn-ok").focus();


OR...

you could set a custom css class (something not being used for something else - like "cancel-button-custom") and then use jquery to set the focus to that element like below:

JavaScript
($".cancel-button-custom").focus();


sample from the same site taken from their examples:

JavaScript
BootstrapDialog.show({
    title: 'Say-hello dialog',
    message: 'Hello world!',
    buttons: [{
        id: 'btn-ok',   
        icon: 'glyphicon glyphicon-check',       
        label: 'OK',
        cssClass: 'btn-primary', 
        autospin: false,
        action: function(dialogRef){    
            dialogRef.close();
        }
    }]
});



so again, i think my jsfiddle provided earlier will help - instead of setting the id of the button to pick out like i did, you can to class yours ahead of time in the libraries object setup...or you can set the id of each button and do something closer to my jsFiddle example.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900