0

I have what on the face of it appears to be a simple question, however I am having some trouble with the solution. I am using asp.net 3.5 with jQuery1.8.3 and jQuery-confirm.

I will say at this point that javascript and jQuery are fairly new to me and I am not particularly confident using them.

I am intercepting the keydown event on a textbox and if the tab key has been pressed I show a jQuery-confirm dialog box. Following the action by the dialog box I wish to move to another textbox. Seems simple, here is my code.

$$("m_DiscountTextbox").on('keydown', function (e) {
var key = e.which || e.keyCode;
if (key == 9) {
    PromptForDiscount();
    document.getElementById($$("m_MarkupTextbox").attr("id")).focus();   
    }
});

function PromptForDiscount() {
$.confirm({
    title: 'Apply global discount',
    content: 'Discount will be applied to all line items. Click Confirm to continue, or Cancel to exit.',
    boxWidth: '30%',
    theme: 'material',
    buttons: {
        formSubmit: {
            text: 'Confirm',
            keys: 'enter',
            btnClass: 'btn-blue',
            action: function () {
                ApplyDiscount();
            }
        },
        cancel: function () {
        }
    },
    useBootstrap: false
});
return false;

The $$ calls into a selector function that allows me to use the id of asp.net controls as they are before .net mangles them.

Using chrome developer tools I can see that the selectors are working throughout and have even set the text on the target textbox using them to check. It is simply the focus change that isn't working.

Initially the focus goes to the target and once the dialog is confirmed it reverts to the calling textbox. Any assistance would be appreciated with this.

Thanks in advance.

Further thoughts:

I am now wondering if it is the dialog passing control back to the original caller when it's operation is complete and in the process undoing the setting of focus on the next textbox. I have no evidence yet to back this up but it looks like it could be a candidate for investigation.

I have also set up a basic jsfiddle that demonstrates the issue: https://jsfiddle.net/8uap36fp/17/

Jason
  • 1
  • 2
  • try to focus() inside confirm/cancel callback of that modal – Rohith K P Mar 16 '17 at 18:58
  • Thanks Rohith, I have already tried that and it didn't work. I can see the focus move to the target box and then it reverts back to the source box. I am wondering if it's something to do with the event model – Jason Mar 16 '17 at 19:02
  • I want to focus to the next input when the modal is dismissed, not while it is visible. – Jason Mar 16 '17 at 19:08
  • The user tabs out of the field and calculations are performed following their click to confirm, the focus should move to the next field. I should add that I can see the focus moving behind the lightbox effect that comes from the modal which is how I know whats happening in the background. – Jason Mar 16 '17 at 19:09
  • Ohh oks,.. http://stackoverflow.com/questions/8380759/why-isnt-this-textarea-focusing-with-focus – Rohith K P Mar 16 '17 at 19:13
  • May be because you are trying to focus in `keydown` event. – Rohith K P Mar 16 '17 at 19:14
  • That's what I'm thinking but neither keypress or keyup seems to work for my use case. I have tried both with no success. I do appreciate your input on this though. – Jason Mar 16 '17 at 19:16
  • `window.setTimeout(function(){ document.getElementById($$("m_MarkupTextbox").attr("id")).focus(); }, 0)` just try this – Rohith K P Mar 16 '17 at 19:19
  • unfortunately doesn't work, tried in both event handler and dialog function. I had just read the link you posted when I saw your post. I think it is a similar issue like you said. – Jason Mar 16 '17 at 19:27

1 Answers1

0

Having spent a lot of time on this I asked the question of the developer of the dialog.

As it turns out it is a limitation of this dialog that will be addressed in a future release. Essentially to workaround the issue you can set the lastFocussed property of the dialog to a non-existent element.

The working jsfiddle is here

Thanks to Rohith for all of the support yesterday.

Code for the jsFiddle

function PromptForDiscount() {
$.confirm({
    title: 'Test confirm',
    content: 'Lets hope this stays open.',
    boxWidth: '30%',
    buttons: {
        formSubmit: {
            text: 'Confirm',
            keys: 'enter',
            btnClass: 'btn-blue',
            action: function () {
                this._lastFocused = $('.thisElementDoesntExists');
                $("#arrivehere").focus();
            }
        },
        cancel: function () {
        }
    },
    useBootstrap: false
});
return false;
};
Jason
  • 1
  • 2