ajax replace content lose focus on text box

Question

I don't even know if this is possible but here is an example:

<div id="register">
//bunch of markup including inputs
</div>

Via AJAX I replace the register div, but if there is a focus on a text box inside of the register div, it loses focus when replaces happens. Is there a way to maintain focus?

here is the javascript:

$("#cart_contents input").change(function()
{
    $(this.form).ajaxSubmit({target: "#register_container", success: function()
    {

    }
    });
});

I have lots of inputs inside this form, how can I figure out how to refocus

score 4 · Accepted Answer · edited May 23 '17 at 12:00

4

If you get an ID handle for the text box, e.g. textbox, when AJAX is complete, call:

$('#textbox').focus();

A more generic solution. Given focusable elements have IDs, bookend your AJAX stuff like so:

var focusedId = $(document.activeElement).attr('id');

// .. AJAX, replacement ..

$('#' + focusedId).focus();

Reference focus()^jQuery, Using jQuery to test if an input has focus.

edited May 23 '17 at 12:00

Community

1
1

answered Jan 28 '12 at 19:42

calebds

25,670
9
46
74

I added some example javascript...How would I be able to do this? – Chris Muench Jan 28 '12 at 19:48
@ChrisMuench see my update. you could bookend your `$(this.form).ajaxSubmit(..);` with above. – calebds Jan 28 '12 at 19:57

score 1 · Answer 2 · answered Jan 28 '12 at 19:43

1

If you replace the markups inside the register div,the focus from earlier fields would be removed,use

$("#"+someid).focus();

to focus on the textfields with id if you are using jquery..

answered Jan 28 '12 at 19:43

Rahul garg

9,202
5
34
67

I added some example javascript...How would I be able to do this? – Chris Muench Jan 28 '12 at 19:52
`var innerid = document.activeElement.id; `// to get inner element id with focus before ajax call . //in ajax call successs function: `$("#"+innerid).focus();` – Rahul garg Jan 28 '12 at 20:00

ajax replace content lose focus on text box

2 Answers2