Remove From My Forums

How to activate one section of a page while disabling other sections?

Question

User1216627406 posted

Greetings mates.

Hope all is well and safe.

I have form with three sections separated by panels.

Example:

<asp:Panel ID="ClientPanel" runat="server">
Content goes here
</asp:Panel>

<asp:Panel ID="SermonPanel" runat="server">
Content goes here
</asp:Panel>

<asp:Panel ID="LogPanel" runat="server">
Content goes here
</asp:Panel>

Then we have another section with menu items and links to each of the panels above:

           <td rowspan="3" colspan="3" valign="middle">PROJECT REQUEST<br /><br />
            <table style="border:solid"><tr><td><br />XPHIAS SERMON MANAGEMENT SYSTEM<br />
             <span style="color:#ff0000;font-weight:bold;">MAIN MENU</span><br /><br />
                <span style="color:cornflowerblue;font-weight:bold;"><a href="#clientPanel">-MANAGE CLIENTS</a></span><br />
                <span style="color:cornflowerblue;font-weight:bold;"><a href="#SermonPanel">-MANAGE SERMONS MESSAGES</a></span><br />
                <span style="color:cornflowerblue;font-weight:bold;"><a href="#LogPanel">-NANAGE LOGs</a></span><br />
             </td></tr></table>
        </td>

When a user clicks on any of the links, for instance Manage Clients, s/he is taken to that section.

Works similarly for Manage Sermon and Mange Logs.

There are a couple of additional requirements that I am struggling with.

If a user clicks any of the sections, for instance, Panel with control ID of ClientPanel, we would like that section to be highlighted (with any color) and enabled for editing at the same time disabling the other sections.

Are these possible?

Many thanks in advance

Friday, January 29, 2021 10:32 PM

Answers

User-1545767719 posted

Copy & paste the following code and try:

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeBehind="WebForm17.aspx.cs" Inherits="WebApplication1.WebForm17" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        .selected {
            background-color: beige;
        }
    </style>
    <script src="Scripts/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $("a").click(function (event) {
                $("div").removeClass('selected');
                $("div").children().prop('disabled', true);

                var href = event.target.href;
                var targetId = href.split("#")[1];
                $("#" + targetId).addClass('selected');
                $("#" + targetId).children().prop('disabled', false);
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">        
        <span style="color:cornflowerblue;font-weight:bold;"><a href="#ClientPanel">-MANAGE CLIENTS</a></span><br />
        <span style="color:cornflowerblue;font-weight:bold;"><a href="#SermonPanel">-MANAGE SERMONS MESSAGES</a></span><br />
        <span style="color:cornflowerblue;font-weight:bold;"><a href="#LogPanel">-NANAGE LOGs</a></span><br />        

        <asp:Panel ID="ClientPanel" runat="server">
            <p>ClientPanel Content goes here</p>
            <asp:CheckBox ID="CheckBox1" runat="server" />
            <br />
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <br />
            <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
            <br />            
            <asp:TextBox ID="TextBox7" runat="server"></asp:TextBox>
            <br />
            <asp:TextBox ID="TextBox11" runat="server" TextMode="MultiLine"></asp:TextBox>
        </asp:Panel>

        <asp:Panel ID="SermonPanel" runat="server">
            <p>SermonPanel Content goes here</p>
            <asp:CheckBox ID="CheckBox2" runat="server" />
            <br />
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            <br />
            <asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
            <br />            
            <asp:TextBox ID="TextBox8" runat="server"></asp:TextBox>
            <br />
            <asp:TextBox ID="TextBox10" runat="server" TextMode="MultiLine"></asp:TextBox>
        </asp:Panel>

        <asp:Panel ID="LogPanel" runat="server">
            <p>LogPanel Content goes here</p>
            <asp:CheckBox ID="CheckBox3" runat="server" />
            <br />
            <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
            <br />
            <asp:TextBox ID="TextBox6" runat="server"></asp:TextBox>
            <br />            
            <asp:TextBox ID="TextBox9" runat="server"></asp:TextBox>
            <br />
            <asp:TextBox ID="TextBox12" runat="server" TextMode="MultiLine"></asp:TextBox>
        </asp:Panel>
    </form>
</body>
</html>

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Saturday, January 30, 2021 9:37 AM

