我有一个用于向购物车添加项目的输入按钮。基本上,理想的情况是用户点击输入按钮,它会消失,显示加载的GIF,然后一旦项目被添加到购物车中,按钮就会再次出现。这是输入按钮:
<asp:ScriptManager runat="server" id="MainScriptManager" />
<asp:UpdateProgress runat="server" ID="PageUpdateProgress">
<ProgressTemplate>
<img class="ajax-loader" src="/Images/ajax-loader.gif" alt="Loading.." />
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="Panel2" runat="server" updatemode="Always">
<Triggers>
<asp:AsyncPostBackTrigger controlid="AddToCart" eventname="Click" />
</Triggers>
<ContentTemplate>
<asp:Button runat="server" OnClick="AddToCart" OnClientClick="hideAddToCart" Text="Add To Cart" class="add-to-cart" ID="AddToCart" name="AddToCart" type="submit" ></asp:Button>
</ContentTemplate>
</asp:UpdatePanel>
这是这个背后的代码:
protected void AddToCart(object sender, EventArgs e)
{
// this loads the cart for manipulation
Cart cart = Cart.Load();
if (cart.Add("Items")) //this adds items and returns a BOOL for if it succeeded or not
{
AddToCart.Style.Add("visibility", "visible");
}
}
这里是onclientclick属性的jQuery
/* We need to hide the "Add To Cart" button when clicked for AJAX purposes */
function hideAddToCart()
{
$(".add-to-cart").css("visibility", "hidden");
}
所以这在你第一次点击按钮时就起作用了。之后它停止工作。我不太确定问题出在哪里。
该按钮将继续将项目添加到购物车中,以便在第一次单击后继续工作。jQuery在第一次点击后并没有启动。
编辑
这是在我第一次点击按钮之前呈现的内容:
<input type="submit" name="ctl00$MainContent$ItemDetails$ItemDetails$ctl00$ChildItems$ChildItems$FooterTemplate$AddToCart" value="Add To Cart" onclick="hideAddToCart;" id="MainContent_ItemDetails_ItemDetails_ChildItems_0_ChildItems_0_AddToCart" class="add-to-cart">
然后我点击它:
<input type="submit" name="ctl00$MainContent$ItemDetails$ItemDetails$ctl00$ChildItems$ChildItems$FooterTemplate$AddToCart" value="Add To Cart" onclick="hideAddToCart;" id="MainContent_ItemDetails_ItemDetails_ChildItems_0_ChildItems_0_AddToCart" class="add-to-cart" style="visibility:visible;">
好的,所以我解决了这个问题。OnClientClick在我的函数末尾应为(),因此,呈现该按钮的原因是在OnClient Click属性的末尾添加了分号。
ASP按钮代码
<asp:Button runat="server" OnClick="AddToCart_Child" OnClientClick="hideAddToCart()" Text="Add To Cart" class="add-to-cart test" ID="AddToCart" name="AddToCart" type="submit" ></asp:Button>
OnClientClick需要()才能调用函数。