focus on input loaded via ajax

Question

0 vote against favorite

I have a page where I am refreshing with ajax only on div content. It is configured like this:

div1: I load 2 selects where the user will choose these 2 data (class and bimonthly)

div 2: I load the application menu (.php menu) end of div 2

div id="content": I load the page that reads the 2 selects and load the corresponding php page, according to the item chosen in the menu in the div2 end of the div id="content"

My question is this: When I click on a given menu item (which is in the div2) it loads a page inside the div content that contains several dynamically created inputs. Each of these inputs has an id. I need to automatically focus and exit these inputs to run a javascript function. I can’t do this. I’m only testing with input with id 01001 and it doesn’t work at all. I’ll post here what I’ve tried to see if anyone can figure out what I’m doing wrong.

function AlteraConteudo()
{
var ajax = AjaxF();	
ajax.onreadystatechange = function(){
	if(ajax.readyState == 4)
	{
		document.getElementById('conteudo').innerHTML = ajax.responseText;
			alert("fora");				
        $("input.bordanotastarjeta").maskMoney({showSymbol:false, decimal:".", thousands:".", precision:1,defaultZero:true, allowZero:true});
	
		   window.setTimeout(function ()
		   {
			alert("dentro");
			document.getElementById('01002').focus();
			   document.getElementById('01002').blur();					   
		   }, 0);			
		//$('#notas').css('background', 'black');			
		//document.getElementById('01001').focus();
		//document.getElementById('01001').blur();	
		//$('#01001').focus();
		//$('#01001').blur();			
	}
};
// Variável com os dados que serão enviados ao PHP
var dados = "classe="+document.getElementById('classes').value+"&bimestre="+document.getElementById('bimestre').value+"&ano="+document.getElementById('ano').value+"&tipo="+document.getElementById('tipo').value;
var pagina = document.getElementById('pagina').value;
ajax.open("GET", pagina + dados, false);
ajax.setRequestHeader("Content-Type", "text/html");
ajax.send();
}

Even the maskmoney line works. What’s below doesn’t work. Thank you

Code that worked:

function AlteraConteudo()
{
var ajax = AjaxF();	
ajax.onreadystatechange = function(){
	if(ajax.readyState == 4)
	{
		document.getElementById('conteudo').innerHTML = ajax.responseText;
			alert("fora2");	
			//document.getElementById(01002).focus();	
		   window.setTimeout(function ()
		   {
			  alert("dentro");
			  document.getElementById('01002').focus();
			   document.getElementById('01002').blur();					   
		   }, 0);					
        $("input.bordanotastarjeta").maskMoney({showSymbol:false, decimal:".", thousands:".", precision:1,defaultZero:true, allowZero:true});

			   //document.getElementById(01002).blur();				
	
	
		//$('#notas').css('background', 'black');			
		//document.getElementById('01001').focus();
		//document.getElementById('01001').blur();	
		//$('#01001').focus();
		//$('#01001').blur();			
	}
};
// Variável com os dados que serão enviados ao PHP
var dados = "classe="+document.getElementById('classes').value+"&bimestre="+document.getElementById('bimestre').value+"&ano="+document.getElementById('ano').value+"&tipo="+document.getElementById('tipo').value;
var pagina = document.getElementById('pagina').value;
ajax.open("GET", pagina + dados, false);
ajax.setRequestHeader("Content-Type", "text/html");
ajax.send();
}

One more test I did: putting up the maskmoney didn’t even need the setTimeout. It does the Focus and Blur without it (setTimeOut).

Answer 1

I had a similar problem but my solution I believe is not for you , so I took a look and found in Soen reference link the following solution :

Put a setTimeout

//... seu codigo
   $("input.bordanotastarjeta").maskMoney({showSymbol:false, decimal:".", thousands:".", precision:1,defaultZero:true, allowZero:true});    
   setTimeout(function ()
       {
        alert("dentro");
        document.getElementById('01002').focus();
        //document.getElementById('01002').blur();                     
       }, 0);
//... seu codigo

This answer served the user, see if it serves you too.

This error/problem often happens because it tries to execute the .focus() before the element is even rendered, so the timer