Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Display/hide a label  with javascript

Posted on 2012-08-18
45
Medium Priority
?
3,205 Views
Last Modified: 2012-08-24
I have a listview and inside the itemtemplate, i have this:

<ItemTemplate>
   ....
   <asp:Label ID="lstar1"  style=" display:none"  runat="server" Text="*" ></asp:Label>
   ....
</ItemTemplate>

Open in new window


I have a radiobutton and onclick event, I call a Javascipt code to make that text visible.

<asp:RadioButton runat="server" ID="rbConfirm" onclick="radioClick(this)"  GroupName="patient" Text="Confirm:" />

Open in new window


Javascript :

<script type="text/javascript"> 
       function radioClick(obj) {
           var tableElement = document.getElementsByTagName('lstar2');
           alert(tableElement); // *****I get [objectHTMLcollection here
                     document.getElementsByTagName('lstar2').style.display = 'block';
       } 
</script>

Open in new window


I get this error:

Error: Unable to set value of the property 'display': object is null or undefined

How can  I do this?
0
Comment
Question by:Camillia
  • 23
  • 15
  • 3
  • +2
45 Comments
 
LVL 9

Expert Comment

by:experts1
ID: 38308435
Try mod below:
note: Label ID="lstar1" and not "lstar2"

script type="text/javascript"> 
       function radioClick(obj) {
           var tableElement = document.getElementById('lstar1');
           alert(tableElement.style.display); // *****I get [objectHTMLcollection here
                     document.getElementById('lstar1').style.display = 'block';
       } 
</script>

Open in new window

0
 
LVL 7

Author Comment

by:Camillia
ID: 38308479
no, i still get Unable to get value of the property 'style': object is null or undefined

This comes out as null
document.getElementById('lstar1');

Also tried below and still same error

var tableElement = document.getElementsByTagName('lstar1');
           alert(tableElement); // *****I get [objectHTMLcollection here
           document.getElementsByTagName('lstar1').style.display = 'block';
0
 
LVL 18

Expert Comment

by:Rajar Ahmed
ID: 38308788
jquery ? which can be easier to sort out these things .
$("[id$='lstar1']").css("style","block");

Open in new window

Include this on aspx page.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 7

Author Comment

by:Camillia
ID: 38308794
i'll try
0
 
LVL 8

Expert Comment

by:Barry62
ID: 38309588
I think the problem is that when .Net renders the page, it tacks on a 'placeholder' to the ID you give the label.  Since javascript is outside of the .Net code, it is looking at the rendered source code in the page.  The rendered ID is not the same as the ID you coded.  Do this:  Run your page and view the source code.  Write down the actual rendered ID of your label and put that in your javascript function.  It should work then.

It may look something like ctl100_Placeholder_lstar1
0
 
LVL 7

Author Comment

by:Camillia
ID: 38309612
yeah, so I did add client ID like this but this throws an error too
alert(document.getElementByTagName('<%=lvPatientDetail.FindControl("lstar1").ClientID%>'));

lvPatientDetail is the listview.

ClientId should be able to find it. I'm googling for more examples
0
 
LVL 18

Expert Comment

by:Rajar Ahmed
ID: 38309625
have you tried the jquery approach ,
 can u post your list view Source?
0
 
LVL 7

Author Comment

by:Camillia
ID: 38309653
I'm not familair with Jquery so didnt try it. This is the listview. It's a radiobutton and lstar1 label

<asp:ListView ID="lvPatientDetail" 
              
               OnItemCommand = "lvPatientDetail_ItemCommand" 
               OnSelectedIndexChanging="lvPatientDetail_SelectedIndexChanging"
              runat="server">
               <LayoutTemplate>
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                
                       <tr runat="server" id="itemPlaceholder" />
                </table>
    
    </LayoutTemplate>
    <ItemTemplate>
                
                 
                  <tr>
                    <td width="137"><label  for="full_name">Referred By:</label></td>
                    <td width="310"><asp:LinkButton CausesValidation="false" runat="server" CommandName="Select"   Text='<%# Eval("FromProvider")%>'></asp:LinkButton></td>
                    <td width="280">&nbsp;</td>
                  </tr> 

                   <tr>
                    <td width="137"><label for="full_name">Referred To:</label></td>
                    <td width="310"><%# Eval("ToProvider")%></td>
                    <td width="280">&nbsp;</td>
                  </tr> 
            
              <tr>
                <td width="137"><label for="phone">Patient Name:</label></td>
                <td width="310"><asp:LinkButton runat="server"  CommandName="Select2"   Text='<%# Eval("PatientName")%>'></asp:LinkButton></td>
                 <td width="280">&nbsp;</td>
              </tr>
              <tr>
                <td width="137"><label for="phone">Patient Phone:</label></td>
                <td width="310"><%# Eval("PatientPhone")%></td>
                 <td width="280">&nbsp;</td>
              </tr>

            
                 
            
              
                  <tr>
                    <td width="137" title ="Please enter date/time of appointment and check confirm"><label for="full_name"><asp:RadioButton runat="server" ID="rbConfirm" onclick= "radioClick(this)"
 GroupName="patient" Text="Confirm:" /></label></td>
                    <td width="310"> <span class="required"> <asp:Literal runat="server"  ID="lMsg1"></asp:Literal> </span>
                    </td>
                    <td width="280"></td>
                 </tr> 
              
                  <tr>
                    <td width="137"><label for="full_name"></label></td>
                    <td width="310">
                   <%--   <asp:TextBox        ID="txtDate"     style="width:75px; font-size:15px;padding:5px;"     runat="server">      </asp:TextBox>  --%>
                    Appointment Date & Time: <span class="required"><asp:Label ID="lstar1"   style="display: none"   runat="server" Text="*" ></asp:Label> </span> <telerik:RadDateTimePicker ID="txtDate"    runat="server"> 
                      <TimeView StartTime="8:0:0" EndTime="20:15:00" runat="server"    Interval="0:15:0" />
                      
                     </telerik:RadDateTimePicker>
                    
                 
                   </td>
                    <td width="280">
                      <asp:CheckBox runat="server" Text="Confirm Appt.?" ID="chkConfirm" />
                       <span class="required"><asp:Literal ID="lstar2" Visible="false" runat="server" Text="*"></asp:Literal></span>

                      <%-- <asp:Literal runat="server" ID="lMsg3"></asp:Literal>--%>
                     <span class="feedback">
                     <%--<asp:CustomValidator ID="CustomValidator1" runat="server"      ErrorMessage="Confirm is required."  onservervalidate="CustomValidator1_ServerValidate"></asp:CustomValidator>--%>
                    <asp:Literal runat="server" Visible="false"  Text='<%# Eval("confirm")%>' ID="ckhcompleteValue"></asp:Literal>
                    </td>
                 </tr> 
               </ContentTemplate>
             </asp:UpdatePanel>
<%--
                  <tr>
                    <td width="137"></td>
                    <td width="310">
                    
                    
                   
                    </td>
                    <td width="280">
                    
                    </td>
                 </tr> --%>
             
             
                 <tr>
                    <td width="137" title="We have made an unsuccessful attempt to schedule an appointment with the patient. Patient was called on date below. Please enter the date the patient was called" ><asp:RadioButton AutoPostBack="true" OnCheckedChanged="rbSelection_CheckedChanged" runat="server" ID="rbUnable" GroupName="patient" Text="Unable to Sch." /></td>
                   <td width="310"><span class="required"> <asp:Literal runat="server" ID="lmsg4"></asp:Literal> </span></td>
                   <td width="280"></td>
                 </tr>
                  <tr>
                  <td width="137"></td>
                  <td width="310"> First call: <span class="required"> <asp:Literal ID="lStar3" Visible="false" runat="server" Text="*"></asp:Literal></span><br />  
                    <telerik:RadDateTimePicker ID="rdUnableDate1"    runat="server">
                                  <TimeView ID="TimeView1" StartTime="8:0:0" EndTime="20:15:00" runat="server"    Interval="0:15:0" />
                      
                                 </telerik:RadDateTimePicker>
                                 <br />

                               
                                 </td>
                                 
                   
                 <%-- <td width="280"> 
                      Second call: <br /> <telerik:RadDateTimePicker ID="rdUnableDate2"    runat="server">
                                  <TimeView ID="TimeView2" StartTime="8:0:0" EndTime="20:15:00" runat="server"    Interval="0:15:0" />
                      
                                 </telerik:RadDateTimePicker>
                                 </td>--%>
                </tr>

                  </ContentTemplate>
             </asp:UpdatePanel>

                 <tr>
                    <td width="137"><label for="full_name">Note:</label></td>
                    <td width="310">
             
                    <asp:TextBox runat="server" ID="txtConfirmNote" MaxLength="250"  CssClass="InputFields"></asp:TextBox></td>
                    <td width="280">
                   <%-- <span class="feedback">
                      <asp:Literal runat="server" ID="lMsg2"></asp:Literal>
                     </span>--%>
                     </td>
                 </tr> 
                

                 

     <asp:updatepanel ID="updatepanel2" UpdateMode="Conditional" runat="server"> 
        <Triggers> 
            <asp:PostBackTrigger ControlID="rbUnable" />  
        </Triggers> 
        <ContentTemplate> 
 
        </ContentTemplate> 
    </asp:updatepanel> 
              

    </ItemTemplate>
   

   </asp:ListView>

Open in new window

0
 
LVL 18

Expert Comment

by:Rajar Ahmed
ID: 38309685
Add this on aspx page, and check  it .
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script>

        function radioClick() {
            $("[id*='lstar1']").css("display", "block");
        }

Open in new window

   
<asp:RadioButton runat="server" ID="rbConfirm" onclick="radioClick()"  GroupName="patient" Text="Confirm:" />
0
 
LVL 8

Expert Comment

by:Barry62
ID: 38309775
Did you look at the source after you ran the page?  What did the rendered ID look like?
0
 
LVL 7

Author Comment

by:Camillia
ID: 38309922
Looks like this

<span id="DashboardContentPlaceHolder1_lvPatientDetail_lstar1_0" style="display: none">*</span>
0
 
LVL 25

Expert Comment

by:Rouchie
ID: 38310884
You label's ID value is being generated from the Placehold, plus the ListView, plus the item within the view.