All replies

0

Sign in to vote

User-1545767719 posted

If a user clicks any of the sections, for instance, Panel with control ID of ClientPanel, we would like that section to be highlighted (with any color) and enabled for editing at the same time disabling the other sections.

The Panel control will become a div element in html. How do you want to highligt it? Change background color of the div element?

What do you mean by "disabling"? Want set style display:none?

Friday, January 29, 2021 11:23 PM

User1216627406 posted

Hi SurfOnWww,

Thanks much for your response.

Actually, if I could change the background color of the panel, that would be better. Otherwise, changing the background color of the div would work also and yes with any color.

What I mean by disable is something like this:

<div ID="clientDetails" runat="server" disabled="true" />									

or something like that.

This way, if I click on #clientPanel, the entire panel is enabled for editing while the other two panels are disabled with the code above

And I click on another link say, then the other two are disabled while the panel or div that I linked to is enabled.

Hope this is clear.

Thanks a lot for your help.

Saturday, January 30, 2021 2:45 AM

User-1545767719 posted

Copy & paste the following code and try:

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeBehind="WebForm17.aspx.cs" Inherits="WebApplication1.WebForm17" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        .selected {
            background-color: beige;
        }
    </style>
    <script src="Scripts/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $("a").click(function (event) {
                $("div").removeClass('selected');
                $("div").children().prop('disabled', true);

                var href = event.target.href;
                var targetId = href.split("#")[1];
                $("#" + targetId).addClass('selected');
                $("#" + targetId).children().prop('disabled', false);
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">        
        <span style="color:cornflowerblue;font-weight:bold;"><a href="#ClientPanel">-MANAGE CLIENTS</a></span><br />
        <span style="color:cornflowerblue;font-weight:bold;"><a href="#SermonPanel">-MANAGE SERMONS MESSAGES</a></span><br />
        <span style="color:cornflowerblue;font-weight:bold;"><a href="#LogPanel">-NANAGE LOGs</a></span><br />        

        <asp:Panel ID="ClientPanel" runat="server">
            <p>ClientPanel Content goes here</p>
            <asp:CheckBox ID="CheckBox1" runat="server" />
            <br />
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <br />
            <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
            <br />            
            <asp:TextBox ID="TextBox7" runat="server"></asp:TextBox>
            <br />
            <asp:TextBox ID="TextBox11" runat="server" TextMode="MultiLine"></asp:TextBox>
        </asp:Panel>

        <asp:Panel ID="SermonPanel" runat="server">
            <p>SermonPanel Content goes here</p>
            <asp:CheckBox ID="CheckBox2" runat="server" />
            <br />
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            <br />
            <asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
            <br />            
            <asp:TextBox ID="TextBox8" runat="server"></asp:TextBox>
            <br />
            <asp:TextBox ID="TextBox10" runat="server" TextMode="MultiLine"></asp:TextBox>
        </asp:Panel>

        <asp:Panel ID="LogPanel" runat="server">
            <p>LogPanel Content goes here</p>
            <asp:CheckBox ID="CheckBox3" runat="server" />
            <br />
            <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
            <br />
            <asp:TextBox ID="TextBox6" runat="server"></asp:TextBox>
            <br />            
            <asp:TextBox ID="TextBox9" runat="server"></asp:TextBox>
            <br />
            <asp:TextBox ID="TextBox12" runat="server" TextMode="MultiLine"></asp:TextBox>
        </asp:Panel>
    </form>
</body>
</html>

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Saturday, January 30, 2021 9:37 AM

0

Sign in to vote

User1216627406 posted

Hi,

Your code is not doing anything at all.

It is not highlighting the div or panel that you linked to and it is not disabling the other panels.

Saturday, January 30, 2021 6:35 PM
0

Sign in to vote

User-1545767719 posted

I guess you do not have jQuery.js. Please confirm.

Saturday, January 30, 2021 10:12 PM

User1216627406 posted

I do sir:

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Sunday, January 31, 2021 2:31 AM

0

Sign in to vote
User-1545767719 posted

I do sir:

No, you didn’t before. I have received the mail that states:

> I do sir:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>

jQuery v1.5 does not work in the script of my sample code. I believe that is why you said “Your code is not doing anything at all.”

