Problema al cargar páginas Wordpress via Ajax

  • Autor Autor Juanjo87
  • Fecha de inicio Fecha de inicio
J

Juanjo87

Gamma
Diseñador
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Buena comunidad.
Resulta que llevo mucho tiempo intentando cargar las paginas de wordpress en mi plantilla mediante ajax, pero no consigo la mejor forma.
Actualmente estoy cargando las paginas así

PHP: 
<script>

var isIndex = true;
 
$(document).ready(function(){
    $(".a_img_carousel").click(function(event){   //Para todos los enlaces
        event.preventDefault();     //Prevenimos su comportamiento habitual
 
        //Cambiamos la dirección de la barra del navegador
        history.pushState(null, "", $(this).attr("href"));
 
        //Cargamos con Ajax la página
        loadPage($(this).attr("href"));
    });
 
    //Para que carge cuando retrocedemos en el historial. Con el condicional
    // se evita que el popstate salte la primera vez que entramos en la página
    $(window).bind("popstate", function () {
     
            loadPage(location.href);
        
       
    });
});
 
//Funcion de carga de Ajax. Se suponone que:
// - #container está visible y es donde cargamos la página
// - #loading está invisible y tiene alguna animación para esperar la carga
// Se podría simplificar por $("#container").load(url);
function loadPage(url){
    $("body").hide(300);
    $("#loading").show(300);
 
    $("body").load(url+"#head_background", function(){
        $("#loading").hide(300);
        $("body").show(300);
    });
}


	</script>

parece que funciona bien, o al menos eso parece, pero me aparece un error en la consola del chrome:

jquery.min.js:4 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

Que estoy haciendo mal?
 
no voy entrar en detalles pero no uses load mejor:

HTML: 
$.ajax({
  type : 'GET',
  url : url,
  success : function(data) {
    $("#loading").hide(300);
    $("body").show(300).html(data);
  }
});
 
Vale, lo he puesto así:

PHP: 
	<script>
	var isIndex = true;
 
$(document).ready(function(){
    $(".a_img_carousel").click(function(event){  
        event.preventDefault();  
 
       
        history.pushState(null, "", $(this).attr("href"));
 
     
        loadPage($(this).attr("href"));
    });
 
  
    $(window).bind("popstate", function () {
        if (!isIndex){
            loadPage(location.href);
        }else{
            isIndex = false;
        }
    });
});
 

function loadPage(url){
   $.ajax({
  type : 'GET',
  url : url,
  success : function(data) {
    $("#loading").hide(300);
    $("body").show(300).html(data);
  }
});
}
	

	
	</script>

Funciona pero sigue tirándome el mismo error.
Tendría que pasar esto por el admin-ajax?
 
¿Seguro que necesitas traer todo el html de la página en cuestión? ¿No es más practico traer solo el contenido de esa página?
 
No, la verdad que no es necesario, e intentado traer solo el div #container, que este es el principal, de esta forma:

HTML: 
$("#container").show(300).html(data+ "#container");

pero no funciona.

Sabes como debo hacerlo?
 
Si sé como debes hacerlo pero en realidad son MUCHAS cosas que explicar, te sugiero que sigas este tuto ajax en wordpress y cualquier cosa que no entiendas preguntas nomás..
 
Vale, tengo otra forma de cargar en wordpress mediante ajax. Creo que el tutorial que me as pasado es a esto lo que se refiere. Seria de esta manera,

en function.php

PHP: 
<?php
function mostrar_ajax() {
    if ( ! is_numeric( $_POST['post_id']))
        die("Wrong ID!");
    $_POST['post_id'] = abs(intval($_POST['post_id']));
    if ( ! $_POST['post_id'] )
        die("Wrong ID!");
    if(isset($_POST['post_id'])){
        global $post;
        $post =  get_post($_POST['post_id']);
        if ($post!=null){
            setup_postdata($post);
            //Aqui lo que quiero mostrar
            ?>
		
<div>esto se muestra</div>
			
            <?php
        }
    }
    die();
}

add_action('wp_ajax_mostrar_ajax', 'mostrar_ajax');
add_action('wp_ajax_nopriv_mostrar_ajax', 'mostrar_ajax');
?>

el .js seria algo asi

