2012-09-29 12 views
27

ho quasi mai arriva a giocare con roba lato client, e questo compito presumibilmente semplice è calci il mio culo :)jQuery: Cattura ancoraggio href onclick e inviare in modo asincrono

ho alcuni link. OnClick Voglio impedire l'azione predefinita, acquisire la sua href url, inviare un ajax GET a quell'URL, e semplicemente alert() con i risultati ... ma non riesco nemmeno a superare la riga di partenza :)

Ancoraggi di esempio per il gioco-tempo:

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

Ora, ho giocato con alcuni suggerimenti per simili richieste su SO, ma i collegamenti ancora causare il browser per navigare all'url href.

Anche con solo

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

... i link ancora navigare all'altra pagina.

Sono un po 'la sensazione di infantile e qui :)

Qualsiasi aiuto sarà molto apprezzato.

E, sì, ho AM tra cui 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' sembra essere un plugin jQuery. Stai includendo anche la libreria jQuery completa? Come http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js – UserIsCorrupt

+1

OH MIO DIO !!!!! ... Ho copiato/incollato la riga sbagliata nella mia sandbox ... hahaha ... oh, sono totalmente arrossendo ora .. whooooh boy ... Grazie-a-mazzo! :) – mOrloff

risposta

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

So che questo è vecchio di anni, ma mi ha aiutato. Grazie! –

4

Il problema qui è che gli eventi non vengono attaccati al vostro elemento, perché non vengono tenuti in DOM pronto evento. Provate compresi gli eventi in DOM evento pronti e se funziona si vedrà l'avviso

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

Dopo questa inviare la richiesta Ajax e inviare il modulo nella funzione di callback successo ..

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

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

Grazie. Questo è molto simile a quello che ho finito con. Non ho forma e quindi non invio ... ma questa è l'idea giusta. Grazie ancora :) – mOrloff

18

Prova questo

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

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

}); 
+0

Grazie. Mi hai messo sulla strada giusta. Per qualche ragione, nulla è stato sempre rinviato, così ho acceso la 'GET' fuori e mettere insieme una chiamata' ajax' e ottenuto tutto funziona (molto simile a quello @sushanth finito per suggerire) ... grazie-a-gruppo – mOrloff

+0

Sei benvenuto amico. – codingbiz

Problemi correlati