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

Reply

simflex

Member

258 Points

1178 Posts

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

Jan 29, 2021 10:32 PM|simflex|LINK

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

Reply

SurferOnWww

Member

330 Points

232 Posts

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

Jan 29, 2021 11:23 PM|SurferOnWww|LINK

simflex
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?

Reply

simflex

Member

258 Points

1178 Posts

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

Jan 30, 2021 02:45 AM|simflex|LINK

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.

Reply

SurferOnWww

Member

330 Points

232 Posts

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

Jan 30, 2021 09:37 AM|SurferOnWww|LINK

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>

Reply

simflex

Member

258 Points

1178 Posts

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

Jan 30, 2021 06:35 PM|simflex|LINK

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.

Reply

SurferOnWww

Member

330 Points

232 Posts

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

Jan 30, 2021 10:12 PM|SurferOnWww|LINK

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

Reply

simflex

Member

258 Points

1178 Posts

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

Jan 31, 2021 02:31 AM|simflex|LINK

I do sir:

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

Reply

SurferOnWww

Member

330 Points

232 Posts

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

Jan 31, 2021 03:23 AM|SurferOnWww|LINK

simflex
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.

Reply

simflex

Member

258 Points

1178 Posts

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

Jan 31, 2021 05:20 AM|simflex|LINK

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

Reply

SurferOnWww

Member

330 Points

232 Posts

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

Jan 31, 2021 06:28 AM|SurferOnWww|LINK

simflex

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.

Reply

simflex

Member

258 Points

1178 Posts

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

Jan 31, 2021 06:39 AM|simflex|LINK

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

Reply

SurferOnWww

Member

330 Points

232 Posts

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

Jan 31, 2021 07:11 AM|SurferOnWww|LINK

simflex
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

sermon

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

Reply

yij sun

Contributor

3730 Points

1412 Posts

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

Feb 02, 2021 09:10 AM|yij sun|LINK

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

.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.

Reply

SurferOnWww

Member

330 Points

232 Posts

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

Feb 02, 2021 10:48 AM|SurferOnWww|LINK

yij sun
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.

Reply

simflex

Member

258 Points

1178 Posts

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

Feb 02, 2021 04:31 PM|simflex|LINK

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.

How to activate one section of a page while disabling other sections?[Answered] RSS

14 replies

Shortcuts

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

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

simflex

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

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

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

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

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

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

simflex

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

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

simflex

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

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

simflex

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

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

yij sun

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