You should therefore reference the Label ID from within the ItemDataBound event of the listview, because each label on each row will have a unique ID.

	Protected Sub lv_ItemDataBound(sender As Object, e As ListViewItemEventArgs) Handles lv.ItemDataBound
		Dim lstar1 As Label = CType(e.Item.FindControl("lstar1"), Label)
		Dim rbConfirm As RadioButton = CType(e.Item.FindControl("rbConfirm"), RadioButton)
		rbConfirm.Attributes.Add("onclick", "radioClick(this, '" & lstar1.ClientID & "')")
	End Sub

Open in new window


<script type="text/javascript"> 
       function radioClick(obj, lbl)  {
           lbl.style.display = 'block';
       } 
</script>                               

Open in new window

0
 
LVL 9

Expert Comment

by:experts1
ID: 38312347
I realize your intent seems to be more to show the
display status of "lstar1"
So try mod below using "getAttribute":
<script type="text/javascript">
function radioClick(obj) {
           var tableElement = document.getElementById('lstar1');
           alert(tableElement.style.getAttribute("display")); 
                  if (document.getElementById('lstar1').style.display == 'block') {
                       }
       } 
</script>

Open in new window

0
 
LVL 7

Author Comment

by:Camillia
ID: 38312361
i'll try today and post back. Thanks for sticking with this
0
 
LVL 25

Expert Comment

by:Rouchie
ID: 38312390
How many occurrences of the label are you likely to see on-screen?  The cleanest solution is to use my approach because it targets the exact ID of the element without any searching being required.  The ID rendered in the browser is not the same as the ID you specify in ASP.NET and this is for good reason, so you must take care to identify the control at the correct point in the page.
You could also wait until after the ListView is bound, then loop back through the items and generate the JavaScript that way, it would be just as easy.  Let me know if you want a sample if the above doesn't work for you.
0
 
LVL 7

Author Comment

by:Camillia
ID: 38312420
yeah, let me look at the solution and play around with. I will post back.
0
 
LVL 7

Author Comment

by:Camillia
ID: 38313375
I tried both methods and i get
Error: Unable to set value of the property 'display': object is null or undefined

I put an alert in the Javascript and i see it getting called. I put another alert and I see the label's id as DashboardContentPlaceHolder1_lvPatientDetail_lstar1_0. I click ok to that alert box, goes to set the style and i get that error. This is the JS

<script type="text/javascript">
    function radioClick(obj, lbl) {
        alert("test");
        alert(lbl);
        lbl.style.display = 'block'; //throws error here
    }
</script>
0
 
LVL 7

Author Comment

by:Camillia
ID: 38314334
I wonder if it's because ASP.Net's label doesnt have a "style" property.
0
 
LVL 25

Expert Comment

by:Rouchie
ID: 38315081
ASP:Label renders as <span> so the style attribute is present.  Your code is fine, and the label ID is getting passed correctly.

Reading up on your error, it appears that other people using IE8 are getting this error.  Are you using IE8?  Apparently its caused by some browser quirk relating to standards compliance.
0
 
LVL 25

Expert Comment

by:Rouchie
ID: 38315093
Could you also paste the code from your listview so I can see how the JS call is being rendered please?
0
 
LVL 7

Author Comment

by:Camillia
ID: 38316765
No, i'm using IE9. This is the entire code. Mind boggling


<script type="text/javascript">
    function radioClick(obj, lbl) {
        alert("test");
        alert(lbl);
        lbl.style.display = 'block'; //OnCheckedChanged="rbSelection_CheckedChanged" AutoPostBack="true"
    } 
</script>    


<script type="text/javascript" language="javascript" src="../../js/jquery.min.js" ></script>
<script type="text/javascript">
    jQuery.fn.autotabindex = function () {
        var keypressed = null;
        jQuery(this).click(function () {
            $(this).select();
        });
        jQuery(this).keyup(function (e) {
            if (window.event) keycode = window.event.keyCode;
            else if (e) keycode = e.which;
            keypressed = keycode;
            switch (keypressed) {
                // ignore the following keys       
                case 9: // tab
                    return false;
                case 16: // shift
                    return false;
                case 20: // capslock
                    return false;
                default: // any other keyup actions will trigger
                    var maxlength = jQuery(this).attr('maxlength'); // get maxlength value
                    var inputlength = jQuery(this).val().length; // get the length of the text
                    if (inputlength >= maxlength) { // if the text is equal of more than the max length
                        next = parseInt($(this).attr("tabindex")) + 1;
                        end = next + 5;
                        for (next; next < end; next++) {

                            if ($("[tabindex='" + next + "']").is(':visible')) {
                                $("[tabindex='" + next + "']").select();
                                $("[tabindex='" + next + "']").focus();
                                break
                            }
                        }
                    }
            }
        });
    }
</script>
<script type="text/javascript">
    $(document).ready(function () {
        $('.autotabindex').autotabindex();
    });
</script>
 <style type="text/css">
   .modalBackground
{
	background-color:#a5b2c2;
	filter:alpha(opacity=70);
	opacity:0.7;
}

.modalPopup
{
 	/*background-color:Red;*/
	border-width:3px;
	border-style:solid;
	border-color:#D4D6F8;
	padding:3px;
	
}
 </style>

