Hi!
I'm working on the next version of my web site macforbeginners.com and
I'm having a problem with one of the site's features.

Here's what I have created so far:
I have a buch of articles with tags and I'm now developing a way to
browse these tags. When a tag is hovered, I'm loading the articles
which have been tagged with that tag into a div. It's nothing
complicated really. When the matching articles are being loaded, a
"spinner" appears, indicating that articles are being fetched.

Now, here is my problem:
If you hover your mouse over several tags quickly, my script will
perform ajax requests for each tag, causing the spinner to show and
hide several times.

What I'm looking for is a solution that will stop all the other ajax
requests fetching matching articles when another tag is hovered.

Here is the site:
http://macforbeginners.com/jquery-problem/

And here is my function:

                var clickTag = function(scope) {
                        $('ul.tags li', scope).hover(function() {
                                var tag = $(this).html();
                                $.ajax({
                                        beforeSend: function() {
                                                $(".tag-results 
#spinner").fadeIn(500);
                                        },
                                        complete: function() {
                                                $(".tag-results 
#spinner").fadeOut(250);
                                        },
                                        type: "GET",
                                        url: "fetch-articles.php",
                                        data: "view=tagsearch&s="+tag,
                                        success: function(msg){
                                                $(".tag-results 
#tag-results-content").empty().append(msg);
                                        }
                                });
                                $("ul.tags li").removeClass("active");
                                $(this).addClass("active");
                        });
                }

I'm very grateful for any help!

Cheers,
Mårten

Reply via email to