Autor Tema: [SOLUCIONADO] Cargar contenido en AJAX con mensaje de "cargando"  (Leído 2509 veces)

Desconectado maska

  • PHPer@ Fijo
  • ***
  • Mensajes: 126
  • Karma: 2
  • Nuev@ PHPer@
    • Ver Perfil
[SOLUCIONADO] Cargar contenido en AJAX con mensaje de "cargando"
« en: 15 de Enero de 2013, 14:47:26 pm »
Hola. Tengo este script y me funciona correctamente.

Código: [Seleccionar]
<script type="text/javascript">
$(document).ready(function() {   
$('#noticias').click(function(){
// Mostrar cargador.
$('#cargadorPagina').css({display:'block'});

var page = $(this).attr('data');       
var dataString = 'page='+page;

$.ajax({
type: "POST",
url: "2.php",
data: dataString,
success: function(data) {
// Ocultar cargador. Y mostrar contenido.
$('#cargadorPagina').css({display:'none'});
$('#cargadorContenido').fadeIn(1000).html(data);
}
});
});             
});   
</script>

Pero ese código es para una sola id, llamada "noticias". Y lo que intento es usar ese código siempre para cargar los diferentes contenidos. La pregunta es la siguiente. ¿Hay alguna forma de detectar en qué botón estoy pulsando para que saque la id del botón presionado?

Gracias.
« Última modificación: 15 de Enero de 2013, 21:59:46 pm por maska »

Comunidad PHPeros

[SOLUCIONADO] Cargar contenido en AJAX con mensaje de "cargando"
« en: 15 de Enero de 2013, 14:47:26 pm »

Desconectado Mixvice

  • PHPero Experto
  • *****
  • Mensajes: 687
  • Karma: 32
  • Sexo: Masculino
  • ¡Y Tu Papá Tambien!
    • Ver Perfil
    • Tuhabbo
Re:[PREGUNTA] Cargar contenido en AJAX con mensaje de "cargando"
« Respuesta #1 en: 15 de Enero de 2013, 20:03:49 pm »
Código: [Seleccionar]
$(".myclass").each(function(){

    var link = $(this);

    var href = link.attr("href");

    link.click(function(){

        $("#destino_de_carga").fadeOut("slow").load(href).fadeIn("fast");

        return false;

    });

Solo agrega un enlace y una class:

Código: [Seleccionar]
<a href="mi_web_a_cargar.php" class="myclass">Clic para refrescar</a>
Y jQuery hará la carga dinamica en el div que tenga como ID "destino_de_carga" y en caso de no existir la pagina, simplemente no pasa nada, además de que agregas compatibilidad a los navegadores que no soportan javascript, aunque en estos tiempos sean muy pocos
« Última modificación: 15 de Enero de 2013, 20:05:29 pm por Mixvice »

Desconectado maska

  • PHPer@ Fijo
  • ***
  • Mensajes: 126
  • Karma: 2
  • Nuev@ PHPer@
    • Ver Perfil
Re:[PREGUNTA] Cargar contenido en AJAX con mensaje de "cargando"
« Respuesta #2 en: 15 de Enero de 2013, 21:59:25 pm »
Código: [Seleccionar]
$(".myclass").each(function(){

    var link = $(this);

    var href = link.attr("href");

    link.click(function(){

        $("#destino_de_carga").fadeOut("slow").load(href).fadeIn("fast");

        return false;

    });

Solo agrega un enlace y una class:

Código: [Seleccionar]
<a href="mi_web_a_cargar.php" class="myclass">Clic para refrescar</a>
Y jQuery hará la carga dinamica en el div que tenga como ID "destino_de_carga" y en caso de no existir la pagina, simplemente no pasa nada, además de que agregas compatibilidad a los navegadores que no soportan javascript, aunque en estos tiempos sean muy pocos

Gracias amigo, por tu pronta respuesta. He intentado sacar un código mejor...
Lo posteo para que le sirva a alguien.

Este código es más completo ya que notifica si no se encontró el archivo con un mensaje de error. Por lo demás, es parecido al anterior que escribí. Cuando se hace un click aparece una imagen de cargando y cuando presenta el contenido en el div deseado, dicha imagen la oculta mediante un "display:none;". Espero ayudar.

Código: [Seleccionar]
<script type="text/javascript">
$(document).ready(function() {
// Cargar por defecto la primera página.
$('#content').fadeOut('slow', function(){
$('#content').load('1.php', function(){
$('#content').fadeIn('slow');
});
});
});
// ##########################################################
// ##########################################################
// ##########################################################
$(function(){
// Coge la referencia del div para cargar el contenido en él.
var jContent = $( "#content" );

// AL hacer click en el enlace se obtendrá el href.
$("a").click(function(objEvent){
var jLink = $(this);

$("#ajax-status").css({display:"block"});

// Ajax sirve la respuesta.
$.ajax({
// El link dónde estamos accediendo.
url: jLink.attr("href"),

// El tipo de respuesta.
type: "get",

// El tipo de dato al que retorna.
dataType: "html",

error: function(){
ShowStatus("");

// Mensaje de error.
jContent.html("<p>Error 404. Página no encontrada.</p>");
alert("Error 404. Página no encontrada.");

// Ocultar loader.
$("#ajax-status").css({display:"none"});
},

beforeSend: function(){
ShowStatus("");
},

complete: function(){
ShowStatus("");
},

success: function(strData){
ShowStatus("");

// Cargar el contenido en la página a mostrar.
jContent.html(strData);

// Ocultar loader.
$("#ajax-status").css({display:"none"});
}
});
// Evitar click por defecto.
return(false);
});
});
// ##########################################################
// ##########################################################
// ##########################################################
// Muestra el estado en la pantalla
function ShowStatus(strStatus){
var jStatusList = $("#ajax-status");

// Prepend the paragraph.
jStatusList.prepend("" + strStatus + "");
}
</script>
« Última modificación: 15 de Enero de 2013, 22:01:10 pm por maska »