用jQuery隐藏一个输入按钮,并用启动AJAX函数.NET



我有一个用于向购物车添加项目的输入按钮。基本上,理想的情况是用户点击输入按钮,它会消失,显示加载的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需要()才能调用函数。

最新更新