Respuesta Ajax dentro de un div

Question

Estoy tratando de mostrar el valor de la respuesta ajax dentro de un div y para eso tengo el siguiente código en mi archivo de vista.

<script type="text/javascript" src="MY LINK TO JQUERY"></script> 

<script type="text/javascript"> 
    $(function(){ // added 
    $('a.vote').click(function(){ 
     var a_href = $(this).attr('href'); 

    $.ajax({ 
      type: "POST", 
      url: "<?php echo base_url(); ?>contents/hello", 
      data: "id="+a_href, 
      success: function(server_response){ 
          if(server_response == 'success'){ 
            $("#result").html(server_response); 
          } 
          else{ 
            alert('Not OKay'); 
           } 

         } 
    }); //$.ajax ends here 

    return false 
    });//.click function ends here 
    }); // function ends here 
</script> 

    <a href="1" title="vote" class="vote" >Up Vote</a> 
    <br> 
    <div class="result"></div>           

mi controlador (a la que el Ajax está enviando el valor):

function hello() { 
       $id=$this->input->post('id'); 
       echo $id; 
      }  

Ahora lo que estoy intentando lograr es obtener el valor server_response (el valor que se envía desde el controlador) en lado <div class="result"></div> en mi archivo de vista.

He intentado el siguiente código pero no muestra el valor dentro del div.

¿Podría decirme dónde está el problema?

Answer 1

El problema es que se tienen argumentos mixtos de Ajax success handler. Primero va data que tu script devuelve, luego va al textStatus. En teoría, puede ser "timeout", "error", "notmodified", "success" o "parsererror". Sin embargo, en success textStatus siempre será exitoso. Pero si necesita agregar alert en caso de error, puede agregar el controlador error. Y sí, cambie el selector en $ ("# resultado") a la clase. Así que el código corregido puede verse así:

$.ajax({ 
    type: "POST", 
    url: "<?php echo base_url(); ?>contents/hello", 
    data: "id=" + a_href, 
    success: function(data, textStatus) { 
     $(".result").html(data);  
    }, 
    error: function() { 
     alert('Not OKay'); 
    } 
});​ 

Answer 2

Intente cambiar <div class="result"></div>-<div id="result"></div>, porque eso es lo que está haciendo referencia en su función de éxito ajax

$("#result").html(server_response);

Answer 3

success: function(server_response) { 
     $(".result").html(server_response); 
}​ 

<div class="result"></div> // result is the class 

El selector debe estar .result no #result