(JQuery) How to call a custom function before following link
I want to achieve the following behav开发者_JAVA百科ior in a page link.
When the link is clicked, I want to:
- First, send (POST) some data back to the server
- Second, allow the browser to navigate to the url that the link was pointing to.
I am relatively new to JQuery, and here is my first attempt below. I will be grateful to any jQuery gurus in here to fillin the blanks (and maybe point out how the snippet below may be improved).
<html>
<head>test page</head>
<body>
<div><a id="hotlink" href="http://www.example.com">Clik and see</a></div>
<script type="text/javascript">
$(document).ready(function(){
$('hotlink').click(function(){
//AJAX Post data here ...
//follow the link url (i.e. navigate/browse to the link) ...
});
});
</script>
</body>
</html>
You might want to see my answer to a similar question. Basically, an ajax post would be asynchronous by default and may not make it to the server before completing. In order to ensure completion, you can make it synchronous but this will lock up the browser until the request has returned. This can be very problematic if your server is having trouble, it could take a while and the user is waiting to follow the link. Nevertheless, the code is:
$('#hotlink').click( function () {
$.ajax({
async: false,
type: "POST",
url: "http://myurl.com/mypage.php",
data: "param1=value¶m2=value", // ¶m3=value... etc.
});
});
Upon completion, the default action of the link will be honoured.
You can set the window.location call in the ajax callback.
Here is some quick, untested code:
<script type="text/javascript>
$(document).ready(function(){
$('hotlink').click(function(){
var link = $(this);
$.post(url, {'data': 'value'}, function() {
window.location = link.attr('href');
});
return false;
});
});
</script>
Note that you should probably do something to make it clear that the page is doing an ajax call, like putting in a spinner graphic, and disabling the link so that they don't click it a bunch of times.
--edit--
The other way to solve this problem is to do a synchronous ajax call, but then the browser will lock up while it is in progress.
To answer the comment, you need to return false so that the link isn't followed until after the ajax call is successfully completed.
Check out the documentation for the ajax method. Other methods (like post) are just shortcuts to ajax.
$(document).ready(function(){
$('#hotlink').click(function(){
//AJAX Post data here ...
$.ajax({
async: false,
data: 'can be a string or object, read docs',
url: 'http://example.com/whatever.html',
type: 'post'
});
//follow the link url (i.e. navigate/browse to the link) ...
//(it happens naturally by clicking a link, no need for extra code)
});
});
Note that I specified that this call should occur synchronously. That way you can be sure that the server receives the data before the browser navigates to a new page.
Try this:
$('#hotlink').click(function() {
$.post(...);
return true;
});
The process of returning true from .click(function(){...}) will instruct the browser to follow the link. If you return false, the browser will not follow the link.
Also, make sure you use #hotlink instead of hotlink (or a similar selector).
Obviously, you'll want to fill in the $.post(...) with the proper usage from jquery's documentation. Documentation here: http://api.jquery.com/jQuery.post/
Nearly perfect ;)
<script type="text/javascript">
$(document).ready(function(){
$('#hotlink').click(function(event){
//AJAX Post data here
});
});
</script>
You forgot the # sign for finding your link element. The link will be automatically followed as long as you don't call event.preventDefault().
If you wan't to send an AJAX request i would suggest you to send a synchronous one, otherwise you won't be able to figure out if it was successful or not.
加载中,请稍侯......
精彩评论