Question

I have a fiddle : http://jsfiddle.net/SDr3F/10/

Currently:

onclick, it alerts

alert('hi')  

Required:

onclick, it loads a search.html with a search text box and focus in textbox

search.html

<input id="search-input" type="text" class="input-medium search-query span4">  

How I set focus?

$(function(){
  $("#search").click(function(){
      $('#feature').load('templates/search.html');
      $('#search-input').focus();
      alert("hi");
  });
});

Problem

• It loads the page BUT doesn’t focuses inside textbox, how do I fix this?

Answer 1

In your example you focus element right after the Ajax request is made but not when the request is successfully completed. Hence, you try to focus the element that is not yet loaded.

You should add the complete handler. The following should work:

$("#search").click(function() {
    $("#feature").load("templates/search.html", function() {
        $("#search-input").focus();
    });
});​