[EXPLANATION] (apologies for the length)
In my gridview, users have the option to add a new entry or edit an existing one. When they click on either 'Add' or 'Edit', a popup window appears for them to input the information for the new or updated item.
Instead of creating two separate popups, I decided to use one popup with two different LinkButtons - one for adding a new record and the other for saving changes to an existing record (with editable fields). The visibility of these buttons needs to be controlled based on the user's action ('Add' or 'Edit').
To achieve this, I used jQuery to toggle the visibility of the buttons. While it worked fine when showing the 'Edit' save button upon clicking 'Edit', I encountered an issue with hiding the 'Add' save link when the user clicks 'Edit'. Even though I set the display property for the buttons correctly in the code, there was a problem with toggling their visibilities.
[QUESTION]
I debugged using Chrome and confirmed that the function is being executed, so I'm not sure what's causing the button visibility issue. Can anyone help me identify the problem?
[CODE]
.aspx
<%-- Edit button within GridView --%>
<asp:LinkButton ID="lbEditButton" runat="server" OnClientClick="showEditLink();" Text="Edit" CommandName="editCmd" CommandArgument='<%# ... %>'></asp:LinkButton>
<%-- Add button below GridView --%>
<asp:Button ID="btnAddCert" runat="server" Text="Add Certification" OnClientClick="javascript:showAddLink(); return false;" />
<%-- Save buttons inside ASPxPopupControl (DevExpress) --%gt;
<asp:LinkButton ID="lbAddSave" runat="server" CausesValidation="true" Text="Save" OnClick="lbAddSave_Click" />
<asp:LinkButton ID="lbEditSave" runat="server" CausesValidation="true" Text="Save" OnClick="lbEditSave_Click" />
jQuery
function showAddLink() {
$("[id*='_lbEditSave']").css('display', 'none');
$("[id*='_lbAddSave']").css('display', 'inline');
pcPopup.Show();
return false;
}
function showEditLink() {
$("[id*='_lbEditSave']").css('display', 'inline');
$("[id*='_lbAddSave']").css('display', 'none');
}