Cargar paginas mediante ajax Cargar paginas mediante ajax
Cargar paginas mediante ajax
Página 1 de 2 12 ÚltimoÚltimo
Mostrando resultados del 1 al 10 de 18
  1. #1
    Cargar paginas mediante ajax
    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í

    Código 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?

  2. #2
    Registro
    23-enero-2015
    Ubicación
    location("Venezuela");
    Edad
    24
    Mensajes
    272
    no voy entrar en detalles pero no uses load mejor:

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

  3. #3
    Vale, lo he puesto así:

    Código 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?

  4. #4
    Registro
    07-diciembre-2016
    Ubicación
    Lima - Perú
    Edad
    29
    Mensajes
    175
    ¿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?

  5. #5
    No, la verdad que no es necesario, e intentado traer solo el div #container, que este es el principal, de esta forma:

    Código HTML:
    $("#container").show(300).html(data+ "#container");
    pero no funciona.

    Sabes como debo hacerlo?

  6. #6
    Registro
    07-diciembre-2016
    Ubicación
    Lima - Perú
    Edad
    29
    Mensajes
    175
    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..

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

    Código 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

    Código 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

    Código 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?

  8. #8
    Registro
    07-diciembre-2016
    Ubicación
    Lima - Perú
    Edad
    29
    Mensajes
    175
    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

  9. #9
    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?

  10. #10
    me sumo a la espera.

Página 1 de 2 12 ÚltimoÚltimo

Temas similares

  1. Como cargar contenido via ajax?
    Pues ya no s el tiempo que llevo buscando la forma de como agregar contenido por ajax en wordpres, e visto distintos tutoriales en español e ingles...
    Respuestas: 6
    Último mensaje: 04-oct-2016
  2. Acceso mediante AJAX - WP AJAX Login and Register, nuevo plugin
    Un nuevo plugin que te permitirá acceder a la zona de registro y login de WordPress a través del sistema AJAX (un sistema ligero de carga). ...
    Respuestas: 0
    Último mensaje: 25-mar-2016
  3. Pasar file a php mediante AJAX
    Buenas, en un formulario con un campo tipo file y varios text, necesito enviarlo mediante AJAX a un php. Vi algunos plugins jquery, pero...
    Respuestas: 0
    Último mensaje: 06-nov-2011
  4. paginar Noticias CMS mediante ajax
    Hola, estoy interesado en saber como se podria hacer una paginacion ajax de la pagina principal en el CMS de vbulletin. Si me pudieran indicar...
    Respuestas: 2
    Último mensaje: 24-feb-2010

Normas de publicación

  • No puedes crear nuevos temas
  • No puedes responder mensajes
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •