Issue
I am using jquery post, and somehow it seems the post get posted twice. I am testing this on Android Broswer. Very wired. Does anybody know why? Is this a jquery bug or something?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="vendor/jquery-1.5.js"></script>
<title>Test Runners</title>
</head>
<body>
<h1>Test Runner</h1>
<script type="text/javascript">
post_result = function() {
console.log("post_result is called!");
$.post( 'http://192.168.2.3:8001', { 'jasmine-url' : "test url" ,'jasmine-content' : "test content" } )
.success(function() { alert("second success"); return true; })
.error(function() { alert("error"); return true; })
.complete(function() { alert("complete"); return true; });
}
</script>
<a href="javascript:post_result()">post result</a>
</body>
</html>
More info:
Made some changes to original post.
Actually in Chrome, it only made two request when we first make post request, and one is OPTION method, and another one is POST.
But on Android browser, the same code is make two POST request every time. I think there might be something wrong about JQUERY with Android browser. Anybody is aware of this?
Solution
Not sure why it would post twice, but I note several issues with your code.
First of all, we're long past inline JavaScript and executing JavaScript inside the href-attribute is a big no no (there's the onclick attribute for that, but thats another dinosaur you shouldn't touch). There's loads of great JavaScript frameworks out there that makes it dead easy to bind to events such as click.
Secondly, your post_result function is defined as global and lacking a semicolon.
To rectify the above, the following snippet should be put in the head or in a separate file. It will do the same, but in a more jQuery-ish way following good practices.
JavaScript
// Short-hand for DOM-ready
$(function(){
// Define variable in local scope to store request
var request;
// Bind to the click event to all anchors with the class post-results
$("a.post-results").click(function(e){
// Prevent default behavior. I.e. stop browser from navigating
e.preventDefault();
// If there's a previous request, abort it. No need for two.
// You could also return here if you want to wait for the first
// one to finish.
if (request) { request.abort(); }
// Let's fire off the request and store it for future reference
request = $.post(
'http://192.168.2.3:8001',
{
"jasmine-url": "test url",
"jasmine-content": "test content"
}
)
.success(function(res) {
console.log("second success", res);
})
.error(function(xhr, err) {
console.log("error", err);
})
.complete(function() {
console.log("complete");
// Set request var to null
request = null;
});
});
});
HTML
<a class="post-results" href="#">Post result</a>
To make sure that jQuery is loaded properly, you should load it from an established public CDN such as Google Libraries API.
I also urge you to jump to the HTML5 doctype, which is backwards-compatible with HTML4. Just switch your doctype to <!DOCTYPE html> and you're good to go.
Answered By - mekwall
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.