I'm doing a Reddit like website in French, and to fully optimize I'm fetching the results, caching it, then via jQuery querying each link to see if they were downvoted/upvoted.
What do you think about that to optimize the queries?
Why doesn't it work! Here's my code.
HTML:
<div class="box ajax_div" title="3">
<div class="score">
<a href="#" class="upvote_position" title="post-up-3"><img src="images/up.png" /></a>
<div class="score_position">1</div>
<a href="#" class="downvote_position" title="post-down-3"><img src="images/down.png" /></a>
</div>
<div class="box_info">
<div class="link">
<a href="#" class="text-show"><a href="?show=3" rel="nofollow" class="out">ouioui</a>
</div>
<div class="further">
<span class="date" title="2012-04-25 04:57:05">il y a 13 heures</span> | posté par <a href="?user=david">david</a> dans <a href="?chan=100hp.fr">100hp.fr</a>
</div>
<div class="further_more">
<a href="?show=3"><img src="images/comment.png" />2 commentaires</a> <a href="#" class="save" title="3"><img src="images/save.png" />sauvegarder le lien</a> <a href="#" class="spam" title="3"><img src="images/report.png" />spam?</a>
</div>
</div>
<div class="textbox" style="display:none;">razraz</div>
</div>
JavaScript:
$(".box").each(function(index){
ele = $('.box').eq(index);
$.get("ajax/score.php",
{ idbox: ele.attr('title'), type: "post" },
function(data) {
ele.find(".score_position").html(data);
});
});
I have multiple boxes like that, and it only affects the last one of them. I've first tried without the index and the eq(index) and it does the same thing.
You override ele global variable, try adding var:
$(".box").each(function(index){
var ele = $('.box').eq(index);
$.get("ajax/score.php",
{ idbox: ele.attr('title'), type: "post" },
function(data) {
ele.find(".score_position").html(data);
});
});
Another improvement in doing this is to use the context in which the callback for .each() is being executed. This will speed up your script a little, as the selector does not need to be evaluated again and you simply enclose DOM element (this) within jQuery object:
$(".box").each(function(index){
var ele = $(this);
$.get("ajax/score.php",
{ idbox: ele.attr('title'), type: "post" },
function(data) {
ele.find(".score_position").html(data);
});
});
jquery's each function provides two arguments in "each"
$('...').each(function(index, value) {...});
simply use the second argument.
The .get request is asynchronous, which means that it doesn't block the code execution once it is called.
In effect, ele is not the element you think it is when the .get callback is finally called (it'll probably be the last element of .box).
To overcome this, try to target the element without a variable that is changed every iteration of the loop.
I had the same issue. @Blender gave me the initial idea so: thanks.
My solution was to use:
$.ajax({
url: "myExample.html",
context: this //"this" refer to the outer-context "this" & not the internal $ajax "this"
}).done(function() {
//do all the stuff you need to do, it will then be executed in the right order
});
In my case if I don't do it that way, the rest of my code finishes so much quicker than the returned $.ajax call. It doesn't matter if I use a global variable.
UPDATE:
When using $.ajax, there are only 2 sockets available from the browser to run the requests. If you have many requests (over 500) this will cause the browser (I use Chrome) to hang because the requests add up but can't be handled on time. After some time you will get connection errors from the server.
The solution: Use an AJAX queue manager. I used http://plugins.jquery.com/ajaxQueue/
So now my code is slightly different (only had to replace $.ajax with jQuery.ajaxQueue):
jQuery.ajaxQueue({
url: "myExample.html",
context: this //"this" refer to the outer-context "this" & not the internal $ajax "this"
}).done(function() {
//do all the stuff you need to do, it will then be executed in the right order
});
Hope this will help future generations :-)