<div id="sign-up_area">
<div class="ie_wrapper">
<%--<div class="admin_content2">
 <div class="admin_box">



  <br />



</div>
</div>--%>

<%--<asp:UpdatePanel runat="server">
 <ContentTemplate>--%>
 
<div class="ie_wrapper">
<div class="admin_content2">
 <div class="admin_box">

 <asp:Panel runat="server" ID="pnlPopup"   style="display:none;" >
<asp:UpdatePanel runat="server" ID="updPnlProviderdetail" UpdateMode="Conditional">
 <ContentTemplate>
   <asp:Button runat="server" ID="btnShowPopup"  style="display:none" />
   

   <asp:ModalPopupExtender ID="mdlPopup"     TargetControlID="btnShowPopup" PopupControlID="pnlPopup"
                               BackgroundCssClass="modalBackground"      CancelControlID="btnClose" runat="server"></asp:ModalPopupExtender>

    <fieldset>
  <div class="admin_box">
   <legend class="fontface">Healthcare Provider Office Information</legend>
  <asp:ListView ID="lvIncomingProviderdetail"  Visible="false"
                OnItemDataBound = "lvIncomingProviderdetail_ItemDataBound"  
              runat="server">

               <LayoutTemplate>

                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                 
                       <tr runat="server" id="itemPlaceholder" />
                </table>

              
    </LayoutTemplate>
    <ItemTemplate>
                
                 
                  <tr>
                    <td width="137"><label for="full_name">Company Name:</label></td>
                    <td width="310"><%# Eval("BusinessName")%></td>
                    <td width="280">&nbsp;</td>
                  </tr> 
               <%-- <tr>
                    <td width="137"><label for="full_name">Office Name:</label></td>
                    <td width="310"><%# Eval("OfficeName")%></td>
                    <td width="280">&nbsp;</td>
                  </tr>--%>

                   <tr>
                  <td width="137"><label for="addressline1">Website:</label></td>
                  <td width="310"> <asp:HyperLink runat="server" Text='<%# Eval("website") %> '  Target="_blank" ID="hlWebsite" NavigateUrl='<%# Eval("WebSite")%>'></asp:HyperLink>
                     </td>
                  <td width="280">&nbsp;</td>
                 </tr>
                  <tr>
                  <td width="137"><label for="addressline1">Address:</label></td>
                  <td width="310"><%# Eval("Address")%></td>
                  <td width="280">&nbsp;</td>
                 </tr>
                  <tr>
                <td width="137"><label for="addressline2">Suite, Floor, etc:</label></td>
                <td width="310"><%# Eval("AddressOther")%></td>
                <td width="280">&nbsp;</td>
              </tr>
              <tr>
                <td width="137"><label for="city">City, State, Zip:</label></td>
                <td width="310"><%# Eval("city")%>, <%# Eval("name")%>, <%# Eval("postal")%></td>
                <td width="280">&nbsp;</td>
              </tr>

              <tr>
                <td width="137"><label for="phone">Office Phone:</label></td>
                <td width="310"><%# Eval("Phone")%></td>
                <td width="280">ext: <%# Eval("ext")%></td>
              </tr>
             
              <%--  <tr>
                    <td width="137"><label for="full_name">Office Manager:</label></td>
                    <td width="310"><%# Eval("ContactName")%></td>
                    <td width="280">&nbsp;</td>
                 </tr> --%>

              

                

    </ItemTemplate>
    

  </asp:ListView>
  <div class="edit_icon">  <asp:LinkButton runat="server" ID="btnClose"  Text="close"  CausesValidation="false" /></div>
 </div>
        
        </fieldset>
 </ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>