PHP: 
<script type="text/javascript">
function showFicha_ajax(id){
	  
	$("#destino-ajax").html("<div id='load-ajax'>loading...</div>");		
	
	jQuery.post(
		"/exytum/wp-admin/admin-ajax.php", 
		{
		    'action': 'mostrar_ajax',
		    'post_id':   id
		}, 
		
	    function(response){
            
			    $("#destino-ajax").html(response);
		
		       
 
	
	    }
	);
}

</script>

y lo llamo asi

PHP: 
<a  id="tittle-panel_<?php echo $post->post_title; ?>" href="#destino-ajax" onclick="showFicha_ajax('<?php echo $post->ID;?>','mostrar_ajax','#destino-ajax'); return false;" >
AQUI
</a>

Lo que pasa que con ese código, consigo cargar el contenido que escribo en el funtion.php pero no se como hacerlo para cargar parte de una pagina.

Voy en la dirección correcta?
 
Así es, ese es el camino, ahora revisa la documentación de wordpress. Cuando estas usando ajax en el entorno que te ofrece wordpress puedes usar cualquiera de sus funciones:

  • the_tittle: para obtener el título
  • the_content : para el contenido
  • get_post_meta: para recuperar campos personalizados
  • etc
 
creo que no hablamos de lo mismo

- - - Actualizado - - -

Lo que pretendo hacer, es que carguen todos los enlaces en la misma pagina, sin que se recargue el navegador.

Me puede orientar alguien?
 
me sumo a la espera.
 
juanjofurtado dijo:
creo que no hablamos de lo mismo

- - - Actualizado - - -

Lo que pretendo hacer, es que carguen todos los enlaces en la misma pagina, sin que se recargue el navegador.

Me puede orientar alguien?
Hacer clic para expandir...
Ok, no especifiqué por que supuse que te darías cuenta que dentro de la función php mostrar_ajax() que has creado en functions.php puedes crear una instancia de WP_Query que recupere el contenido de una página usando el id, luego dentro del loop usas las funciones que te mencioné.

Con eso ya tienes acceso a TODO el contenido de una página y sin recargar nada.

Tienes que tener claro como usar WP_Query, qué parámetros pasarle y que funciones usar dentro del loop, etc por eso dije al principio: hay MUCHAS cosas que explicar.
 
Pero así como me dices, denzel, tendría que volver a crear una especie de plantilla para el contenido que llamo desde el function, no es así? corrígeme si me equivoco.
Lo que yo veo en otras web, es que cargan la pagina completa por ajax, la misma pagina, a la que se puede acceder sin utilizar javascript de forma normal. No se si me explico bien, wuaki.com, hace precisamente lo que yo estoy intentando hacer.

Mire:

PHP: 
<script>


	
	
var isIndex = true;
 
$(document).ready(function(){
    $(".a_img_carousel").on('click', function(event){ 
        event.preventDefault();   
 
       
        history.pushState(null, "", $(this).attr("href"));
 
       
        loadPage($(this).attr("href")+' #container');
    });
 
   
    $(window).bind("popstate", function () {
       
            loadPage(location.href + ' #container');
       
       
       
    });
});
 

function loadPage(url){
    $("#container").hide(300);
    $("#loading").show(300);
 
    $("#container").load(url, function(){
        $("#loading").hide(300);
        $("#container").show(300);
		
    });
	
	
}
	
	</script>

De esta forma, consigo cargar el div #container, del enlace con clase a_img_carousel, en el que hago click ,en la pagina que estoy, dentro del div #container y puedo navegar por el historial cambiando la dirección del navegador, es practicamente lo que necesito, y no me tira errores, parece que funciona bien. El único inconveniente, es que los script, "las funciones jquery que tenia funcionando", dejan de funcionar, (carousel, slider...) incluso al darle atrás en el navegador, esta misma función, que hace que me cargue en la misma pagina, también deja de funcionar.

Creo que tengo que volver a llamar a esas funciones para que vuelva a funcionar, y así mismo a todos los script que tengo en el head, pero no se como hacer esto y ni si quiera se si voy bien o no, pues no tiene nada que ver con lo que usted me comento, denzel.

de esta forma e intentado volver a cargar los script, pero no lo veo una forma elegante pues ni si quiera funciona como esperaba, pero funciona

