focus on input loaded via ajax

Question

focus on input loaded via ajax

Navigation

#1 by (0 votes)

1

0 vote against favorite

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

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

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

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

My question is this: When I click on a particular menu item (which is in div2) it loads a page inside the content div 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 not do that. I'm just testing with the input with id 01001 and it does not 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 does not 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();
}

Another test I did: putting above maskmoney did not even need setTimeout. It does focus and blur without it (the setTimeOut).

jquery ajax

asked by anonymous 23.11.2017 / 18:44

1 answer

Change the version of TLS in PHP upload Copy columns of corresponding rows

score 0 · Accepted Answer

I had a similar problem but my solution did not work for you, so I took a look and found it on SOen referral link the following solution:

Placing 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 was for the user, see if it serves you as well.

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