<asp:Panel runat="server" ID="pnlPopup2"   style="display:none; " >
<asp:UpdatePanel runat="server" ID="updPnlProviderdetail2" UpdateMode="Conditional">
 <ContentTemplate>
   <asp:Button runat="server" ID="btnShowPopup2"  style="display:none" />
   

   <asp:ModalPopupExtender ID="mdlPopup2"     TargetControlID="btnShowPopup2" PopupControlID="pnlPopup2"
                               BackgroundCssClass="modalBackground"     CancelControlID="btnClose2" runat="server"></asp:ModalPopupExtender>

    <fieldset>
  <div class="admin_box">
   <legend class="fontface">Additional Patient Information</legend>
  <asp:ListView ID="lvAdditionalPatientInfo"  Visible="false"
                
              runat="server">

               <LayoutTemplate>

                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                 
                       <tr runat="server" id="itemPlaceholder" />
                </table>

              
    </LayoutTemplate>
    <ItemTemplate>
                
                 
                  <tr>
                    <td width="137"><label for="full_name">Address:</label></td>
                    <td width="310"><%# Eval("ADDRESS")%></td>
                    <td width="280">&nbsp;</td>
                  </tr> 
                <tr>
                    <td width="137"><label for="full_name">Apt. #, etc:</label></td>
                    <td width="310"><%# Eval("addressOther")%></td>
                    <td width="280">&nbsp;</td>
                  </tr>

                   <tr>
                  <td width="137"><label for="addressline1">City, State, Zip:</label></td>
                  <td width="310"> <%# Eval("CityStateZip")%>
                     </td>
                  <td width="280">&nbsp;</td>
                 </tr>
                  <tr>
                  <td width="137"><label for="addressline1">Gender:</label></td>
                  <td width="310"><%# Eval("Gender")%></td>
                  <td width="280">&nbsp;</td>
                 </tr>
                  <tr>
                <td width="137"><label for="addressline2">DOB:</label></td>
                <td width="310"><%# Eval("DOB")%></td>
                <td width="280">&nbsp;</td>
              </tr>
              <tr>
                <td width="137"><label for="city">SSN:</label></td>
                <td width="310"><%# Eval("SSN")%></td>
                <td width="280">&nbsp;</td>
              </tr>

                <tr>
                <td width="137"><label for="phone">Reason:</label></td>
                <td width="310"><%# Eval("reason")%></td>
                <td width="280"></td>
              </tr>

              <tr>
                <td width="137"><label for="phone">Insurance:</label></td>
                <td width="310"><%# Eval("insurance")%></td>
                <td width="280"></td>
              </tr>
             
                <tr>
                    <td width="137"><label for="full_name">Insurnace ID #:</label></td>
                    <td width="310"><%# Eval("insuranceIDNumber")%></td>
                    <td width="280">&nbsp;</td>
                 </tr> 
                 <tr>
                    <td width="137"><label for="last_name">Self Pay?:</label></td>
                    <td width="310">
                      <%# Eval("SelfPay")%>
                    </td>
                    <td width="280"></td>
               </tr>
               <tr>
                <td width="137"><label for="phone">Patient Record #:</label></td>
                <td width="310"><%# Eval("PatientRecordNumber")%></td>
                <td width="280"></td>
              </tr>
              
               <tr>
                <td width="137"><label for="phone">Appoit. Needed:</label></td>
                <td width="310"><%# Eval("AppoitNeeded")%></td>
                <td width="280"></td>
              </tr>  
              
                <tr>
                <td width="137"><label for="phone">Patient Avlb:</label></td>
                <td width="310"><%# Eval("PatientAvailable")%></td>
                <td width="280"></td>
              </tr>  
              
              <tr>
                <td width="137"><label for="phone">Patient UnAvlb:</label></td>
                <td width="310"><%# Eval("PatientUnAvailable")%></td>
                <td width="280"></td>
              </tr>  
              
                <tr>
                <td width="137"><label for="phone">Course Of Action:</label></td>
                <td width="310"><%# Eval("CourseOfAction")%></td>
                <td width="280"></td>
              </tr>      

                

    </ItemTemplate>
    

  </asp:ListView>
  <div class="edit_icon">  <asp:LinkButton runat="server" ID="btnClose2"  Text="close"  CausesValidation="false" /></div>
 </div>
        
        </fieldset>
 </ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>

 <fieldset> <legend class="fontface">Patient Information</legend>

  <asp:ListView ID="lvPatientDetail" 
              
               OnItemDataBound = "test"
               OnItemCommand = "lvPatientDetail_ItemCommand" 
               OnSelectedIndexChanging="lvPatientDetail_SelectedIndexChanging"
              runat="server">
               <LayoutTemplate>
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                
                       <tr runat="server" id="itemPlaceholder" />
                </table>
    
    </LayoutTemplate>
    <ItemTemplate>
                
                 
                  <tr>
                    <td width="137"><label  for="full_name">Referred By:</label></td>
                    <td width="310"><asp:LinkButton CausesValidation="false" runat="server" CommandName="Select"   Text='<%# Eval("FromProvider")%>'></asp:LinkButton></td>
                    <td width="280">&nbsp;</td>
                  </tr> 

                   <tr>
                    <td width="137"><label for="full_name">Referred To:</label></td>
                    <td width="310"><%# Eval("ToProvider")%></td>
                    <td width="280">&nbsp;</td>
                  </tr> 
            
              <tr>
                <td width="137"><label for="phone">Patient Name:</label></td>
                <td width="310"><asp:LinkButton runat="server"  CommandName="Select2"   Text='<%# Eval("PatientName")%>'></asp:LinkButton></td>
                 <td width="280">&nbsp;</td>
              </tr>
              <tr>
                <td width="137"><label for="phone">Patient Phone:</label></td>
                <td width="310"><%# Eval("PatientPhone")%></td>
                 <td width="280">&nbsp;</td>
              </tr>

            
                 
             <asp:UpdatePanel runat="server" UpdateMode="Conditional">
               <ContentTemplate>
               
              
                  <tr>
                    <td width="137" title ="Please enter date/time of appointment and check confirm"><label for="full_name"><asp:RadioButton runat="server" ID="rbConfirm" onclick="radioClick(this)"  GroupName="patient" Text="Confirm:" /></label></td>
                    <td width="310"> <span class="required"> <asp:Literal runat="server"  ID="lMsg1"></asp:Literal> </span>
                    </td>
                    <td width="280"></td>
                 </tr> 
              
                  <tr>
                    <td width="137"><label for="full_name"></label></td>
                    <td width="310">
                   <%--   <asp:TextBox        ID="txtDate"     style="width:75px; font-size:15px;padding:5px;"     runat="server">      </asp:TextBox>  --%>
                    Appointment Date & Time: <span class="required"><asp:Label ID="lstar1"   style="display:none"   runat="server" Text="*" ></asp:Label> </span> <telerik:RadDateTimePicker ID="txtDate"    runat="server"> 
                      <TimeView StartTime="8:0:0" EndTime="20:15:00" runat="server"    Interval="0:15:0" />
                      
                     </telerik:RadDateTimePicker>
                    
                 
                   </td>
                    <td width="280">
                      <asp:CheckBox runat="server" Text="Confirm Appt.?" ID="chkConfirm" />
                       <span class="required"><asp:Literal ID="lstar2" Visible="false" runat="server" Text="*"></asp:Literal></span>

                      <%-- <asp:Literal runat="server" ID="lMsg3"></asp:Literal>--%>
                     <span class="feedback">
                     <%--<asp:CustomValidator ID="CustomValidator1" runat="server"      ErrorMessage="Confirm is required."  onservervalidate="CustomValidator1_ServerValidate"></asp:CustomValidator>--%>
                    <asp:Literal runat="server" Visible="false"  Text='<%# Eval("confirm")%>' ID="ckhcompleteValue"></asp:Literal>
                    </td>
                 </tr> 
               </ContentTemplate>
             </asp:UpdatePanel>
