.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
Sign In
Win Surprise Gifts!!!

Top 5 Contributors of the Month
david stephan
Gaurav Pal
Post New Web Links

Toggle show/hide details in datalist using javascript

Posted By:      Posted Date: October 21, 2010    Points: 0   Category :ASP.Net


I have a datalist bound to a sql source having two columns: Name and Description. The datalist contains a "Show Description" link as follows on clicking on which it calls the javascript which shows the description div.


    <script type="text/javascript">
        function toggle_visibility(id) {
           var e = document.getElementById(id);
           if(e.style.display == 'block')
              e.style.display = 'none';
              e.style.display = 'block';

 The asp.net page source for itemtemplate of the datalist is as follows.The problem is that since the div id "Description" is applicable to multiple records, no matter I click on whichever "show details" link, the description of first record in the datalist is shwon and hidden since its the first div encountred by the javascript. In other words, I want a way to show/hide the description of each record in datalist indivigdually. Please provide your input. Thank you in advance.

<asp:Label ID="TPlaceLabel" runat="server" Text

View Complete Post

More Related Resource Links

Javascript in Datalist .... on click of Button Show details in Another DIV

Hello Experts My Question is how to Set / call javascript in a Datalist , Where to define / Add Attrbutes for that / My Functionatilty requires on click of a button i have to show details in another DIVThanks ... Any Code Example is Much appreciated .. Thanks

How can we show and hide iframes progarmmtically in javascript, calling the function from a seprate

I have currently placed 5 iframes inside 5 divs and i m trying to show and hide iframes by following code if (docid == idpath_array[1])             {                document.all("div1").style.display = 'block';                document.all("div2").style.display = 'none';                document.all("div3").style.display = 'none';                document.all("div4").style.display = 'none';                document.all("div5").style.display = 'none';            } but the problem is that after setting style of one div as display:none,I am not able to display the same div latter by setting display:block hence programmically I am not able to display an already hidden iframe by making display:block in div

Help:JAVASCRIPT (checkAll) & (Hide/Unhide GridView1) in a Datalist with a nested Gridview


Hey guys,

 I'm at my wits end on this one looked/Searched/Played/Experimented and I need your help if you can.

This page is going to be primarily used on a mobile device using Win Mobile 5


Need to Accomplish:

  1. Prevent Postback(serverside) of Page using JavaScript (Postback's slow down the page on mobile device)


JavaScript Requests:

  1. Hide and UnHide the Nested Gridview1 by Clicking on a imagebutton1 in DataList1icon_minized_collapse.pngicon_expand_collapse.png
  2. CheckBox in DataList1 Checks All and UNChecks All, CheckBox in just the related Gridview1


Controls :

  1. Gridview1 nested inside DataList1


Note: Datalist1 and Gridview1 have datasource's in production. The Codebehind page is just appling test data to help me figure this out.


Thank you all in advance for helping me with this.

Example data below:<

Using Javascript to show/hide asp elements


I have an address page that validates via USPS.  The user inputs their address and clicks the "validate" button.  The "validate" button goes away, the validated address is displayed and a "submit" button shows up.  If a user makes a change to their address after they have validated, they need to be forced to validate again.  However that's not happening.  The visibility doesn't change at all.

Here is my script:

<script language="javascript" type="text/javascript">
    function HideValidated(form) {
        document.getElementById('<%= trValidate.ClientID %>').style.display = "inline";
        document.getElementById('<%= trCorrected.ClientID %>').style.display = "none";
        document.getElementById('<%= trSubmit.ClientID %>').style.display = "none";

Here is part of my HTML:

<asp:TableRow runat="server" ID="trValidate">
        <asp:TableCell><asp:LinkButton ID="btnValidate" runat="server" OnClick="btnVa

datalist image slide show problem


hi friends

i am binding  images dynamically(back end)for a datalist .iam applying a slideshow for it .I am getting a problem to apply slideshow for dyanmically binded images.If the define in a div statically it working perfectly

for example pls go through my code below:

<script type="text/javascript">
$(document).ready(function() {
        fx: 'scrollLeft' // choose your transition type, ex: fade, scrollUp, shuffle, etc...

<div class="slideshow">
        <img src="images/30_dummy.jpg" width="200" height="200" />
        <img src="images/aquarius.gif" width="200" height="200" />
        <img src="images/star.gif" width="200" height="200" />
        <img src="images/the-proud-indian-flag-1.jpg" width="200" height="200" />

I above code works perfectly and the slide show e

javascript function not working with datalist


I have a datalist and there is a check box within this datalist in a .ascx page.  But I have to have an image out side the datalist.  So here is the code and its not owrking.  When I click on the image, I dont see any alert box. 


<script Language="JavaScript" type="text/javascript">


function validate_checkbox()



// set var checkboxSelect to zero

var checkboxSelect = 0;

var sProducts = "";


var multiCheck = window.document.forms["frmCompare"].CompareCheck.length;


if (multiCheck != null)


    // Loop from zero to the one minus the number of checkbox button selections

    for (counter = 0; counter < window.document.forms["frmCompare"].CompareCheck.length; counter++)


        if (window.document.forms["frmCompare"].CompareCheck[counter].checked)


            var seperator = (checkboxSelect > 0)?",":"";

            sProducts += sep

Show/hide dashboard items Sharepoint



I'm having a problem with trying to filter the appearence of items on a sharepoint site by having a dropdown list and filter according to the current value, The method i am using atm is by having javascript and by looping through all the <td> on page. This works for list views, But not for Performance point dashboard objects/web parts, +

Is there a way to somehow get the title of all performance point objects on a page, fill the dropdownbox show/hide depending on the selected item in the box?



Issues with dynamically created TabContainer (Hide/Show TabPanel)


I have a web page that contains an UpdatePanel. In that panel, there is a TabContainer control that has 5 TabPanels, only the first one "Tab 1" will be displayed during initial page load. There is an Add button in "Tab 1", whenever it gets clicked, I will add (show) the next TabPanel (Tab 2, Tab 3, etc., all the way to Tab 5). "Tab 2" thru "Tab 5" contains a Close button that will close (hide) the current tab when clicked.

I'm doing all of these from code behind (dynamically create controls in Page_Init event and re-generate them during postback, track each TabPanel's content in a session variable, etc.), and everything seems to work just fine IF after adding several TabPanels, I remove  them in order (i.e. remove Tab 5 first, then Tab 4, Tab 3, etc.). It will NOT work whenever I try to remove a tab in the middle, then I will get all kinds of strange results.

I've attached the sample codes here for reviewing and testing. Any help is greatly appreciated.


==================== demo.aspx page ====================

<%@ Page

NewForm.aspx - Show/Hide fields dynamically

I have about 20 + fields in a custom list.  I want to be able to show and hide fields depending on user selection.  Does anyone know a way of accomplishing this? Ive tried some embedded javascript but can't seem to get it working in sharepoint. Please help :)http://lbellows.blogspot.com http://www.ptreviews.net

Expand rows in a data grid to show details in the same page

<asp:templatecolumn headertext="Purchase Order"> <headerstyle horizontalalign="center"></headerstyle> <itemstyle horizontalalign="center"></itemstyle> <itemtemplate> <%# DataBinder.Eval(Container.DataItem, "PurchaseOrder") %> </itemtemplate> </asp:templatecolumn> <asp:templatecolumn headertext="Order"> <headerstyle horizontalalign="center"></headerstyle> <itemstyle horizontalalign="center"></itemstyle> <itemtemplate> <a href="OrderDetail.aspx?Order=<%# DataBinder.Eval(Container.DataItem, "OrderNumber")%>"> <%# DataBinder.Eval(Container.DataItem, "OrderNumber") %> </a> </itemtemplate> </asp:templatecolumn> <asp:templatecolumn headertext="Ack Date"> <headerstyle horizontalalign="center"></headerstyle> <itemstyle horizontalalign="center"></itemstyle> <itemtemplate> <%# DataBinder.Eval(Container.DataItem, "AcknowledgeDate") %> </itemtemplate> </asp:templ

How to sequentially show/hide

I appologize upfront if this is a noob question.  I have to teach myself this stuff and have no one to ask questions of.  I promise I searched both online and in books for the answer before posting, but still can't make sense of this. Initially I should state that this is all supposed to be wrapped up in a modalPopup.  I have no problem getting the popup to trigger and display, the issue is the content. I need to create a page that will display a series of paragraphs sequentially (instructional material).  I would like to have each "step" of the instructions put into a <div> with a "next" button that lets the user confirm that they have understood the step and ready for the next step.  I would assign each <div> a unique id, eg. "Div1", "Div2", "Div3", etc. I would assign the "visibility" attribute of Div1 to "visible", and all other Div's to "hidden".  When the user clicks the "next" button, Div1 would have its "visibility" attribute changed to "hidden" and Div2 changed to "visible".  This process would repeat until all the steps have been completed. I have seen some code that uses the system method getElementByID() but I just simply could not figure out how to get it going.&n

DataGrid Row Details Toggle of sub datagrid

I have a DataGrid that has uses a RowDetailsTemplateSelector.  The selector returns a DataTemplate that contains a DataGrid if the number of team members is greater than 0, other wise the selector returns null.  The DataGrid in the DataTemplate uses the same selector to achieve a grouping of nested datagrids.  Following the answer from Linda Liu to the question "RowDetails Visibility Toggle" I am able to control on the main DataGrid when the row details are shown and when they are hidden.  Since the sub datagrids are just duplicates of the main DataGrid I would like to have the same functionality.  The problem I am running into is trying to get a DataGrid from a DataGridRow instance since I don't know how many sub datagrids there are going to be. Any advice on how to do this is much appreciated.

After async postback, hide/show panel stops working

I have a Gridview in an UpdatePanel with a column containing an "expander" button that shows (and hides) more detail beneath its row of data.  It all works great until the user pages the gridview.  After the async postback to page the gridview, the javascript function to toggle hide/show appears to work flawlessly (the expander's button image even changes correctly), but the detail panel just doesn't show on the page.Note that my expander control supports a "AsyncTriggerId" property that, if set in the markup, will rebind the javascript toggle function when that control triggers an async postback (see OnPreRender below)Here's the hide/show toggle javascript:function toggleExpander(divId, imgId) { var div = document.getElementById(divId); var img = document.getElementById(imgId); var cssClass = div.getAttribute("className"); if (div.style.display == "" || div.style.display == "none" || cssClass == "hidden") { div.style.display = "inline"; div.setAttribute("className", ""); img.src = "images/dir_down.png"; mce_src = "images/dir_down.png"; img.alt = "Collapse to hide details"; } else { div.style.display = "none"; img.src = "images/dir_rig

To Hide multiple items having same ID using Javascript

How to access items having same ID using Javascript ?I want to hide these items.Urgent Help Requried .......

javascript to hide ModalPopupExtender not working

Hello, I've seen some other posts about this but never found a resolution to it. I have a gridview control with another gridview inside each row. I'm using a masterpage and I have a TabContainer to boot and of course updatepanels. I'm showing my gridview child via a modal popup extender. It shows great and other JQuery operations are working as expected. I have a pageLoad javascript that does the following: function pageLoad(sender, args) {      $addHandler(document, "keydown", OnKeyPress);   } And, function OnKeyPress(args) {      if (args.keyCode == Sys.UI.Key.esc) {         var mp = $find('<%=mpe1.clientid%>');         mp.hide();      }   } The var mp seems to be returning an object as '<%=mpe1.clientid%>' returns the clientid, and the mp.hide() line executes without error. It doesn't hide the popup however. What can be the problem?S

How to show the Javascript errors in Label?

Hi,I would like to show the javascript errors in Label,not in some kind of pop up,so the look and feel will be similar to Validation controls,but I dont want to use Validation control.Please view the sample code:<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title>Untitled Page</title></head><body>    <form id="form1" runat="server">    <div>    <script type="text/javascript">    function makevisible()    {    if (document.getElementById("<%=txt1.ClientID%>").value=="")      {                 alert("Name Feild can not be blank");              //   document.getElementById("<%=txt1.ClientID%>").focus();                 document.getElementById("<%=lblErr.ClientID%>").value="Name can't be blank!";                 return false;  &nb

Master Page show/hide links

Hello,        I'm fairly new to mvc and I'm just looking for a best practice on hiding action links in the master page depending on the user logged in. Since the master page doesn't receive a model I'm not sure how to pull this off the right(MVC) way. Thanks
ASP.NetWindows Application  .NET Framework  C#  VB.Net  ADO.Net  
Sql Server  SharePoint  Silverlight  Others  All   

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend