cómo probar la página ajax

Creé una aplicación Codeigniter que incluye una página con algo de ajax. Estoy tratando de demostrarme a mí mismo que la página de ajax está funcionando. Es decir, que solo se está actualizando una sección de mi página, y el resto se queda como está.

Aquí está mi código en el controlador: (index es el método que se llama en la carga de la página inicial. index2() se llama cuando se hace clic en el botón de actualización)

       public function index()
       {
           $this->load->model('locations_model');
           $data['clienthistory'] = $this->locations_model->get_locations();
           $data['main_content'] = 'dashboard';
           $this->load->view('includes/template', $data);
       }


       public function index2()
       {
          $this->load->model('locations_model');
          $data['clienthistory'] = $this->locations_model->get_locations();
          return json_encode($data['clienthistory']);                                                                     
       }

Y aquí está mi punto de vista:

 <h2>timer test</h2>
    <?php echo now();?>

<h2>Latest Client Status</h2>
            <?php echo form_open('Dashboard/index');          
            echo form_submit('submit', 'Refresh Client Data', 'id="clientsubmit" class="btn-primary"');
            ?>
      <div class="row-fluid">
             <div class="span12" id="ajaxcontainer">
               <table class="table table-bordered table-striped">
                <thead>
                 <tr>
                   <th>IP</th>                                                                                                          
                   <th>Name</th>                                                                           
                   <th>Last Updated</th>
                 </tr>
                 </thead>
                <tbody>
               <?php foreach ($clienthistory as $histitem): ?>
                    <tr>
                        <td><?php echo $histitem['network'] ?></td>
                        <td><?php echo $histitem['name'] ?></td>
                        <td><?php echo $histitem['lastupdated'] ?></td>
                    </tr>
               <?php endforeach ?>

                </tbody>
               </table>
       </div>

     <?php echo form_close();  ?>
     <script type="text/javascript">
        $('#clientsubmit').click(function() {                   
               $.ajax({                                
                    url:"<?php echo site_url('Dashboard/index2'); ?>",
                    type: 'POST',
                    dataType: 'html'
                    success: function(returnDataFromController) {
                          $('#ajaxcontainer').html(returnDataFromController)
                    }
                  });

       return false;      
     });
    </script>

La idea es mostrar la hora actual en la página, en un área que no debe ser actualizada por mi llamada ajax. Pero cuando hago clic en mi botón Actualizar, además de actualizar los datos de la tabla, también se actualiza la hora. No estoy seguro de entender por qué sucede esto. Cualquier ayuda sería apreciada. disculpe de antemano por las preguntas correctivas, solo nuevo en codeigniter y ajax. Gracias.

preguntado el 12 de junio de 12 a las 19:06

su botón de actualización es un submit por lo que actualizará la página, debe cambiarla a, por ejemplo button y añadirle una acción con JS -

1 Respuestas

Su botón es un submit por lo que actualizará la página cuando se haga clic.

Necesitas cambiarlo a otra cosa, como <a></a> y añádele una acción, algo como esto:

<a href="#" id="clientsubmit" class="btn btn-primary">Refresh Client Data</a>

Dado que está utilizando el arranque de Twitter, el enlace no interferirá con su diseño agregando un btn a su clase.

Sin el submit botón, su página no se actualizará y su función de fecha estará intacta.

Y solo por precaución, deshabilite ese enlace/botón cuando haga clic hasta que se devuelva la solicitud.

$('#clientsubmit').click(function() {
$(this).attr("disabled", "disabled");
...
$('#ajaxcontainer').html(returnDataFromController);
$(this).removeAttr("disabled");
...

Y en su llamada ajax simplemente actualizará el ajaxcontainer elemento.

Espero eso ayude.

Respondido el 12 de junio de 12 a las 19:06

desafortunadamente, cuando lo cambio a un ancla, ya no activa la función de clic... - punto

no tiene sentido, ¿puedes revisar tu cromo con CTRL+SHIFT+j y ver si hay algún mensaje? - usuario745235

Daniel, tenías razón. había otro problema. me faltaba una coma después de mi tipo de datos en la llamada ajax. pero después de solucionar ese problema de sintaxis, parece que mi ajax no funciona. Intenté agregar una declaración de eco en mi método index3()... y no se está ejecutando. - punto

Entonces, ¿ahora se llamó al evento de clic? - usuario745235

sí, se llama al evento de clic. Pero creo que index3() está fallando. Agregué un eco justo al comienzo de index3(). luego hace la declaración de selección contra la base de datos. Agregué "console.log (returnDataFromController);" a mi función ajax. y en la consola, veo mi declaración de eco... y solo el eco. no cualquier dato. - punto

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.