PHP: 
<script>
$.getScript('https://code.jquery.com/ui/1.12.1/jquery-ui.js',function(){
   var carousel = $("#carousel, #carousel_actrs, #carousel-all, #carousel-accion, #carousel-most_popular, #carousel-most_view");
   carousel.owlCarousel();

});	
</script>

He intentado ser lo mas explicito y claro posible, pero aun así les pido disculpa si es mucho y encima no me entienden jaja
 
Última edición:
  • No, no es necesario crear una nueva plantilla, solo copias la estructura que ya tienes en tus páginas, en la función que has creado en functions.php
  • Para que las funciones de javascript funcionen cuando traes objetos de forma asíncrona, tienes que "delegar" esas funciones a un objeto que esté en el DOM durante la carga de la página y después de que has cargado todos los nuevos elementos.
  • El método que te estoy sugiriendo sirve para "recargar" ciertas partes de la web con nuevo contenido que traes del servidor, es decir, solo traes del servidor lo que consideres necesario.
 
Última edición:
pues no me entero...

- - - Actualizado - - -

Alguien puede aportar algo?

- - - Actualizado - - -

He encontrado este tutorial https://stanhub.com/load-wordpress-post-content-with-ajax-and-jquery/

Que hace la llamada asi ajax asi:

PHP: 
<script>
   $(document).ready(function(){
 
        $.ajaxSetup({cache:false});
        $(".post-link").click(function(){
            var post_link = $(this).attr("href");
 
            $("#single-post-container").html("content loading");
            $("#single-post-container").load(post_link);
        return false;
        });
 
    });
</script>

pero me sigue tirando el mismo error:

Synchronous XMLHttpRequest on the main thread is deprecated

como soluciono esto?
 
a ver lo que me dice denzel lo entiendo, pero no se como cargar todos los enlaces de la pagina completa con ese método, algo como lo que hacen los plugins ajaxify o zajax

por ejemplo, con el método que comenta denzel, consigo traerme cualquier contenido de la pagina que desee

PHP: 
<?php
function tooltip_ajax() {
    if ( ! is_numeric( $_POST['post_id']))
        die("Wrong ID!");
    $_POST['post_id'] = abs(intval($_POST['post_id']));
    if ( ! $_POST['post_id'] )
        die("Wrong ID!");
    if(isset($_POST['post_id'])){
        global $post;
        $post =  get_post($_POST['post_id']);
        if ($post!=null){
            setup_postdata($post);
            //Aquí lo que quiero mostrar
            ?>
<?php the_permalink(); ?>
	
            <?php
        }
    }
    die();
}

add_action('wp_ajax_tooltip_ajax', 'tooltip_ajax');
add_action('wp_ajax_nopriv_tooltip_ajax', 'tooltip_ajax');
?>

Pero no es realmente lo que necesito, pues lo que necesito es que se cargue la pagina entera con sus comentarios con su diseño con todo menos el header, aunque si algunos script que este contiene.

La pregunta es, de esa forma, como hago para traerme toda la pagina? conocéis algún tutorial para crear esta función? tengo la cabeza echa un lío y no consigo aclararme?

La verdad que revisando el código del plugins zajax, creo que es algo mas complicado que esto. Pero e encontrado un sitio que contiene bastante información, incluso por un comentario que hay en la web, creo que el plugins zajax salio de ese tuto.
La web esta en francés y con el traductor de google, no consigo entenderlo bien,

Dejo el link por si le podéis echar un vistazo

La navigation avec Ajax : LE guide – BoiteAWeb

Gracias a los dos.

La navigation avec Ajax : LE guide – BoiteAWeb
 
Última edición:
Hay que estar conectado o registrado para responder aquí.

Temas similares

J
Problema al cargar página con Ajax
Respuestas
1
Visitas
273
4ng3r
S
Problema al cargar páginas en sitio web estático
Respuestas
6
Visitas
634
sergiofsd
S
R
Problema al cargar páginas de Facebook
Respuestas
15
Visitas
835
tonydalys
C
Problema al cargar páginas en vBulletin 3.7.3
Respuestas
2
Visitas
2K
canastero
C
Menú
Acceder
Registro