logo
Welcome to our new AbleCommerce forums. As a guest, you may view the information here. To post to this forum, you must have a registered account with us, either as a new user evaluating AbleCommerce or an existing user of the application. For all questions related to the older version of Gold and earlier, please go to AbleCommerce Gold forum. Please use your AbleCommerce username and password to Login. New Registrations are disabled.

Notification

Icon
Error
Show/Hide html table via button
Options
Go to last post Go to first unread
Previous Topic Next Topic
Jay  
#1 Posted : Thursday, July 28, 2022 1:38:44 PM(UTC)
Jay

Rank: Member

Groups: Authorized User, Developers
Joined: 11/12/2018(UTC)
Posts: 25

Thanks: 1 times
Was thanked: 4 time(s) in 3 post(s)
I'm pretty new to MVC/razor/javascript/jquery. I'm working on upgrading our highly customized AC Gold site to AC 9. On the AC Gold site I have a widget in ConLib that has code similar to the following in the ascx file:
Code:
    ...
    <asp:Button ID="DoSomethingButton" runat="server" Text="Click to do something" OnClick="DoSomethingButton_Click" ValidationGroup="SomethingVal" TabIndex="8" />
    <table runat="server" id="detailsTable" class="inputForm" cellpadding="0" cellspacing="0" align="center" visible="false">
        ...
    </table>
    ...

The code-behind then had:
Code:
    protected void DoSomethingButton_Click(object sender, EventArgs e)
    {
        detailsTable.Visible = true;
        ....
    }

I'm trying to figure out how to do this in an AC 9 widget. I have everything "wired up" so the widget is on an inner template and displays properly with the table hidden. From searching online, it seems like I should be able to do something like this in the onclick property for the button:
Code:
    <input id="DoSomethingButton" type="button" class="btn btn-lg btn-block" value="Click to do something" onclick="$('#detailsTable').css('display','normal')" />
    <table id="detailsTable" class="inputForm" cellpadding="0" cellspacing="0" align="center" style="display:none">
        ....
    </table>

However, that doesn't work. I also tried .show instead of .css(...), but that didn't work either. I can set a breakpoint on that line of script in the browser's debugger, and it seems to execute, but nothing happens. Can anyone give me nudge in the right direction to accomplish this?
Back to top

Wanna join the discussion?! Login to your AbleCommerce Forums forum account. New Registrations are disabled.
Back to top  
shaharyar  
#2 Posted : Friday, July 29, 2022 3:11:08 AM(UTC)
shaharyar

Rank: Advanced Member

Groups: Admin, Developers, Registered, HelpDesk, Authorized User
Joined: 10/5/2018(UTC)
Posts: 703

Thanks: 5 times
Was thanked: 113 time(s) in 112 post(s)
You can try changing this

$('#detailsTable').css('display','normal')

to

$('#detailsTable').css('display','block')
Back to top
thanks 1 user thanked shaharyar for this useful post.
Jay on 7/29/2022(UTC)
Jay  
#3 Posted : Friday, July 29, 2022 10:59:12 AM(UTC)
Jay

Rank: Member

Groups: Authorized User, Developers
Joined: 11/12/2018(UTC)
Posts: 25

Thanks: 1 times
Was thanked: 4 time(s) in 3 post(s)
Thank you shaharyar, "block" works. I'm not sure where I got the "normal" value from, I should have made sure it was a valid option!
Back to top
Users browsing this topic
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

Privacy Policy | Powered by YAF.NET 2.2.4.14 | YAF.NET © 2003-2024, Yet Another Forum.NET
This page was generated in 0.106 seconds.