Automatically set focus on dynamically loaded input field

Question

Working with jQuery, I'm trying to do a .focus() on an input field after a AJAX call, but with no luck so far.

Little snippet to give the idea:

$.ajax({
    type: "GET",
    url: url,
    success: function (data) {
        $('#myModal').remove();
        $('body').append(data);
        $('#myModal').modal('show');
    },
    complete: function(){
        $('#input-new-saldo').focus();
    }
});

Here's the HTML: (loaded by AJAX and appended to body)

        <form id="form-update-saldo">
            <div class="modal-body">
                <div class="form-group">
                    <label class="sr-only" for="input-new-saldo">Saldo (in euro)</label>
                    <div class="input-group">
                        <input type="text" class="form-control input-lg" id="input-new-saldo" name="new_saldo" value="<?php echo $saldo['saldo']; ?>">
                        <div class="input-group-addon">€</div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-success" id="submit-update-saldo">Update saldo</button>
            </div>
        </form>

What I have tried so far:

Seen throug the other threads addressing the same type of issue but the solutions didn't seem to help on this. (ex. Javascript focus does not work on dynamically loaded input box jquery focus not working on a page loaded with ajax)
Made sure the element exist during the call. It indeed does: $('#input-new-saldo'); gives positive output.
Made sure the call is addressed to correct element. It indeed does: $('#input-new-saldo').val('test'); changes the value of the element.

However, calling $('#input-new-saldo').focus(); does nothing, nor gives any JS error.

To me it seems the focus is somehow lost during the AJAX call to somewhere outside my application and I'm not able to steal it back in the callback function. Would that make sense and how could it possible be solved?

Yep I tried but that didn't work. I tried with document.getElementById('input-new-saldo').click(); and $('#input-new-saldo').click(); not sure which one you meant. — jgangso, Jun 05 '16 at 21:13
You're removing `#myModal` and then doing `$("myModal").modal("show");`. How is that supposed to work? — Barmar, Jun 05 '16 at 21:15
It works for me here: https://jsfiddle.net/barmar/t65nu71g/6/ Maybe it has something to do with the modal library you're using. — Barmar, Jun 05 '16 at 21:26
Yah, I'm just removing the old modal, then appending the new one to the body and then displaying it @Barmar — jgangso, Jun 16 '16 at 18:30
There's no `id="myModal"` in the HTML that's loaded from AJAX. — Barmar, Jun 16 '16 at 19:53
My bad, I should have mentioned that the HTML was only a snippet, not the entire HTML loaded by AJAX. Sorry @Barmar — jgangso, Jun 20 '16 at 10:28

score 1 · Accepted Answer · edited May 23 '17 at 12:22

1

Odd enough, found ultimately this thread https://stackoverflow.com/a/23921617/3963594 which addressed the issue directly.

The important part was to bind the event to the modal after appending it to body, before showing it.

edited May 23 '17 at 12:22

Community

1
1

answered Jun 16 '16 at 19:21

jgangso

638
10
19

KpTheConstructor · Answer 2 · 2016-06-05T21:36:32.277

0

You're are pretty close . Input elements can have an autofocus attribute .

So instead of :

$('#input-new-saldo').focus();

Try :

$('#input-new-saldo').attr('autofocus' , 'true');

Hope this helps

edited Jun 05 '16 at 21:36

answered Jun 05 '16 at 21:31

KpTheConstructor

3,153
1
14
22

2

That was interesting input, can't believe I've missed it. However, it doesn't seem to work in this prticular case. :/ – jgangso Jun 16 '16 at 18:33

score 0 · Answer 3 · answered Jun 06 '16 at 00:31

$.ajax({
        type: "GET",
        url: url,
        success: function (data) {
            $('#myModal').remove();
            $('body').append(data);
            $('#myModal').modal('show');
            $('#myModal').on('shown', function() {
                $('#input-new-saldo').focus();
            });
        }
    });

Automatically set focus on dynamically loaded input field

3 Answers3