0

I have an ajax response callback like below.

    $.ajax({
          type: "POST",
          url: "search.php?ajaxrequest=yes",
          data: query_string
        }).done(function( data ) {
            $("#wtb_wm_listing").html(data);
            $("#wtb_wrapper_middle_inner").focus();
  });

I'm appending returned data into the div "wtb_wm_listing" which i have placed into main div "wtb_wrapper_middle_inner"

After appending the data I want to key focus on the main div "wtb_wrapper_middle_inner"

But when i try to focus, it is not working for me and as well as when i clicked my mouse into the div and try key down the div page is not scroll by pressing keyboard arrows.

In this case when I'm trying to make hide() or addClass() on that div its working for me.

Mouse scrolling is working for me by hovering the div.

Can anyone help me to solve this issue.

NOTE:

When I focus that div when page is load, at that time its working well, But when I append some ajax response data into that div, that time only its not working.

Vignesh Kumar
  • 49
  • 6

4 Answers4

1

Assuming that #wtb_wrapper_middle_inner is inside #wtb_wm_listing , you are basically removing everything inside #wtb_wm_listing to replace with data, that is why #wtb_wrapper_middle_inner does not exists.

You can try using append()

jQuery append() method

jQuery html() method

MegaMind
  • 653
  • 6
  • 31
  • That div is there only. But focus only is not working, even `#wtb_wm_listing` is in `#wtb_wrapper_middle_inner` only not like you said. See my question. I'm mentioning the main div is `#wtb_wrapper_middle_inner` – Vignesh Kumar Nov 28 '16 at 10:23
0

You cannot focus a container/div element. Please read the docs on some use cases here: https://api.jquery.com/focus/ if there is a particular input in that div that you would like to focus you can do that. But you can't focus a div. Though you can add a tabindex to any element. And that can simulate a focus.

Joshua Terrill
  • 1,995
  • 5
  • 21
  • 40
0

As the jQuery docs say about the focus method:

The focus event is sent to an element when it gains focus. This event is implicitly applicable to a limited set of elements, such as form elements (, , etc.) and links (). In recent browser versions, the event can be extended to include all element types by explicitly setting the element's tabindex property. An element can gain focus via keyboard commands, such as the Tab key, or by mouse clicks on the element.

Anyways, you can focus a div by adding a tabindex and see if your key scrolling works.

see: http://snook.ca/archives/accessibility_and_usability/elements_focusable_with_tabindex

The tabindex value can allow for some interesting behaviour.

  • If given a value of "-1", the element can't be tabbed to but focus can be given to the element programmatically (using element.focus()).
  • If given a value of 0, the element can be focused via the keyboard and falls into the tabbing flow of the document.
  • Values greater than 0 create a priority level with 1 being the most important.
Community
  • 1
  • 1
Alex
  • 9,911
  • 5
  • 33
  • 52
0

This is how it works

    window.location.hash = '#wtb_wrapper_middle_inner';
#wtb_wrapper_middle_inner{
margin-top:500px;  
height:50px; 
  width:50px;
  background-color:red;
}
<div id='wtb_wrapper_middle_inner'></div>
Redhya
  • 663
  • 7
  • 21