Como buscar info sobre ejecucion de ajax dinamico?

LhaN · #1 (**permalink**) 18/01/2012, 11:53

Buenas gente, necesito realizar algo pero no se ni siquiera si tiene un nombre o si se puede. Lo mejor que se me vino a la cabeza es ajax dinamico.

Lo que tengo que hacer es lo siguiente:
Hay un index.html que via ajax (con jquery) en el onload carga el contenido del body. Pero el contenido del body es una plantilla (o layout), tiene toda la estructura de la pagina, pero nada de contenido, luego de cargar este layout, necesito cargar la informacion tambien via ajax, pero la informacion depende del layout, me explico?

Tiene nombre esto? se puede hacer? algun camino que deba tomar?

Gracias desde ya.

dubafek · #2 (**permalink**) 18/01/2012, 18:06

Busca sobre Backbone.js

ocesitaro · #3 (**permalink**) 18/01/2012, 21:52

bueno creo que es algo como esto:
supongamos que esto esta en el index
$(document).ready(function(){
$('#divbody').load('plantilla.html',function(){
$('#divuno').load('seccion1.html');//este div divuno esta en la plantilla y en esta funcion de la linea de arriba le indicamos que cuando ya haya cargadom la platilla , recien que cargue el contenido por partes
$('#divdos').load('seccion2.html');//este div divdos esta en la plantilla
$('#divtres').load('seccion3.html');//este div divtres esta en la plantilla
})
})

load es el ajax simplificado de jquery.

LhaN · #4 (**permalink**) 19/01/2012, 11:45

A ver, en realidad lo que yo quisiera hacer es lo siguiente:
Tengo un index.php

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test!</title>
    <script src="../jquery-1.7.1.min.js" type="text/javascript"></script>
    <script>
        $(document).ready(function(){
            alert("Cargando Body");
            $('body').load('plantilla.php div#layout');
            alert("Se cargo Body");
        });
    </script>
</head>
<body id="body">
</body>
</html>

Tengo un plantilla.php

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test!</title>
    <script src="../jquery-1.7.1.min.js" type="text/javascript"></script>
</head>
<body id="body">
    <div id="layout">
    <script>
        $(document).ready(function(){
            alert("Cargando Plantilla");
            $('div#menu').load('menu.php div#menu');
            $('div#galeria').load('galeria.php div#galeria');
            alert("Se cargo Plantilla");
        });
    </script>
    <div id="menu"></div>
    <div id="galeria"></div>
    </div>
</body>
</html>

Tengo un menu.php

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test!</title>
</head>
<body id="body">
    <div id="menu">
        <p>link1</p>
        <p>link2</p>
        <p>link3</p>
    </div>
</body>
</html>

Y finalmente un galeria.php

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test!</title>
</head>
<body id="body">
    <div id="galeria">
        <div id="imagen">Aca va una imagen</div>
        <div id="descripcion">Aca va la descripcion</div>
    </div>
</body>
</html>

Obviamente esto no funciona, muestra los dos carteles de cargando body y se cargo body, pero la pagina esta en blanco. Mi idea es trabajar por separado las cosas y a la hora de juntarlas no tener que "adaptarlas" de ninguna manera. Y que se puedan probar individualmente.

Si yo entro a plantilla.php anda todo joya. Lo que yo necesito es via ajax cargar otro ajax (creo que es esto lo que estoy queriendo hacer) y ejecutarlo basicamente. En este caso con jquery hice eso, no se si con jquery o simplemente con javascript puedo hacer lo que necesito.

Gracias por las respuestas.

ocesitaro · #5 (**permalink**) 19/01/2012, 23:36

Cita:

Iniciado por LhaN

<div id="layout">
<script>
$(document).ready(function(){
alert("Cargando Plantilla");
$('div#menu').load('menu.php div#menu');
$('div#galeria').load('galeria.php div#galeria');
alert("Se cargo Plantilla");
});
</script>
<div id="menu"></div>
<div id="galeria"></div>
</div>

no entiendo .load('menu.php div#menu');
porque no usas algo como esto.
$('#idelemento').load('tupagina.php')

en tu pagina de menu no le encuentro la necesidad de volver a copiar todo el head del html

LhaN · #6 (**permalink**) 20/01/2012, 10:52

Use menu por usar algo...
load('menu.php div#menu'); lo que hace es cargar solo el o los elementos div con id=menu.