Problema al cargar páginas Wordpress via Ajax

Juanjo87 · 6 Ene 2017

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?

jsstoni · 6 Ene 2017

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);
  }
});

Juanjo87 · 7 Ene 2017

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?

denzel · 7 Ene 2017

¿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?

Juanjo87 · 7 Ene 2017

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?

denzel · 7 Ene 2017

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..

Juanjo87 · 7 Ene 2017

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?

denzel · 7 Ene 2017

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

Juanjo87 · 7 Ene 2017

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?

Ecoteva · 7 Ene 2017

me sumo a la espera.

denzel · 8 Ene 2017

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?

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.

Juanjo87 · 9 Ene 2017

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

denzel · 9 Ene 2017

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.

Juanjo87 · 9 Ene 2017

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?

sevilla666 · 11 Ene 2017

juanjofurtado dijo:
pues no me entero...

,load() esta obsoleto desde jquery 1.8,

denzel dijo:
son MUCHAS cosas que explicar, te sugiero que sigas este tuto ajax en wordpress

Tienes que empaparte mas manual de WP.

denzel · 11 Ene 2017

sevilla666 dijo:
Tienes que empaparte mas manual de WP.

¿A qué te refieres?

sevilla666 · 11 Ene 2017

denzel dijo:
¿A qué te refieres?

Perdona si hay mal entendido.
me refiero a que tienes razón tú Denzel. Juanjofurtado tiene que empapar mas manual de WP,

Juanjo87 · 11 Ene 2017

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

Problema al cargar páginas Wordpress via Ajax

Juanjo87

jsstoni

Juanjo87

denzel

Juanjo87

denzel

Juanjo87

denzel

Juanjo87

Ecoteva

denzel

Juanjo87

denzel

Juanjo87

sevilla666

denzel

sevilla666

Juanjo87

Temas similares