Not able to hide a text

Question

aspx page

<asp:UpdatePanel ID="asypnl" runat="server">
   <ContentTemplate>
      <asp:Wizard />
      <StartNavigationTemplate>
      </StartNavigationTemplate>
      <FinishNavigationTemplate>
      </FinishNavigationTemplate>
      <WizardSteps>
         <asp:WizardStep ID="WizardStep1" runat="server">
            <asp:Panel runat="server" ID="pnlGiftInfo">
               <td>
                  <asp:DropDownList ID="DropDownPayment" runat="server">
                     <asp:ListItem Selected="True" Value="0">Gift</asp:ListItem>
                     <asp:ListItem Value="1">Pledge</asp:ListItem>
                  </asp:DropDownList>
               </td>
            </asp:Panel>
         </asp:WizardStep>
      </WizardSteps>
      <asp:Panel runat="server" ID="pnlOutput">
         <%-- Content comes from the database OutputHtml Colunm--%>
      </asp:Panel>
   </ContentTemplate>
</asp:UpdatePanel>

DataBase Column

<p>Thank you for your <span id "ddlGift">gift</span><span id "ddlPayment">payment</span> of
    {Amount} to the {Comm}
<script type="text/javascript" language="javascript">
        var p = document.getElementById("DropDownPayment");
        var eledropdownPayment = p.options[p.selectedIndex].value;
        var ddlGift = document.getElementById("ddlGift");
        var ddlPayment = document.getElementById("ddlPayment");
        if (eledropdownPayment == "0") {
            ddlGift.style.display = "block";
            ddlPayment.style.display = "none";
        } else {
            ddlGift.style.display = "none";
            ddlPayment.style.display = "block";
        }
</script>

After submitting the final step in the wizard ctrl I am getting the result to display using the Html tag structure built inside the databse. Everything is working fine except the script in the database its not executing so I can see both the span text. I just want to select the span as per the dropdown selection. I cannot write the script in the aspx as these span tags are not there at the page load event, they get inside the output panel on completion of the 2 steps in the wizard ctrl. I need some way to just display the sapn as per the drop down selection... Thanks. Sorry for the Long description.

did you try something like "dllPayment.Enabled = false;" or "dllPayment.Visible = false;"? If you add an selected item event to the dropdown I think you should be fine. — Benjamin Danger Johnson, Sep 28 '12 at 17:59
Yes I tried this "dllPayment.Visible = false;"... I also tried alert("dllPayment"); but even that didn't work its not executing the script from the database.. — Scorpio, Sep 28 '12 at 18:01

Sandip.Nascar · Answer 1 · 2012-09-28T19:10:52.050

1

Instead of taking the full text including span tags from db, the easiest solution is to place the two span id in design time. Pull the other text along with amount and other details from db and place it in appropriate position.

Place it at design time Thank you for your giftpayment

Comes from db, of {Amount} to the {Comm}

Now you can get the control of span in javascript and you can make the span visible/invisible accordingly.

edited Sep 28 '12 at 19:10

answered Sep 28 '12 at 18:22

Sandip.Nascar

335
1
7

Where did you get DropDownPaymen? I see a sever control "ddlPaymentOption" in the code. If you want to refer the server control, you need to use var p = document.getElementById("<%= ddlPaymentOption.ClientID %>"); – Sandip.Nascar Sep 28 '12 at 18:37
hmmm bare with me plzzz... I had made the edit I don't know why it's still showing old code... – Scorpio Sep 28 '12 at 18:47
Yes but that is Plan B ... I have this weekend ..If nothing works I was planing to do that at the end ..thanks – Scorpio Sep 28 '12 at 20:26

score 0 · Answer 2 · answered Sep 28 '12 at 17:59

If I understand right, you html+javascript comes from the DB via ajax, in that case you may need to delay a bit the execution of javascript to give time the browser to load the html content into the DOM, you can do it enclosing your javascript code in a setTimeout() call, like this:

            setTimeout(function() {
                var p = document.getElementById("DropDownPayment");              
                var eledropdownPayment = p.options[p.selectedIndex].value;              
                var ddlGift = document.getElementById("Gift");              
                var ddlPayment = document.getElementById("ddlSelectionPledge");              
                    if (eledropdownPayment == "0") 
                    {                  
                    ddlGift.style.display = "block";                  
                    ddlPayment.style.display = "none";              
                    } 
                    else 
                    {                  
                    ddlGift.style.display = "none";                  
                    ddlPayment.style.display = "block";              
                    }
             }, 300); //delay execution by 300 miliseconds

nope It didn't work !!! just for confirmation...is this how you wanted me to do it...
...... — Scorpio, Sep 28 '12 at 18:06

Tim Copenhaver · Answer 3 · 2012-09-28T18:29:19.790

0

For a script to execute, you have to do more than just add those script tags in the middle of the page. The easiest option is to use the RegisterClientScriptBlock method. On the server side, you need to call that method and pass the script as the second parameter.

Another option would be to actually include a function in your javascript. After the element content is set, call the function. The main point is that the code won't automatically execute.

edited Sep 28 '12 at 18:29

answered Sep 28 '12 at 18:14

Tim Copenhaver

3,282
13
18

This sound better then my idea, assign a different CSS rule-set to each span, then when the drop down changes, change the CSS to show/hide the appropraite styles (see http://stackoverflow.com/questions/730048/how-to-change-remove-css-classes-definitions-at-runtime and http://stackoverflow.com/questions/5753680/change-css-of-class-in-javascript). – Trisped Sep 28 '12 at 18:25

Not able to hide a text

3 Answers3