<%--
                  <tr>
                    <td width="137"></td>
                    <td width="310">
                    
                    
                   
                    </td>
                    <td width="280">
                    
                    </td>
                 </tr> --%>
             <asp:UpdatePanel runat="server">
               <ContentTemplate>
             
                 <tr>
                    <td width="137" title="We have made an unsuccessful attempt to schedule an appointment with the patient. Patient was called on date below. Please enter the date the patient was called" ><asp:RadioButton AutoPostBack="true" OnCheckedChanged="rbSelection_CheckedChanged" runat="server" ID="rbUnable" GroupName="patient" Text="Unable to Sch." /></td>
                   <td width="310"><span class="required"> <asp:Literal runat="server" ID="lmsg4"></asp:Literal> </span></td>
                   <td width="280"></td>
                 </tr>
                  <tr>
                  <td width="137"></td>
                  <td width="310"> First call: <span class="required"> <asp:Literal ID="lStar3" Visible="false" runat="server" Text="*"></asp:Literal></span><br />  
                    <telerik:RadDateTimePicker ID="rdUnableDate1"    runat="server">
                                  <TimeView ID="TimeView1" StartTime="8:0:0" EndTime="20:15:00" runat="server"    Interval="0:15:0" />
                      
                                 </telerik:RadDateTimePicker>
                                 <br />

                               
                                 </td>
                                 
                   
                 <%-- <td width="280"> 
                      Second call: <br /> <telerik:RadDateTimePicker ID="rdUnableDate2"    runat="server">
                                  <TimeView ID="TimeView2" StartTime="8:0:0" EndTime="20:15:00" runat="server"    Interval="0:15:0" />
                      
                                 </telerik:RadDateTimePicker>
                                 </td>--%>
                </tr>

                  </ContentTemplate>
             </asp:UpdatePanel>

                 <tr>
                    <td width="137"><label for="full_name">Note:</label></td>
                    <td width="310">
             
                    <asp:TextBox runat="server" ID="txtConfirmNote" MaxLength="250"  CssClass="InputFields"></asp:TextBox></td>
                    <td width="280">
                   <%-- <span class="feedback">
                      <asp:Literal runat="server" ID="lMsg2"></asp:Literal>
                     </span>--%>
                     </td>
                 </tr> 
                

                 
  <asp:updatepanel ID="updatepanel1" UpdateMode="Conditional" runat="server"> 
        <Triggers> 
            <asp:PostBackTrigger ControlID="rbConfirm" />  
        </Triggers> 
        <ContentTemplate> 
 
        </ContentTemplate> 
    </asp:updatepanel> 

     <asp:updatepanel ID="updatepanel2" UpdateMode="Conditional" runat="server"> 
        <Triggers> 
            <asp:PostBackTrigger ControlID="rbUnable" />  
        </Triggers> 
        <ContentTemplate> 
 
        </ContentTemplate> 
    </asp:updatepanel> 
              

    </ItemTemplate>
   

   </asp:ListView>

   </fieldset>

    <table width="100%" border="0" cellpadding="0" cellspacing="0">
   
      <tr>
       <td width="137">
  
       <asp:LinkButton ID="lbFileUpload"   CausesValidation="false"    OnClick="FileUpload_Click" Text="Download File" runat="server"  ></asp:LinkButton>
       </td>
       <td width="310"></td>
       <td width="280"></td>
      </tr>
   </table>
   
   <table width="100%" border="0" cellspacing="0" cellpadding="0" >
   
       <tr class="hover_override">
                            <td width="137"><span class="feedback"><asp:Label runat="server" ID="lblmsg"></asp:Label></span></td>
                            <td width="310">&nbsp;</td>
                            <td width="280" align="right">

                              <div class="edit_icon"><asp:LinkButton ID="lbCancel" OnClick="lbCancel_Click"  CausesValidation="false" runat="server" Text="Cancel"  />
                              </div>
                              <div class="edit_icon"><asp:LinkButton ID="lbConfirm"  OnClick="lbConfirm_Click"  CausesValidation="true"  runat="server" Text="Submit Patient"   />
                              </div>


                             
                             </td>
                          </tr>
</table>

       
    </div>

  </div>
  </div>

<%--  </ContentTemplate>
</asp:UpdatePanel>--%>
  </div>
  </div>

Open in new window

0
 
LVL 25

Expert Comment

by:Rouchie
ID: 38316831
Your JS function expects two arguments, but you're only passing one in your code:

<asp:RadioButton runat="server" ID="rbConfirm" onclick="radioClick(this)"  GroupName="patient" Text="Confirm:" />

Open in new window


Change this:

function radioClick(obj, lbl) {

Open in new window


to this:

function radioClick(lbl) {

Open in new window


Now you have to put the label id in the javascript call for the radiobutton, so I need the code-behind if you're using any.  Or follow my earlier example of how to add that.

What you are trying to create is this including the semi-colon after the closing bracket:

<asp:RadioButton runat="server" ID="rbConfirm" onclick="radioClick('LABELIDHERE');"  GroupName="patient" Text="Confirm:" />

Open in new window

0
 
LVL 7

Author Comment

by:Camillia
ID: 38316875
No, i'm calling the JS in itemDataBound

 protected void test(object sender, ListViewItemEventArgs e)
    {
        if (e.Item.ItemType == ListViewItemType.DataItem)
        {
            Label lstar1 = (Label) e.Item.FindControl("lstar1");
            RadioButton confirm = (RadioButton)e.Item.FindControl("rbConfirm");
            confirm.Attributes.Add("onclick", "radioClick(this, '" + lstar1.ClientID + "')");
        }
    }
0
 
LVL 25

Expert Comment

by:Rouchie
ID: 38316898
Can you show what that renders in the browser?  Just the radiobutton please not the whole page.
0
 
LVL 7

Author Comment

by:Camillia
ID: 38317604
This is what i see

<input id="DashboardContentPlaceHolder1_lvPatientDetail_rbConfirm_0" type="radio" name="ctl00$DashboardContentPlaceHolder1$lvPatientDetail$ctrl0$patient" value="rbConfirm" onclick="radioClick(this, &#39;DashboardContentPlaceHolder1_lvPatientDetail_lstar1_0&#39;);" />

there's  &#39....not sure what that is. I have queryString but i dont see 39 as value in the querystring
0
 
LVL 25

Expert Comment

by:Rouchie
ID: 38319400
&#39 will be the encoded value for the ' symbol, so that's okay.

Can you also post the code for the Label in the same ListItem please, and lastly your JS code so I can see the whole lot together?
0
 
LVL 7

Author Comment

by:Camillia
ID: 38320438
JS code

<script type="text/javascript">
    function radioClick(obj, lbl) {
        alert("test");
        alert(lbl);
        lbl.style.display = 'block'; //OnCheckedChanged="rbSelection_CheckedChanged" AutoPostBack="true"
    } 
</script>    

Open in new window


I call it in code, in itemdatabound

   protected void test(object sender, ListViewItemEventArgs e)
    {
        // OnItemDataBound = "test"
        if (e.Item.ItemType == ListViewItemType.DataItem)
        {
            Label lstar1 = (Label) e.Item.FindControl("lstar1");
            RadioButton confirm = (RadioButton)e.Item.FindControl("rbConfirm");
            confirm.Attributes.Add("onclick", "radioClick(this, '" + lstar1.ClientID + "')");
        }
    }

Open in new window


radiobutton

<label for="full_name"><asp:RadioButton runat="server"  ID="rbConfirm"   GroupName="patient" Text="Confirm:" /></label>

Open in new window


Label

<span class="required"><asp:Label ID="lstar1"  style="display:none"    runat="server" Text="*" ></asp:Label> </span>
0
 
LVL 25

Expert Comment

by:Rouchie
ID: 38320481
Okay change the JS to this:

<script type="text/javascript">
    function radioClick(lbl) {
        lbl.style.display = 'block';
    } 
</script>

Open in new window


Change ItemDataBound to this:

   protected void test(object sender, ListViewItemEventArgs e)
    {
        // OnItemDataBound = "test"
        if (e.Item.ItemType == ListViewItemType.DataItem)
        {
            Label lstar1 = (Label) e.Item.FindControl("lstar1");
            RadioButton confirm = (RadioButton)e.Item.FindControl("rbConfirm");
            confirm.Attributes.Add("onclick", "radioClick('" + lstar1.ClientID + "');");
        }
    }

Open in new window


Now run it again.  If it still doesn't work, please paste the rendered code (from the browser's View Source) for the radiobutton and the label.
0
 
LVL 25

Expert Comment

by:Rouchie
ID: 38320490
Actually here's a better JS version with debugging....

<script type="text/javascript">
    function radioClick(lbl) {
        if(lbl) {
              lbl.style.display = 'block';
        } else {
              window.alert('No label found');
        }
    } 
</script>

Open in new window

0
 
LVL 7

Author Comment

by:Camillia
ID: 38321798
let me try. What an issue this turned out to be! :)
0
 
LVL 25

Expert Comment