Now it seems that you use v2.1.1. It should work in the script of my sample code. I have confirmed.
Sunday, January 31, 2021 3:23 AM
0

Sign in to vote
User1216627406 posted

I don't know what you mean by I did not before i posted "I do sir"

I have three scripts, two of those are for my popup calendar which I initially posted in error.

Then I quickly replaced them with the one you saw. No need for me to make up story sir. If I didn't, I would not be embarrassed to admit it.

Anyway, after adding these two you posted, it still didn't work.

I tried putting them at the top of the page, then at the bottom right after </form> but no cigar.

Could it be that those panels or divs which i just added contain gridview?

Or is the order of the scripts that is causing the conflict?

Here is my entire script:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script> <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />

This one below is at the bottom of my page just after </form>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Thanks again very much for your help
Sunday, January 31, 2021 5:20 AM
0

Sign in to vote
User-1545767719 posted

Or is the order of the scripts that is causing the conflict?

Here is my entire script:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script> <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />

This one below is at the bottom of my page just after </form>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Did you include all of the above script files in your code? If so, it is causing the conflict. To me it is unbelievable. You should NOT do that but put ONLY ONE jquery.js of appropriate version (v2.1.1 is OK).

I advised that you "Copy & paste the following code and try" the sample code in my reply above. But I guess that you didn't accept my advise "Copy & paste" and did something else that I do not know.

That is probably the reason why you could not see "activate one section of a page while disabling other sections" although I have confirmed that my sample code works as it is before posting it.
Sunday, January 31, 2021 6:28 AM
0

Sign in to vote

User1216627406 posted

Even though you are helping, I do not enjoy dealing with people who like bark a lot.

Why are you assuming that I didn't use your code?

I removed my entire code and tried yours. It still doesn't work.

just NOW, I removed all the scripts except yours. It still is not working.

I asked if it has to do with the fact that the divs contain GridView but instead of responding, you are barking.

Thanks for your help

Sunday, January 31, 2021 6:39 AM
0

Sign in to vote

User-1545767719 posted

Why are you assuming that I didn't use your code?

Because my sample code is working in my environment with IE, Chrome, Edge and Firefox as expected and I don’t see any reason other than you are doing something else.

See following screen shots (click url if not shown on this thread):

Initial

http://surferonwww.info/BlogEngine/image.axd?picture=2021%2f1%2f0130Initial.jpg

Sermon selected

http://surferonwww.info/BlogEngine/image.axd?picture=2021%2f1%2f0130Sermon.jpg

Sunday, January 31, 2021 7:11 AM
0

Sign in to vote

User1535942433 posted

Hi simflex,

According to your problems and Suerfer's codes,I have created a test. When I click the link,the corresponding panel will display yellow background and other two panels are disabled.

I don't understand your requirement clearly.I'm guessing that you have another requirement. When you click the part of one of the panel, the panel will highlight and other two panels will be disabled.

Could you post your current codes and tell us more details of your requirement? It will help us to solve your problems.

Best regards,

Yijing Sun

Tuesday, February 2, 2021 9:10 AM
0

Sign in to vote

User-1545767719 posted

I don't understand your requirement clearly.I'm guessing that you have another requirement. When you click the part of one of the panel, the panel will highlight and other two panels will be disabled.

It doesn’t matter. He said “Your code is not doing anything at all.” That is a current issue. Please do not mix up.

Tuesday, February 2, 2021 10:48 AM
0

Sign in to vote
User1216627406 posted

I finally got your script to work.

First, I didn't pay too much attention to notice the version of jquery you are using.

I went and got the library:

<script src="https://code.jquery.com/jquery-3.5.1.min.js" type="text/javascript"></script>

After this, the three sections started highlighting but disabling was still not working until I was able to make this change:

Instead of this:

$("div").removeClass('selected'); $("div").attr('disabled', true);

I tried this:

$(".pnlDiv").removeClass('selected'); $(".pnlDiv").each(function () { $(this).children().find('*').attr('disabled', true);

and finally, I added the class to each panel control:

CssClass="pnlDiv"

Now, everything is working perfectly.

Thanks for your help.
Tuesday, February 2, 2021 4:31 PM

Answered by:

How to activate one section of a page while disabling other sections?

Question

Answers

All replies