[jQuery] Multiple ajax calls messing each other up.

[Jaap]

Hello there.

I'v got two elements in my website which will be using Ajax.
One is getting a random blogpost every 9 seconds or so:

                        var noiseDisplayTime = 100;
                        var rotationTime = 8000;
        function fadeOutAndGetNewTvShow(){

                        var fadeInData = function fadeInData() { 
$('#randomPost').animate
({foo: 1}, noiseDisplayTime).fadeIn(); }
                        var loadData = function loadData() { 
$('#randomPost').load(("/
random-post/?cachebuster=" + Math.floor(Math.random()*10001)),
fadeInData); }
                        $('#randomPost').fadeOut(loadData);
        }

        $("#randomPost").load("/random-post/");
                var refreshId = setInterval(function() {
                        fadeOutAndGetNewTvShow();
                }, rotationTime);

The other one is the handling of a form submit:

        jQuery(function() {

                jQuery().ajaxStart(function() {
                        $("#formLoader").fadeIn("fast");
                }).ajaxStop(function() {
                        $("#contactForm").hide();
                        $("#formLoader").fadeOut("slow")
                }).ajaxError(function(a, b, e) {
                        throw e;
                });

                var v = jQuery("#contactForm").validate({
                        submitHandler: function(form) {
                                jQuery(form).ajaxSubmit({
                                        target: "#result"
                                });
                        }
                });

                jQuery("#reset").click(function() {
                        v.resetForm();
                });
        });

I found out what's going wrong, every time an Ajax requist is made, it
runs trough everything that's using Ajax. I just don't know how to
solve it. Or explain it better...
Hopefully someone can help out,

Regards,

Jaap