Ver Mensaje Individual
  #1 (permalink)  
Antiguo 19/10/2015, 03:49
JuanSeferino
 
Fecha de Ingreso: octubre-2015
Mensajes: 6
Antigüedad: 8 años, 6 meses
Puntos: 0
Pregunta Problema de update con mCustomScrollbar

hola foro tengo una dificultad, ojala me puedan ayudar, esta montado en wordpress pero el tema es netamente ajax o jquery mas bien

actualizo un div mediente ajax con texto y foto de los post de una categoria especifica, este div tiene [URL="http://manos.malihu.gr/jquery-custom-content-scroller/"]mCustomScrollbar[/URL], luego el div se va cargando con llamadas desde una lista con articulos para pinchar. todo ok hasta aca.

al cargar la pagina todo bien, me carga el post inicial en el div y con su mCustomScrollbar como corresponde, pero al clickar desde la lista para llamar un nuevo post para cargar en el div el mCustomScrollbar se destruye. la info carga todo bien. solo se va el custom scrollbar.

he leido infinidad de articulos en internet tratando de entender como solucionarlo. encuentro en reiteradas ocasiones la recomendacion de usar :

Código:
jQuery('#post-content').mCustomScrollbar("update");
pero no logro utilizar bien o comprender como resolver el tema con esta linea, se que la cosa va por ahi. Lo tengo montado en wordpress. no hay conflicto de nada. todo carga bien, las llamadas y todo, tal vez falte un poco de pulcritud pero estoy aprendiendo.

aqui dejo el codigo.

aca se carga la info asincrona en un archivo php:
Código HTML:
Ver original
  1. <div id="post-content"></div>

desde esta lista hago las llamadas enviando el id del post desde el mismo archivo:

Código PHP:
Ver original
  1. <ul id="posts-menu">
  2.   <?php foreach ($posts_array as $post){ ?>
  3.   <li class="entrada" id="<?php echo $post->ID; ?>"><a class="<?php echo $post->post_name; ?> ajax" onclick="post_ajax_get('<?php echo $post->ID; ?>');"><?php echo $post->post_title; ?></a></li>
  4. <?php } ?>
  5. </ul>


este es mi script, esta en el mismo archivo bajo lo anterior:

Código Javascript:
Ver original
  1. <script>
  2. //aca cargo el primer post en el div automaticamente (no se si lo hize bien)
  3.                 (function($){
  4.                     $(window).load(function(){
  5.                         var postID = $('.entrada').attr( 'id' );
  6.                         post_ajax_get(postID);
  7.                     });
  8.                 })(jQuery);
  9.  
  10.             </script>
  11.            
  12.             <script>
  13.       //desde aca enlazo para llamar a los demas post desde la lista          
  14.                 function post_ajax_get(postID) {
  15.  
  16.                     jQuery("a.ajax").click(function(){
  17.                         //event.preventDefault();
  18.                     });
  19.  
  20.                     // Ajax Call
  21.                     jQuery.ajax({
  22.                         cache   : false,
  23.                         timeout : 8000,
  24.                         type: 'POST',
  25.                         url: '<?php bloginfo('wpurl');?>/wp-admin/admin-ajax.php',
  26.                         data: {
  27.                             action: "acall",
  28.                             id: postID
  29.                         },
  30.                         beforeSend: function() {
  31.                             $( '#post-content' ).html( '<img src="<?php bloginfo('template_url'); ?>/img/ajax-loader.gif" alt="Cargando contenido"/>' );
  32.                         },
  33.                         afterSend: function() {
  34.  
  35.                         },
  36.                         success: function(response) {
  37.                            
  38.                             jQuery("#post-content").html(response);
  39.                             jQuery("#post-content").mCustomScrollbar({
  40.                                 scrollButtons:{
  41.                                     enable  : false
  42.                                 },
  43.                                 theme               : "light-thin",
  44.                                 scrollbarPosition   : "inside",
  45.                                 scrollInertia       : 1500,
  46.                                 axis                : "y",
  47.                                 autoExpandScrollbar : false,
  48.                                 advanced:{
  49.                                     updateOnSelectorChange  : true
  50.                                    
  51.                                 }
  52.                             });
  53.                             //jQuery('#post-content').mCustomScrollbar("update");
  54.                            
  55.                             return false;
  56.                         },
  57.                         error: function( jqXHR, textStatus, errorThrown ){
  58.                             console.log( 'Error: ' + textStatus, errorThrown );
  59.                         }
  60.                     });
  61.                    
  62.                 }
  63.                
  64.             </script>

este es el action en el archivo function.php

Código PHP:
Ver original
  1. add_action( 'wp_ajax_acall', 'acall_init' );
  2. add_action( 'wp_ajax_nopriv_acall', 'acall_init' );
  3.  
  4. function acall_init() {
  5.    
  6.     /** Hacemos el Query y el loop */
  7.     $args = array('p' => $_POST['id']);
  8.     $acall_query = new WP_Query($args);
  9.    
  10.     while($acall_query->have_posts()) : $acall_query->the_post();
  11.         ?>
  12.         <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  13.            
  14.             <?php if ( has_post_thumbnail() ) {?>
  15.             <div class="cb-single-thumbnail">
  16.                 <div class="cb-single_img_thumb_right img_thumb" style="background-image: url(<?php echo wp_get_attachment_url( get_post_thumbnail_id()) ?>)">
  17.                     <div class="cb-overlay-thumbnail">
  18.                         <h2><?php the_title(); ?></h2>
  19.                         <span><?php the_time('l d \d\e F, Y'); ?></span>
  20.                     </div>
  21.                 </div>
  22.             </div>
  23.             <?php
  24.            
  25.             } ?>
  26.  
  27.             <div class="entry-content">
  28.                 <?php the_content(); ?>
  29.             </div> <!-- end .entry-content -->
  30.         </div>
  31.         <?php
  32.     endwhile;
  33.     exit;
  34.    
  35. }

todo funciona ok, es solo que al pinchar en la lista para mostrar otro post se me borra la custom scroll bar y queda la scrollbar por defecto del navegador.

se que es un tema de que el elemento cambia y se debe reiniciar el customscrollbar, pero he intentado por las mias y no se como resolverlo.

ojala me puedan ayudar.

saludos

Última edición por JuanSeferino; 19/10/2015 a las 04:07