Anónimo
Cargar varios div
Me gustaría saber como podría cargar varios div, estoy probando pero se queda el archivo loading cargando pero no carga, pero carga el segundo getdata. Cargando un solo div sale estupendamente, pero con dos ya no
este es mi código
[PHP]
// here we define global variable
var ajaxdestination="";
function getdata(what,where) { // get data from source (what)
try {
xmlhttp = window.XMLHttpRequest?new XMLHttpRequest():
new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) { /* do nothing */ }
document.getElementById(where).innerHTML ="
<div class='preload'><center><img src='imagenesfondo/ajax-loader.gif'></center></div>
";
// We are defining the destination DIV id, must be stored in global variable (ajaxdestination)
ajaxdestination=where;
xmlhttp.onreadystatechange = triggered; // when request finished, call the function to put result to destination DIV
xmlhttp.open("GET", what);
xmlhttp.send(null);
return false;
}
function triggered() { // put data returned by requested URL to selected DIV
if (xmlhttp.readyState == 4) if (xmlhttp.status == 200)
document.getElementById(ajaxdestination).innerHTML =xmlhttp.responseText;
}
[/PHP]
Y este es el enlace de como intento cargar varios div
[PHP]
<a href="javascript:void(0);" onclick="getdata('principal.html','contenidoarriba');getdata('principalservicios.html','contenidolateralderecho');" target="_top">Inicio</a>
[/PHP]
Como ves llamo dos veces getdata pero solo carga la página principalservicios.html, porque principal.html se queda con mensaje de cargando a ver si
saludos y
este es mi código
[PHP]
// here we define global variable
var ajaxdestination="";
function getdata(what,where) { // get data from source (what)
try {
xmlhttp = window.XMLHttpRequest?new XMLHttpRequest():
new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) { /* do nothing */ }
document.getElementById(where).innerHTML ="
<div class='preload'><center><img src='imagenesfondo/ajax-loader.gif'></center></div>
";
// We are defining the destination DIV id, must be stored in global variable (ajaxdestination)
ajaxdestination=where;
xmlhttp.onreadystatechange = triggered; // when request finished, call the function to put result to destination DIV
xmlhttp.open("GET", what);
xmlhttp.send(null);
return false;
}
function triggered() { // put data returned by requested URL to selected DIV
if (xmlhttp.readyState == 4) if (xmlhttp.status == 200)
document.getElementById(ajaxdestination).innerHTML =xmlhttp.responseText;
}
[/PHP]
Y este es el enlace de como intento cargar varios div
[PHP]
<a href="javascript:void(0);" onclick="getdata('principal.html','contenidoarriba');getdata('principalservicios.html','contenidolateralderecho');" target="_top">Inicio</a>
[/PHP]
Como ves llamo dos veces getdata pero solo carga la página principalservicios.html, porque principal.html se queda con mensaje de cargando a ver si
saludos y
2 respuestas
Respuesta de tnathos
1
Mmm no se pero por que no haces un encadenamiento de los llamados en el js.. es decir..
Llamas "getdata('principal.html') y dentro de getdata en el js haces los llamados a cada uno de los divs que necesitas?
Llamas "getdata('principal.html') y dentro de getdata en el js haces los llamados a cada uno de los divs que necesitas?
Muchas gracias pero he pasado de ese script y estoy probando con jquery
puedo cargar varios divs, pero no consigo solucionar como hago para que salga la imagen de cargando
aquí el código, no se si tu podrás ayudarme
$(document).ready(function() {
$(".disenoweb").click(function(event) {
var imagenCargando = $("
<div class='preload'><center><img src='imagenesfondo/ajax-loader.gif'></center></div>
");///aqui intento antes de cargar los divs que salga la imagen gif de cargando
$("div#contenidoarriba").load('principal.html');
$("div#contenidolateralderecho").load('texto.html');
});
});
puedo cargar varios divs, pero no consigo solucionar como hago para que salga la imagen de cargando
aquí el código, no se si tu podrás ayudarme
$(document).ready(function() {
$(".disenoweb").click(function(event) {
var imagenCargando = $("
<div class='preload'><center><img src='imagenesfondo/ajax-loader.gif'></center></div>
");///aqui intento antes de cargar los divs que salga la imagen gif de cargando
$("div#contenidoarriba").load('principal.html');
$("div#contenidolateralderecho").load('texto.html');
});
});
Mmmm yo uso jquery y no lo hago así..
Lo que hago es en un div colocar la imagen de loading.. y hacer un display por medio del css cuando inicia el proceso y cuando termina..
Mira..
function enviar_amigo_m()
{
muestro imagen de carga
$("#img_procesa_m").css({'display':'block'});
$.ajax({
Type: "POST",
url: "función php",
cache: false,
data: "variables,
success: function(msg){
oculto imagen de carga
$("#img_procesa_m").css({'display':'none'});
}
});
}
Lo que hago es en un div colocar la imagen de loading.. y hacer un display por medio del css cuando inicia el proceso y cuando termina..
Mira..
function enviar_amigo_m()
{
muestro imagen de carga
$("#img_procesa_m").css({'display':'block'});
$.ajax({
Type: "POST",
url: "función php",
cache: false,
data: "variables,
success: function(msg){
oculto imagen de carga
$("#img_procesa_m").css({'display':'none'});
}
});
}
Aunque no lo resuelto todavía, porque me da error, creo que al final, con la idea que me has dado ya puedo buscar por internet, gracias
Si no lo soluciono te pego el toque, muchas gracias
Por tu atención
Saludos
Si no lo soluciono te pego el toque, muchas gracias
Por tu atención
Saludos
Respuesta de krlosnow
1
Eso te está pasando porque estás usando la misma variable global "ajaxdestination" para controlar el div destino de las dos llamadas. Si quieres que te funcione, prueba con lo siguiente: no uses la variable global, y en vez de eso, pasa parámetros a la función triggered():
xmlhttp.onreadystatechange = function(){triggered(xmlhttp, where);}
...y modifica la función:
function triggered(ajaxcall, ajaxtarget){
if (ajaxcall.readyState==4 && ajaxcall.status==200)
document.getElementById(ajaxtarget).innerHTML =ajaxcall.responseText;
}
De todas formas, yo para ajax (y otras muchas cosas más) uso jquery, que es una librería javascript que te facilita mucho la vida con estas cosas. Te recomiendo que le eches un vistazo. Busca en google "jquery ajax" y sigue algún tutorial básico. 100% recomendable.
xmlhttp.onreadystatechange = function(){triggered(xmlhttp, where);}
...y modifica la función:
function triggered(ajaxcall, ajaxtarget){
if (ajaxcall.readyState==4 && ajaxcall.status==200)
document.getElementById(ajaxtarget).innerHTML =ajaxcall.responseText;
}
De todas formas, yo para ajax (y otras muchas cosas más) uso jquery, que es una librería javascript que te facilita mucho la vida con estas cosas. Te recomiendo que le eches un vistazo. Busca en google "jquery ajax" y sigue algún tutorial básico. 100% recomendable.
Muchas gracias, pero se queda con la imagen de preload cargando, y no termina de cargar el contenido, de todas formas he tenido que quitar el código css que habías puesto ya que me salia error en el dreamweaver,,
La verdad es que voy a buscar lo que dices pero si conoces algún enlace donde lo expliquen te lo agradecería muchísimo
Saludos
La verdad es que voy a buscar lo que dices pero si conoces algún enlace donde lo expliquen te lo agradecería muchísimo
Saludos
Perdón por el span que se ha colado. El editor este de todoexpertos a veces mete cosas raras cuando hago copy-paste.
Respecto a jquery, te paso unos enlaces que te pueden ser de interés:
Tutorial básico de jquery: este es muy bueno. Te da una visión general de qué es jquery y cómo se usa. Entre otras cosas explica la función ajax() y load() de jquery, que es lo que te interesa ahora.
El método load de jquery : este tutorial se centra en la función load.
Respecto a jquery, te paso unos enlaces que te pueden ser de interés:
Tutorial básico de jquery: este es muy bueno. Te da una visión general de qué es jquery y cómo se usa. Entre otras cosas explica la función ajax() y load() de jquery, que es lo que te interesa ahora.
El método load de jquery : este tutorial se centra en la función load.
Muchísimas gracias, pero estoy probando con el framework jquery y el ejemplo que tu me has puesto, pero en el ejemplo que hay en la página es con un botón pero yo lo quiero hacer con un enlace y estoy probando esto
<script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script>
///////////////
Y esta es la función para intentar cargar dos divs
$(document).ready(function() {
$(".disenoweb").click(function(event) {
$(".contenidoarriba").load('principal.html');
$(".contenidolateralderecho").load('principalservicios.html');
});
});
//////////////////////////////
Y este el enlace
<a href="#" class="disenoweb">Diseño Web</a>
<script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script>
///////////////
Y esta es la función para intentar cargar dos divs
$(document).ready(function() {
$(".disenoweb").click(function(event) {
$(".contenidoarriba").load('principal.html');
$(".contenidolateralderecho").load('principalservicios.html');
});
});
//////////////////////////////
Y este el enlace
<a href="#" class="disenoweb">Diseño Web</a>
Lo acabo de arreglar con esto
$(document).ready(function() {
$(".disenoweb").click(function(event) {
$("div#contenidoarriba").load('principal.html');
$("div#contenidolateralderecho").load('texto.html');
});
});
Perdona una cosa más por favor, como haría para que salga la imagen de cargando como hacia
yo en mi script
//////////
<div class='preload'><center><img src='imagenesfondo/ajax-loader.gif'></center></div>
$(document).ready(function() {
$(".disenoweb").click(function(event) {
$("div#contenidoarriba").load('principal.html');
$("div#contenidolateralderecho").load('texto.html');
});
});
Perdona una cosa más por favor, como haría para que salga la imagen de cargando como hacia
yo en mi script
//////////
<div class='preload'><center><img src='imagenesfondo/ajax-loader.gif'></center></div>
antes de invocar a los load(), mete estas líneas:
//Con esto, creamos un elemento jquery a partir de un código html
var imagenCargando = $("
<div class='preload'><center><img src='imagenesfondo/ajax-loader.gif'></center></div>
");
//Creo clones del elemento creado para insertarlos dentro de los divs
$("div#contenidoarriba").append(imagenCargando.clone());
$("div#contenidolateralderecho").append(imagenCargando.clone());
//Con esto, creamos un elemento jquery a partir de un código html
var imagenCargando = $("
<div class='preload'><center><img src='imagenesfondo/ajax-loader.gif'></center></div>
");
//Creo clones del elemento creado para insertarlos dentro de los divs
$("div#contenidoarriba").append(imagenCargando.clone());
$("div#contenidolateralderecho").append(imagenCargando.clone());
Muchas gracias de nuevo, pero no sale la imagen de cargando, no se que puede ser,
haber si terminamos de solucionarlo y me das una alegría buena
haber si terminamos de solucionarlo y me das una alegría buena
Prueba con un texto simplón del tipo "Cargando..." en vez de la imagen. Si sale el texto y la imagen no, es que no encuentra la imagen por alguna razón, o bien el estilo "preload" tiene algo raro.
Sera porque carga demasiado rapido o yo quese, o tengo que poner la variable imagenCargando en algún lado
Para ver si se mete bien la imagen, comenta temporalmente el load(). Si la imagen sale, es que carga tan rápido que no da tiempo a que se vea (mejor, ¿no?)