AJAX call not always loading when user interacts

I am having a couple of problems involving PHP & AJAX using jQuery. To make the whole explanation easier I am going to simply give a link to the site I am working on and if you use the "quote calculator" tab and follow the steps you should hopefully understand my problem

http://bothrealities.very-dev.co.uk/green-it

Just in case you do not, here is an explanation:

When I am clicking on a radio button; the radio buttons in the model section (which calls back data from a PHP file and db through AJAX), the info box to the right does not always populate, sometimes it seems as if the data is stuck in the cache. You can click on a model and then when you click again the model you choose prior populates in the info-box (as if it is one click behind)

Now I am not sure if it is a case of the speed in which the user clicks the buttons, thus breaking to original AJAX call?

I don't know if I need to have the page disable/grey out and have a loading wheel until the data comes back, so users cannot interfere with the process, or not?

Apologies if the above explanation is confusing, I do urge you visit the link above and try i开发者_JAVA百科t for yourself, it is so much easier to understand that way.

Thank you very very much in advance anyone who can sort this out, I might even pop a small bounty on this post.

Thanks,

Dan.

P.s Am not sure how to add a bounty yet, sorry.

EDIT :::

    function productString(product, box) {
        $.get("http://<? echo ROOT; ?>includes/forms.php", { product: product }, function(data) {
            $("#loadingModel").append(data);
        });

        $.get("http://<? echo ROOT; ?>includes/forms.php", { box: box }, function(data) {
            $("#content-right").empty();
            $("#content-right").append(data);
            $("#content-right").jScroll();
        });
    }

    function modelString(model, boxModel) {
        $.get("http://<? echo ROOT; ?>includes/forms.php", { model: model }, function(data) {
            $("#loadingData").empty().append(data);
        });

        $.get("http://<? echo ROOT; ?>includes/forms.php", { boxModel: boxModel }, function(data) {
            $("#boxModel").empty().append(data);
        });
    }

---

Sometimes your http://bothrealities.very-dev.co.uk/includes/forms.php?boxModel=1 ends before the http://bothrealities.very-dev.co.uk/includes/forms.php?model=xxxxx has ended so the returned data from the second request isn't what you want to get.

You can try by passing model parameter in the second "GET" too.

---

"loading wheel" will certainly help out the user (on what's going on). I haven't looked at the code but here's how you can debug this.

1. "erase" the box on right before the AJAX call.
2. in the callback function, use console.log(ajaxcontent) to make sure, you got the intended content from ajax. (this is nice feature of firebug -- a firefox plugin)
3. update the box.

I hope this helps.