by:Rouchie
ID: 38321960
It's a learning curve, and it never stops!  Worth it though in the end...!
0
 
LVL 7

Author Comment

by:Camillia
ID: 38322172
No, it didnt. Is it because i'm trying to get the ClientId before it's added to the naming container?

This is what it's rendered

<label for="full_name"><input id="DashboardContentPlaceHolder1_lvPatientDetail_rbConfirm_0" type="radio" name="ctl00$DashboardContentPlaceHolder1$lvPatientDetail$ctrl0$patient" value="rbConfirm" onclick="radioClick(&#39;DashboardContentPlaceHolder1_lvPatientDetail_lstar1_0&#39;);" />
0
 
LVL 7

Author Comment

by:Camillia
ID: 38322251
I did try the JQuery but didnt do anything

$("[id$='lstar1']").css("style", "block");
0
 
LVL 25

Expert Comment

by:Rouchie
ID: 38322300
That's looks okay to me.  Can you save the page as rendered in the browser (using my example not the JQuery stuff) then attach here.  Then I can debug it.  Don't worry about all the images/js etc I can link to Jquery online.
0
 
LVL 7

Author Comment

by:Camillia
ID: 38322401
attached. Thanks for your help
JavascriptCode.htm
0
 
LVL 25

Accepted Solution

by:
Rouchie earned 2000 total points
ID: 38323943
Okay a few things.  First off, you have a few issues where you have <div>s rendering in between table rows.  Divs should not be inside any part of a table.  Here's an example from your rendered code:

<tr>
<td width="137">
<label for="phone">Patient Phone:</label></td>
<td width="310">999-999-9999</td>
<td width="280">&nbsp;</td>
</tr>


<!-- THIS IS BAD! -->
<div id="DashboardContentPlaceHolder1_lvPatientDetail_ctl02_0">



<tr>
<td width="137" title="Please enter date/time of appointment and check confirm">
<label for="full_name">
<input id="DashboardContentPlaceHolder1_lvPatientDetail_rbConfirm_0" type="radio" name="ctl00$DashboardContentPlaceHolder1$lvPatientDetail$ctrl0$patient" value="rbConfirm" onclick="radioClick(&#39;DashboardContentPlaceHolder1_lvPatientDetail_lstar1_0&#39;);" /><label for="DashboardContentPlaceHolder1_lvPatientDetail_rbConfirm_0">Confirm:</label></label></td>
<td width="310"><span class="required"></span>
</td>
<td width="280"></td>
</tr>

Open in new window


If you are using Panels to show/hide content within a table, you should use the asp:PlaceHolder instead because it doesn't render any containing code around it in the page.

Now for your problem, as per usual with Javascript its something dead simple, so here's the working code.  One word of warning - this should go in the <head> area NOT in amongst the page's layout HTML...

	<script type="text/javascript">
		function radioClick(lbl) {
			var l = document.getElementById(lbl);
			if (l) {
				l.style.display = 'block';
			} else {
				window.alert('No label found');
			}
		} 
	</script>

Open in new window

0
 
LVL 7

Author Comment

by:Camillia
ID: 38325044
let me try. And i should replace Panels with Placeholders? If so, i can clean up the code
0
 
LVL 25

Expert Comment

by:Rouchie
ID: 38325088
>> And i should replace Panels with Placeholders?

Yes, if you don't need to render a container in the code (e.g. Panels render as DIV, but Placeholders don't render anything exept what's inside them)
0
 
LVL 7

Author Comment

by:Camillia
ID: 38325405
I cant use a placeholder because i need style="display:none; and i get an error that placeholder doesnt have a style property. But let me try the JS code.
0
 
LVL 7

Author Comment

by:Camillia
ID: 38325412
oh, i can set the style in code behind like this placeholderID.Attributes.Add
0
 
LVL 25

Expert Comment

by:Rouchie
ID: 38325437
No it won't work because Placeholder doesn't render anything so no Style attribute will be rendered.  What are you trying to show/hide with your Panel/Placeholder at present?

Also did the JS work?
0
 
LVL 7

Author Comment

by:Camillia
ID: 38325454
let me try the JS.
With Panel, i have a link and modalpopupextender that i hide and display when user clicks on the link.
0
 
LVL 7

Author Comment

by:Camillia
ID: 38326580
YES!, it worked. I put in Master page's <head> tag. So, this was the issue? I can't put it in the content page?
0
 
LVL 25

Expert Comment

by:Rouchie
ID: 38328113
You can put it in the Content pages head, but only if you put a ContentPlaceHolder in the Master page inside the <head> area.  When you do that, the stuff you put in the content page placeholder gets 'pushed' into the Master head area.

Or, what I usually do is construct the JS as a string in the content page code-behind, then add it in Page_Load like this:

Sub Page_Load .....
  Dim sb as new stringbuilder
  sb.Append("<script type=""text/javascript"">")  
  sb.Append("function myFunction {")
  sb.Append("  f u n c t i o n co d e h e r e ;")
  sb.Append("}")
  Page.Header.Controls.Add(New LiteralControl(sb.ToString))
End Sub

Open in new window

0
 
LVL 7

Author Comment

by:Camillia
ID: 38331584
thanks so much for sticking with this
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month21 days, 1 hour left to enroll

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question