在fancybox中使用AJAX调用

I'm creating a webshop in which I use a fancybox with an iframe to show a product's detail page when clicking on it in the webshop.

Inside the product's detail page you can buy the product through an AJAX call. That call sends the purchase to the database and updates the shopping cart amount.

However, the first time I click the buy button, the iframe just refreshes. From the second time on the button works perfectly, but I can't close the fancybox anymore (neither by clicking the close button, nor through using code). I don't get any javascript errors either and when opening the product detail page by itself (not in a fancybox) everything works perfectly.

Since I don't get any errors anywhere and everything works fine without the fancybox, I don't really have an idea of which code I should put here.

Fwiw I am running jquery version 1.8.3 and fancybox version 1.3.4

Edit: here's the relevant code

The javascript function that opens my fancybox

function ShowAssetDetail(lngAssetID) {
    $.fancybox(
    {
        'modal': false,
        'width': 500,
        'height': 500,
        'autoscale': false,
        'type': 'iframe',
        'href': '/Code/Webshop/WS_Detail_Layout_2.asp?AssetID=' + lngAssetID
    });
}

The iframe that's displayed in the fancybox

<div name="SHOPPINGCART" id="SHOPPINGCART" border="1">
<table class="ShoppingCart" title="Naar het detail van uw winkelmandje / Naar de kassa">
    <tr>
        <td>
            <a href="/Code/Webshop/WS_Order_Detail.asp?"> 
                €&nbsp;96,00
            </a>
        </td>
        <td>
            <a href="/Code/Webshop/WS_Order_Detail.asp?"> 
                <img src="/code/_Images/WS_basket_go.gif" width="16" height="16" border="0" title=""> 
            </a>
        </td>
    </tr>
</table>
</div>

<table class="AssetDetail_BuyAsset_Table" cellspacing="0" cellpadding="3px" width="100%">
<tr class="TableHeading1">       
    <td>P. iBTW</td>
    <td colspan="2">&nbsp;</td>
</tr>
<tr class="Normal_Text_1">           
    <td>€&nbsp;25,00</td>        
    <td><input type="text" name="X_PurchaseQuantity" id="X_PurchaseQuantity" size="5" value="3" onclick="this.select()">
    <td><a href="#AddProductToShoppingCart" onclick="AddProductToShoppingCart(X,Y,document.getElementById('X_PurchaseQuantity').value,Z)"><img src="/code/_Images/WS_basket_add.gif" border="0"></a></td>      
</tr> 
</table>

The javascript functions and AJAX calls

<script language="JavaScript" type="text/JavaScript">
var strShoppingCartContainerElemID
var ajaxShoppingCartResponse;
var ajaxAssetAmountResponse;
var lngAjaxFinished;
var lngAjaxToFinish;
function AddProductToShoppingCart (lngAssetID,lngPriceID,dblPurchaseQuantity,dblAssetPrice) {
if (typeof(lngAssetID) == 'undefined' || typeof(lngPriceID) == 'undefined') return false;           

StartUserWait(); //This just generates a spinner

lngAjaxFinished = 0;
lngAjaxToFinish = 1; //change into 2 when the orderitem amount/value is ever displayed again

var strShoppingCartURL = '/Code/_CommonCode/AJAX_Generic.asp?Proc=WS_AddAssetToShoppingCart';
ajaxShoppingCartResponse = CallAJAXURL(strShoppingCartURL,ReceiveAJAXShoppingCartResponse);

var strAssetAmountURL = '/Code/_CommonCode/AJAX_Generic.asp?Proc=WS_AmountAndValueOfAssetInShoppingCart';
ajaxAssetAmountResponse = CallAJAXURL(strAssetAmountURL, ReceiveAJAXAssetAmountResponse);
} 
function ReceiveAJAXShoppingCartResponse(){
if (ajaxShoppingCartResponse) if (ajaxShoppingCartResponse.readyState == 4){
    var records = ajaxShoppingCartResponse.responseText.split("<br>"); 
    var results = records[0].split("___");

    var lngOrderHeadID = parseInt(results[0]);
    var dblTotalValue = parseInt(results[1]);
    var strFormattedCurrency = results[2];

    /*Write child's shoppingcart*/
    WriteShoppingCart('SHOPPINGCART', dblTotalValue, strFormattedCurrency, 0);
    /*Write parent's shoppingcart*/
    WriteShoppingCart('SHOPPINGCART', dblTotalValue, strFormattedCurrency, 1);

    ajaxShoppingCartResponse = undefined;

    /*UpdateAjaxFinished();*/
}
}
function ReceiveAJAXAssetAmountResponse(){
if (ajaxAssetAmountResponse) if (ajaxAssetAmountResponse.readyState == 4)
{
    var records = ajaxAssetAmountResponse.responseText.split("<br>"); 
    var results = records[0].split("___");

    var lngAssetID = parseInt(results[0]);
    var dblTotalPurchaseQuantity = parseInt(results[1]);
    var strTotalPurchasePrice = results[2];

    if(parent.document.getElementById('AssetRow_' + lngAssetID)) {
        if(dblTotalPurchaseQuantity > 0) {
            parent.document.getElementById('AssetRow_' + lngAssetID).style.fontWeight = 'bold';
            parent.document.getElementById('NOUnits_' + lngAssetID).value = dblTotalPurchaseQuantity;
        } else {
            parent.document.getElementById('AssetRow_' + lngAssetID).style.fontWeight = 'normal';
            parent.document.getElementById('NOUnits_' + lngAssetID).value = '';
        }
    }

    document.getElementById('X_PurchaseQuantity').value = dblTotalPurchaseQuantity;

    ajaxAssetAmountResponse = undefined;

    UpdateAjaxFinished();
}
}
function WriteShoppingCart(strContainerElemID, dblTotalValue, strFormattedCurrency, bitParent){
if (strContainerElemID == '') strContainerElemID = strShoppingCartContainerElemID
var container;
if(bitParent == 0) {
    container = document.getElementById(strContainerElemID);
} else {
    container = parent.document.getElementById(strContainerElemID);
}
if (!container) return false;
strShoppingCartContainerElemID = strContainerElemID;
var strHTML = '';
dblTotalValue = parseInt(dblTotalValue);
strHTML += '<table class="ShoppingCart">' + '
';   
strHTML += '    <tr>' + '
';

if (dblTotalValue > 0){
    strHTML += '        <td>' + '
';
    strHTML += '            <a href="/Code/Webshop/WS_Order_Detail.asp?"> 
';
    strHTML += '                ' + strFormattedCurrency + '
';
    strHTML += '            </a>' + '
';
    strHTML += '        </td>' + '
';
    strHTML += '        <td>' + '
';
    strHTML += '            <a href="/Code/Webshop/WS_Order_Detail.asp?"> 
';
    strHTML += '                <img src="/code/_Images/WS_basket_go.gif" width="16" height="16" border="0" TITLE=""> 
';
    strHTML += '            </a>' + '
';
    strHTML += '        </td>' + '
';
} else {
    strHTML += '        <td>&euro;&nbsp;0,00</td>' + '
';
}   
strHTML += '    </tr>' + '
';  
strHTML += '</table>' + '
';           

container.innerHTML = strHTML;
}
function UpdateAjaxFinished(){
    if (typeof(lngAjaxFinished) == 'undefined') lngAjaxFinished = 0;
    if (typeof(lngAjaxToFinish) == 'undefined') lngAjaxToFinish = 1;
    lngAjaxFinished++;
    if (lngAjaxFinished >= lngAjaxToFinish) EndUserWait(); //this stops the spinner
}
</script>