Problema al intentar cargar contenido en un div con AJAX

Iniciado por monsefoster, 1 Mayo 2011, 03:15 AM

0 Miembros y 2 Visitantes están viendo este tema.

monsefoster

Buenas, he tratado de implementar un script que encontre en internet sobre como hacer esto.
El script es el siguiente:
Código (javascript) [Seleccionar]
function Carga(url,id)
{
//Creamos un objeto dependiendo del navegador
var objeto;
if (window.XMLHttpRequest)
{
//Mozilla, Safari, etc
objeto = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
//Nuestro querido IE
try {
objeto = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try { //Version mas antigua
objeto = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!objeto)
{
alert("No ha sido posible crear un objeto de XMLHttpRequest");
}
//Cuando XMLHttpRequest cambie de estado, ejecutamos esta funcion
objeto.onreadystatechange=function()
{
cargarobjeto(objeto,id)
}
objeto.open('GET', url, true) // indicamos con el método open la url a cargar de manera asíncrona
objeto.send(null) // Enviamos los datos con el metodo send
}
function cargarobjeto(objeto, id)
{
if (objeto.readyState == 4) //si se ha cargado completamente
document.getElementById(id).innerHTML=objeto.responseText
else //en caso contrario, mostramos un gif simulando una precarga
document.getElementById(id).innerHTML='<img src="images/extras/loading.gif" alt="Loading" />'
}


La idea es que cambie el contenido del div en cuanto se presione un boton...
Creo que el problema esta en mi codigo HTML.

Código (html4strict) [Seleccionar]
<li>
    <a href="javascript:Carga(texto11.html, cont);">
      <img src="css/img/btn.png" />
    </a>
  </li>

El texto del index es predeterminado, y creo que alli esta el problema?
Código (html4strict) [Seleccionar]
<div id="cont">
<br>
<h2>Welcome</h2>
<p>TEXTO</p>
</div>


Si pudieran ayudarme, seria genial. NOTA: Tengo servidor instalado, el xampp y ademas, subi la pagina web a un servidor privado y aun no funciona, tambien importe el archivo .js donde se encuentra el script de arriba.

merolhack

Hola, deberias intentar usar un plugin de firefox llamado Firebug, ahi te vas a dar cuenta de los errores que surgen al ver la página y ejecutar los scripts, por ejemplo, cuando das clic a un enlace.

Por otro lado, puedes usar jQuery para hacer lo mismo mira el método LOAD:
http://api.jquery.com/load/

Ve este ejemplo, es lo que quieres hacer:
http://www.webintenta.com/Files/Images/v10/jQueryAjax/Ejemplo1.html

Fuente: http://www.webintenta.com/Ajax-con-jQuery-el-metodo-load.html
PHP Web Developer
Joomla, jQuery, MySQL, CSS, etc...

Android APP Developer http://android-dev.tumblr.com/

Spider-Net

Código (javascript) [Seleccionar]
<li>
    <a href="javascript:Carga('texto11.html', 'cont');">
      <img src="css/img/btn.png" />
    </a>
  </li>


Usa las comillas simples o dobles cuando pases cadenas como parámetro en javascript, sino tomará los textos como variables y por eso así nunca funcionará.

Shell Root

Y de igual forma como lo dijo @, se puede hacer mucho más fácil con JQuery. Por ejemplo,
Código (html4strict) [Seleccionar]
    <b>URL:</b> <input type = "text" id = "txtURL" value = "" /><br/>
    <b>DIV:</b> <input type = "text" id = "txtDIV" value = "divRequest" /><br/>
    <input type = "button" id = "btnSend" value = "Send request" />

    <br/><br/><br/>
    <b>Successful Response (should be blank):</b>
    <div id = "divRequest"></div>
    <b>Error Response:</b>
    <div id = "errorRequest"></div>


Código (javascript) [Seleccionar]
$(document).ready( function(){
 var objButton = $("#btnSend");
 objButton.click( requestPOST );
});

function requestPOST(){
 var objURL = $("#txtURL").val();
 var objDIV = $("#txtDIV").val();
 $("#" + objDIV).load( objURL, function( sResponse, sStatus, xhr) {
   if( sStatus == "error" ){
     var sMSG = "<b>Sorry but there was an error: </b>";
     $("#errorRequest").html( sMSG + xhr.status + " " + xhr.statusText );
   }
 });
}
Por eso no duermo, por si tras mi ventana hay un cuervo. Cuelgo de hilos sueltos sabiendo que hay veneno en el aire.

Spider-Net

Yo creo que con jQuery es más sencillo hacerlo así:

Código (html4strict) [Seleccionar]
<li>
    <a href="javascript:$('#cont').load('texto11.html');">
      <img src="css/img/btn.png" />
    </a>
</li>

monsefoster

Muchisimas Gracias Muchach@s, probaré lo que me dicen.   :rolleyes:

monsefoster

Bueno, gracias a uds, he podido arreglar el problema con ajax, la cosa es que he notado que no se actualiza el URL. Hay alguna manera de hacer eso? El metodo con jQuery lo hace?  :huh: