Comunidad de diseño web y desarrollo en internet online

Refresh en Panel-Wells

Citar            
MensajeEscrito el 25 Jun 2018 09:34 pm
Que tal Amigos;

Aca podiendo su apoyo, soy un novato en programación jquery y ando editando un template llamado Doodle, el cual tiene un bloque de paneles, en los cuales uno de ellos tiene accesiones como: Refrescar el contenido, fullcreen y eliminar el panel.

A esto funciona todo menos lo que más quiero el refresh. Ya que dentro de este panel cargo una tabla con datos de una BD mysql; me gustaria que cada 1 minuto me actualice cambios en dicha tabla.

Pero al revisar el codigo que figura en su init.js que es el que maneja el evento click de dicho panel, a pesar que refresca la vista del panel el contenido sigue igual a pesar que haya cambiado. Si le doy F5 a toda la pagina ahí recien veo el cambio en la tabla mostrada.

Les pongo un extracto de codigo que es el que usa el template.

Código :

   /*Refresh Init Js*/
   var refreshMe = '.refresh';
   $(document).on("click",refreshMe,function (e) {
      var panelToRefresh = $(this).closest('.panel').find('.refresh-container');
      var dataToRefresh = $(this).closest('.panel').find('.panel-wrapper');
      var loadingAnim = panelToRefresh.find('.la-anim-1');
      panelToRefresh.show();
      setTimeout(function(){
         loadingAnim.addClass('la-animate');
      },100);
      function started(dataToRefresh){} //function before timeout
      setTimeout(function(){
         function completed(dataToRefresh){} //function after timeout
         panelToRefresh.fadeOut(800);
         setTimeout(function(){
            loadingAnim.removeClass('la-animate');
         },800);
      },1500);
      return false;
   });


Código :

            <div class="panel panel-default card-view panel-refresh">
              <div class="refresh-container">
                <div class="la-anim-1"></div>
              </div>              
              <div class="panel-heading">
                <div class="pull-right">
                  <a href="#" class="pull-left inline-block refresh mr-15">
                    <i class="zmdi zmdi-replay"></i>
                  </a>
                  <a href="#" class="pull-left inline-block full-screen mr-15">
                    <i class="zmdi zmdi-fullscreen"></i>
                  </a>
                    <a class="pull-left inline-block close-panel" href="#" data-effect="fadeOut">
                      <i class="zmdi zmdi-close"></i>
                    </a>                  
                </div>                                
                <div class="clearfix"></div>
              </div>              
              <div id="collapse_1" class="panel-wrapper collapse in">
                <div  class="panel-body">
                  <a href="#" class="pull-left inline-block refresh mr-15">
                    <i class="zmdi zmdi-replay"></i>
                  </a>
                  <a href="#" class="pull-left inline-block full-screen mr-15">
                    <i class="zmdi zmdi-fullscreen"></i>
                  </a>
                    <a class="pull-left inline-block close-panel" href="#" data-effect="fadeOut">
                      <i class="zmdi zmdi-close"></i>
                    </a>                  
                </div>                                
                <div class="clearfix"></div>
              </div>              
              <div id="collapse_1" class="panel-wrapper collapse in">
                <div  class="panel-body">

                  <div class="table-wrap">
                    <div class="table-responsive">
                      <table id="datable_1" class="table table-hover display  pb-30" >
                        <thead>
                          <tr>
                            <th>Editar | Estado</th>
                          </tr>
                        </thead>
                        <tbody>
                                         
                        </tbody>
                      </table>
                    </div>
                  </div>

                </div>
              </div>

Por jramirezy

0 de clabLevel



 

chrome
Citar            
MensajeEscrito el 16 Jul 2018 10:11 pm
Tiene dos placeholders para que hagas algo

function started(dataToRefresh){} //function before timeout
function completed(dataToRefresh){} //function after timeout

Pero fuera de eso, lo unico que hace es correr una animacion

Jorge

Por solisarg

BOFH

13669 de clabLevel

4 tutoriales
5 articulos

Genero:Masculino   Bastard Operators From Hell Premio_Secretos

Argentina

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.