Comunidad de diseño web y desarrollo en internet online

Focus a una div conteniendo php cargado con ajax

Citar            
MensajeEscrito el 26 Nov 2010 04:16 am
Hola!
siento abundar en este tema que ya se ha tocado aquí, pero no he podido realizarlo con éxito.

Requiero que la página que desarrollo haga focus o se ubique en el navegador en la div "textSearch" donde se cargo un php producto de una llamada ajax .

Espero puedan ayudarme, creo necesitar de un ejemplo muy claro debido a mi poca experiencia con JS

gracias, aquí va el código.

Código HTML :

<div id="textSearch">
      <input name="textfield" type="text" size="8" onKeyUp="showSearch(this.value); return false">   
      "aquí también se carga el contenido php que son consultas sin relevancia"
</div>


Código Javascript :

///objeto ajax
function objetoAjax(){
        var xmlhttp=false;
        try {
               xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
               try {
                  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
               } catch (E) {
                       xmlhttp = false;
               }
        }
 
        if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
               xmlhttp = new XMLHttpRequest();
        }
        return xmlhttp;
}

/// carga archivo php con busqueda
function showSearch(str)
{
if (str.length==0)
{ 
document.getElementById("txtSearch").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtSearch").innerHTML=xmlhttp.responseText;
}
}
var url = "busqueda_ajax.php?q=" + str;
xmlhttp.open("GET",url,true);
xmlhttp.send();

}

Por laloto

11 de clabLevel



Genero:Masculino  

msie8
Citar            
MensajeEscrito el 26 Nov 2010 12:16 pm
En el código JavaScript al finalizar la petición AJAX estás poniendo el resultado de la petición en un elemento con id "txtSerch" el cual no existe en el código HTML, creo que has querido poner "textSearch".

De todas formas si lo haces de esa manera estarías sobreescribiendo el input que inicia la búsqueda que estás haciendo. El visitante solo podrá presionar una tecla.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 26 Nov 2010 07:14 pm
Gracias por tu apoyo

Entonces depués de poner el input fuera del div, y haber corregido el id "Search", como podríamos hacer que la pag se ubique en esta div al cargar la llamada Ajax?

Código HTML :

<input name="textfield" type="text" size="8" onKeyUp="showSearch(this.value); return false">          
<div id="textSearch">
       "aquí también se carga el contenido php que son consultas sin relevancia" 
</div> 

Por laloto

11 de clabLevel



Genero:Masculino  

msie8
Citar            
MensajeEscrito el 26 Nov 2010 09:04 pm
No estoy muy seguro de qué quieres decir con "la pag se ubique"... si pudieras ser más específico.

A propósito, la función objetoAjax de tu código, no cumple ninguna función.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 26 Nov 2010 09:29 pm
Al cargar la consulta ajax, la página se mueve al pricipio y los nuevos datos quedan fuera de la pantalla.

Lo que quiero implementar es que se muestre la página al inicio de la div que cargo la consulta.

Gracias

Por laloto

11 de clabLevel



Genero:Masculino  

msie8
Citar            
MensajeEscrito el 29 Nov 2010 08:59 pm
Una de las características de AJAX es que no produce scroll en la ventana, donde el usuario está ahí se queda. Pero puedes recurrir a window.location.href y al tag <a name="loquesea"> para causar un scroll donde tú quieras.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 30 Nov 2010 01:00 am
Entiendo y Me doy cuenta que esta es una pregunta muy abierta,

pero,

¿si es una característica de ajax no modificar el scroll, entonces, identificas tu alguna causa en mi código para que se mueva al principio de la página? o cual sería una razón común para ello?.

Gracias por tu ayda

Por laloto

11 de clabLevel



Genero:Masculino  

msie8
Citar            
MensajeEscrito el 30 Nov 2010 06:24 am
¿Estás lanzando la función mediante un enlace?.. o cuando/como llamas a la función showSearch() en tu documento?..

Por ivanfc0o

Claber

391 de clabLevel

3 tutoriales

Genero:Masculino  

Hardcore UI

chrome
Citar            
MensajeEscrito el 30 Nov 2010 12:29 pm
Lo que deberías hacer es pasarnos la página donde dices que pasa eso porque el código que has puesto hasta ahora no genera una página con el tamaño suficiente como para que haya scroll. La verdad es que no alcanzo a entender cuál es el problema.

Por DriverOp

Claber

2510 de clabLevel



 

opera

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.