在fancybox中使用AJAX调用

时间:2013-02-04 14:50:02

标签: jquery ajax fancybox

我正在创建一个网上商店,在网上商店中点击它时,我会使用带有iframe的fancybox来显示产品的详细信息页面。

在产品的详细信息页面中,您可以通过AJAX调用购买产品。该呼叫将购买发送到数据库并更新购物车金额。

但是,第一次点击“购买”按钮时,iframe才会刷新。从第二次按钮开始工作完美,但我不能再关闭fancybox(既不通过单击关闭按钮,也不通过使用代码)。我也没有得到任何javascript错误,当单独打开产品详细信息页面(而不是在fancybox中)时,一切都运行良好。

由于我没有在任何地方出现任何错误,并且没有fancybox一切正常,我真的不知道我应该放在哪个代码。

Fwiw我正在运行jquery版本1.8.3和fancybox版本1.3.4

编辑:这是相关代码

打开我的fancybox的javascript函数

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

在fancybox中显示的iframe

<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>

javascript函数和AJAX调用

<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">' + '\n';   
strHTML += '    <tr>' + '\n';

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

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>

0 个答案:

没有答案