Agregar Imágenes Al Final

horape · #1 (**permalink**) 17/09/2009, 19:01

hola, soy nuevo en Ajax y estoy tratando de pedirle imagenes al server e ir agregándolas abajo en el documento. Por ahora tengo esto

Código javascript:

Ver original<html>
  <head>
  <title>An Ajax example</title>
  <script type="text/JavaScript" src="/prototype.js"></script>
  <script language = "javascript">
    var XMLHttpRequestObject = false;
    if (window.XMLHttpRequest) {
      XMLHttpRequestObject = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
      XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
    }
    function getData(dataSource, divID) {
      if(XMLHttpRequestObject) {
        var obj = $(divID);
        XMLHttpRequestObject.open("GET", dataSource);
        XMLHttpRequestObject.onreadystatechange = function() {
          if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
            obj.innerHTML = XMLHttpRequestObject.responseText;
          }
        }
        XMLHttpRequestObject.send(null);
      }
    }
    </script>
  </head>
  <body>
    <h1>Ajax</h1>
    <form>
      <input type = "button" value = "Mostrar!"
      onclick = "getData('/data.php', 'targetDiv')">
    </form>
    <div id="targetDiv">
      Ac&#225; las im&#225;genes.
    </div>
  </body>
</html>

Código php:

Ver original<?php 
    echo "<img src='/img1.jpg'/>";
    echo "<img src='/img2.jpg'/>";
    echo "<img src='/img3.jpg'/>";  
?>

Así como está funciona, pero yo lo que quiero es que si sigo apretando el botón, las imagenes en vez volver a aparecer en el mismo lugar (que es lo que supongo q pasa), se sigan sumando abajo. O sea aprieto el boton y aparecen 3 imagenes, vuelvo a apretar y quiero q aparezcan 3 más, o sea 6 en total (para ir variando las imagenes yo me las arreglo con php, hagan de cuenta q son imagenes distintas cada vez)
Estuve viendo que habia un metodo appendChild y otro insertAdjacentHTML, pero no logro entender como hacerlos funcionar.
Tampoco se si mandar directo el texto <img../> es lo mejor, o si conviene hacer createElement("img") que es otro metodo que por ahi vi que existia. Si es por mi prefiero la primer forma, ya que ya viene todo hecho desde el .php.

Ah y ya que estamos, como me conviene hacer para que el evento en vez de ser "apretar el boton" sea "cuando scrollea hasta abajo" ?? Intenté con:

Código javascript:

Ver originalwindow.onscroll = function () {
    getData("/data.php",targetDiv);
}

pero no logré que hiciera nada.

Saludos!

pd: metí el prototype ya q estaba, para ir probando.

echevemaster · #2 (**permalink**) 29/09/2009, 02:46

Jquery te hace la vida más facil con los append en cualquier elemento html, pruebalo