2012-09-29 36 views
27

casi nunca llego a jugar con las cosas del lado del cliente, y esto presumiblemente simple tarea es patear mi trasero :)jQuery: Captura href anclaje onclick y presentar de forma asíncrona

tengo algunos enlaces. OnClick Quiero evitar la acción predeterminada, capturar su href url, enviar un ajax GET a esa url, y simplemente alert() con los resultados ... pero ni siquiera puedo pasar la línea de partida :)

Ejemplo de anclajes para el tiempo de juego:

<a class="asynch_link" href="good/1.html">Click Here</a> 
<a class="asynch_link" href="good/2.html">Click Here</a> 

Ahora, he jugado con algunas sugerencias para similares peticiones en SO, pero los enlaces sigue siendo la causa el navegador para navegar hasta la URL href.

Incluso con sólo

<script type="text/javascript"> 
    $('a').click(function (event) 
    { 
     event.preventDefault(); 
     //here you can also do all sort of things 
    }); 
</script> 

... los enlaces aún navegan a la otra página.

Estoy un poco la sensación como e infantil aquí :)

Cualquier y toda ayuda será profundamente apreciado.

Y, sí, lo AM incluyendo jQuery :)
<script src="//67.20.99.206/javascripts/jqueryCountdown/1-5-11/jquery.countdown.js" type="text/javascript" charset="utf-8"></script>

+0

'jquery.countdown.js' parece ser un plugin de jQuery. ¿También está incluyendo la biblioteca jQuery completa? Por ejemplo, http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js – UserIsCorrupt

+1

¡¡OH MI BUENA VIDA !!!!! ... Copié/pegué la línea incorrecta en mi caja de arena ... jajaja ... oh, estoy totalmente sonrojada rt ahora ... whooooh chico ... Gracias-un-montón! :) – mOrloff

Respuesta

36
$('a').click(function(event) { 
    event.preventDefault(); 
    $.ajax({ 
     url: $(this).attr('href'), 
     success: function(response) { 
      alert(response); 
     } 
    }); 
    return false; // for good measure 
}); 
+5

Sé que esto tiene años, pero me ayudó. ¡Gracias! –

4

El problema aquí es que los eventos no están siendo unidos a su elemento, ya que no están siendo atados en DOM listo evento. Intenta incluyendo sus eventos en caso listo DOM y si funciona, verá la alerta

<script> 
    $(function() { 
     $('a').click(function(event) { 
      event.preventDefault(); 
      alert('fff') 
     //here you can also do all sort of things 
     }); 
    }); 
</script> 

Después de esto enviará la petición Ajax y enviar el formulario en la función de devolución de éxito ..

<script> 
    $(function() { 
     $('a').click(function(event) { 
      event.preventDefault(); 
      $.ajax({ 
       url: 'url', 
       dataType :'json', 
       data : '{}', 
       success : function(data){ 
        // Your Code here 

        $('#form').submit(); 
       } 
      }) 
     }); 
    }); 
</script> 
+1

Gracias. Esto es muy similar a lo que terminé. No tengo forma, y ​​por lo tanto no me presento ... pero esta es la idea correcta. Gracias de nuevo :) – mOrloff

18

Prueba esto

$('a').click(function (event) 
{ 
    event.preventDefault(); 

    var url = $(this).attr('href'); 
    $.get(url, function(data) { 
    alert(data); 
    }); 

}); 
+0

Gracias. Me pusiste en el camino correcto. Por alguna razón, no se devolvía nada, así que cambié el 'get' y armé una llamada' ajax' y todo funcionó (muy parecido a lo que @sushanth terminó sugiriendo) ... gracias-a-bunch – mOrloff

+0

Bienvenido amigo. – codingbiz