Display the panel upon clicking the link button

Is there a way to show/hide a panel when clicking on a link button? This functionality works correctly on a simple page, but fails to work when implemented on a Master Page.

Here is the code snippet I am using:

<%@ Page Language="C#" MasterPageFile="~/Master_Institute.master" AutoEventWireup="true" CodeFile="frm_Student_Renewal_Reg.aspx.cs" Inherits="frm_Student_Renewal_Reg" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <script type='text/javascript' src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js'></script>
    <style type="text/css">
        .panel{
            display:none;
        }
        .style1{
            width: 620%;
        }
    </style>
    <script type="text/javascript">
        $(function() {
            $("#Link1").click(function(evt) {
                evt.preventDefault();
                $('#panelText').slideToggle('slow');
            });
        });
    </script>
    <table>
        <tr>
            <td>
                <asp:HyperLink ID="Link1" runat="server" NavigateUrl="#">
                    Using slideToggle
                </asp:HyperLink>
                <br />
                <asp:Panel ID="panelText" runat="server" CssClass="panel">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc turpis nunc, placerat ac, bibendum non, pellentesque nec, odio.
                </asp:Panel> 
            </td>
        </tr>
        <tr>
            <td>
            </td>
        </tr>
    </table>
</asp:Content>

Can anyone help me identify what I might be doing wrong?

Answer №1

Each control's ID is automatically generated based on the ID and other elements of the page it is on. For example, if you have a single page, the Link1 may be rendered as Link1. However, when you add it inside a master page in ASP.NET to avoid conflicts additional names are added, such as the name of the placeholder.

To access the final rendered IDs on the client-side using JavaScript, you can use Link1.ClientID. This allows you to retrieve the IDs for your ASP.NET controls in your JavaScript code.

$("#<%=Link1.ClientID%>").click(function(evt) {

This process should be repeated for all ASP.NET controls used in the JavaScript code.

You can also set ClientIDMode="Static", but this means that the same control cannot be used multiple times on the same page. Additionally, care must be taken to ensure that other controls do not have the same IDs.

The ClientIDMode=Static property instructs ASP.NET to maintain the specified ID without generating a new one dynamically. This property was introduced in ASP.NET version 4.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the most effective method for serializing SVG data from the client's Document Object Model (DOM

As I delve into the world of creating interactive SVG/AJAX interfaces, I find myself faced with a challenge. Users are constantly manipulating elements on-the-fly and I want to give them the option to export their current view as a PNG image or an SVG docu ...

Tips for shrinking grommet's webpack bundle size

Hey there! Recently, I started exploring Grommet and worked on my first application by following their step-by-step guide. However, I noticed that the webpack bundle created for production is quite large, exceeding 1.7 MB even though I haven't added a ...

Information about Doughnut chart in React using the react-chartjs-2 package

Is there a way to write text directly on a Doughnut using react-chartjs-2? Most answers I came across explain how to place text in the center of a Doughnut, but not actually on it. Here is an image for reference: ...

How can I insert a variable into the URL for fetching data in React?

Here's a fetch request I have: fetch(`https://example/e1/e11/${variable1}?param=A1&include=metadata`, { "method": "GET"... Is there an issue with declaring the variable1 in this manner? It seems to work fine when written lik ...

What causes dates to shift by 24 hours?

I am facing an intriguing datetime dilemma. It seems like I just can't crack it and it's driving me crazy. Perhaps I overlooked something or didn't approach it in the right way. Currently, I am retrieving data from Mongo using Axios. The da ...

Utilizing the 'as' controller attribute in external JavaScript files

I have a JavaScript mapping component that includes a map and I want to customize the color based on user preferences set in an Angular 1.5 'as' controller. Here is an example of my controller code: app.controller('PreferenceController&apo ...

Executing an Ajax GET call using a parameter in Play Framework version 2.5.X

I'm currently utilizing Play Framework 2.5.X and facing an issue with fetching data from my controller using an AJAX call triggered by a button click. Below is the snippet of the ajax code I am working with: lastClickedWrench = $(this).attr('id& ...

Adding a Bearer Token to a GET request using location.href: A step-by-step guide

At the moment, I have all my ajax requests sending an Authentication token. However, I have created a service for exporting to excel and since ajax doesn't support that, I am using location.href for the get request. Is there a way to include the token ...

Adding JavaScript files to a project in Ionic2 with Angular2 integration

I'm looking to incorporate jQuery into my Ionic2 app, which requires loading several JavaScript files: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/j ...

What is the best way to develop a PHP proxy script to manage CORS problems when making API requests?

I am facing an issue where I need to call an API, but due to CORS problems, I have to create a PHP proxy file. However, the PHP code I wrote does not seem to be working as expected, leaving me stuck. Below is the script I'm using to make the API call ...

Jquery dialog displays content exclusively during the initial loading phase

I am trying to create a dialog in jQuery that displays the panel contents, but I am facing an issue where it only loads the content for the first time. On the second click, it only displays the modal overlay. How can I ensure that the content loads on ea ...

Steps for generating a pop-up window for choosing a file from a local folder?

I'm looking to develop a popup window that displays all the files within a specific directory, for example, a /functions directory. The goal is to be able to select a file in that directory, click "ok", and store its information in variables without a ...

Monitoring the usage of a specific component's screen time in a React Application

Is it possible to accurately track the time a specific component is rendered with certain props and while being on an active screen in React? I've had trouble finding a suitable library for this task. What would be the most effective approach to tackl ...

What steps should I take to make jQuery compatible with a Greasemonkey 0.8 script on Firefox 2, without internet access on the computer?

Currently using Firefox 2.0.0.11, Greasemonkey 0.8.x, and the latest version of jQuery (1.3.2) that is compatible with Greasemonkey 0.8. Attempting to load this Userscript: // ==UserScript== // @name TEST // @include * // @require jquery. ...

Ensure that variables are accessible to asynchronous calls without the use of closures

As a newcomer to the world of javascript, I've been trying to navigate the realm of nested functions. Let's explore the following two examples: // example 1 var x = 45; function apple(){ var y = 60; setTimeout(function(){ console ...

Combining sub-arrays in JavaScript into one single array

Upon running the code below, I received the following results: d3.csv("../hello.csv", function(data) { console.log(data); var usable = data.map(function (d) { return { description: d.description.split(" ") }; ...

What is the method to retrieve the value from $.get()?

After searching on stackoverflow, I was unable to locate a solution to my issue and am currently unable to comment for further assistance. The dilemma I face involves extracting a return value from an asynchronous method to pass it onto another function: ...

Using a section that is registered as allowDefinition='MachineToApplication' at a level outside of the application is considered a mistake

How can I manage two web.config files in an application, one for front-end users and the other for back-end (admin) users? For the admin section, I have created a folder named admin within the same website. The settings included in the admin/web.config fil ...

Vue and Vuex retrieve state data from the server in a single request

When loading the History view, data is fetched from the backend server using a Vuex action called in the created() lifecycle hook. This data is then passed to the history table through a computed function named history(), which accesses the history module ...

Automatically selecting a row within Material-UI's data grid using React code

Currently, I am in the process of developing a React web application and utilizing DataGrid from Material-UI by Google. The grid displays based on the user's selection from a select list (e.g., if the select list consists of fruits and the user choose ...