referencing asp.net controls in javascript

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • jarremw
    New Member
    • Jan 2008
    • 50

    #1

    referencing asp.net controls in javascript

    hello all
    i am trying to pass some text from a textbox to a dropdownlist in my asp.net page, i am using the modal popup extender and vs 2008, how do i go about referencing asp controls when writing the javascript? i have the pop up display with two textbox's and two buttons, when the ok button is clicked i want whatever is in the textboxs to go to the asp dropdown, so how would i go about doing this?

    thanks
  • acoder
    Recognized Expert MVP
    • Nov 2006
    • 16032

    #2
    Check how the controls are rendered on the client-side.

    If you can get the IDs and/or names it should be relatively straightforward to access the elements. If it's not easy to determine the ID/name from what the ASP.NET code looks like, use ASP.NET code to get the client-side ID and use that with document.getEle mentById().

    Comment

    • jarremw
      New Member
      • Jan 2008
      • 50

      #3
      Originally posted by acoder
      Check how the controls are rendered on the client-side.

      If you can get the IDs and/or names it should be relatively straightforward to access the elements. If it's not easy to determine the ID/name from what the ASP.NET code looks like, use ASP.NET code to get the client-side ID and use that with document.getEle mentById().
      Is that how i call an asp.net server control? like for the button 1 click event i have me.dropdownlist 1.items.add(tex tbox2.text), the textbox that resides in the modal popup...is there a way to reference this control by just getting its id/name, or do i need to redo it in javascript?

      Comment

      • acoder
        Recognized Expert MVP
        • Nov 2006
        • 16032

        #4
        Show how the code is rendered in your browser.

        Comment

        • jarremw
          New Member
          • Jan 2008
          • 50

          #5
          ok, so if use this code:

          var fill
          function onclick()
          {
          document.getele mentbyid('<%=dr opdownlist1.cli entid%>')
          }

          will just using this reference that control and make the click event for the control happen?...also i am aiming this event at a contol that is in an update panel, so do i need it to do a postback?

          Comment

          • jarremw
            New Member
            • Jan 2008
            • 50

            #6
            ok, this is what i have my modal popup extender pointing too for the onokscript..
            <script type="text/javascript">
            function onclick()
            {

            }
            </script>

            this is what i have in the button1 click event
            Me.commentsbox. Text = "textbox1.t ext"

            textbox1.text and button1 are in the modalpopup, so what i need to know is what ajax function do i use to call this event when the button1 is clicked so that it fills the comment box with whatever is in textbox1? i have searched google and cant find anything relating to what i am wanting to do, maybe im just searching for the wrong thing...PLEASE HELP!!!

            Comment

            • acoder
              Recognized Expert MVP
              • Nov 2006
              • 16032

              #7
              Originally posted by jarremw
              ok, so if use this code:
              ...
              document.getele mentbyid('<%=dr opdownlist1.cli entid%>')
              ...
              will just using this reference that control and make the click event for the control happen?
              JavaScript is case-sensitive, so it's document.getEle mentById(). The code would reference the control, but that's it. You need to call a method or set a property to actually do something with it.

              Comment

              • acoder
                Recognized Expert MVP
                • Nov 2006
                • 16032

                #8
                Originally posted by jarremw
                so what i need to know is what ajax function do i use to call this event when the button1 is clicked so that it fills the comment box with whatever is in textbox1?
                As I've mentioned before, you need the client-side ID.

                As for the filling, say you've referenced them, then the following should work:
                [code=javascript]// commentbox is a ref. to the comment box and textbox1 to the text box
                commentbox.valu e = textbox1.value;
                // if you need to add to a drop down:
                try {
                dropdown1.add(t extbox1.value,n ull); // standard-compliant
                } catch (err) {
                dropdown1.add(t extbox1.value); //IE-only
                }[/code]
                Is the modal popup that you refer to a real popup window or a DHTML pseudo-popup? If it's a window, you will need to reference the window first to gain access to the elements within it from the parent page, or vice versa.

                Comment

                • jarremw
                  New Member
                  • Jan 2008
                  • 50

                  #9
                  Originally posted by acoder
                  As I've mentioned before, you need the client-side ID.

                  As for the filling, say you've referenced them, then the following should work:
                  [code=javascript]// commentbox is a ref. to the comment box and textbox1 to the text box
                  commentbox.valu e = textbox1.value;
                  // if you need to add to a drop down:
                  try {
                  dropdown1.add(t extbox1.value,n ull); // standard-compliant
                  } catch (err) {
                  dropdown1.add(t extbox1.value); //IE-only
                  }[/code]
                  Is the modal popup that you refer to a real popup window or a DHTML pseudo-popup? If it's a window, you will need to reference the window first to gain access to the elements within it from the parent page, or vice versa.
                  its dhtml, ok i cant try this right now because im at work, maybe on lunch, but this will be my new code....
                  Code:
                  function onok()
                  {
                  document.getElementById("textbox1")
                  document.getElementById("dropdownlist1")
                  try{
                         dropdownlist1.add(textbox1.value,null);
                  }catch (err) {
                                     dropdownlist1.add(textbox1.value);
                  }
                  im using the vs2008 and when i was trying last night it kept on trying to get me to use nodevalue for some reason, is that just the way vs2008 does it?

                  thanks for the help so far

                  Comment

                  • acoder
                    Recognized Expert MVP
                    • Nov 2006
                    • 16032

                    #10
                    Change that to:[code=javascript]
                    function onok()
                    {
                    var textbox1 = document.getEle mentById("textb ox1");
                    var dropdownlist1 = document.getEle mentById("dropd ownlist1");
                    try{
                    dropdownlist1.a dd(textbox1.val ue,null);
                    }catch (err) {
                    dropdownlist1.a dd(textbox1.val ue);
                    }[/code]

                    Comment

                    • jarremw
                      New Member
                      • Jan 2008
                      • 50

                      #11
                      ok im using this as my code
                      Code:
                      function onok()
                         
                            {
                         
                            var textbox1 = document.getElementById("textbox1");
                         
                            var commentbox = document.getElementById("commentsbox");
                         
                            try{
                         
                                  commentsbox.nodevalue = textbox1.nodevalue;
                                  alert(textbox1.nodeValue);
                         
                            }catch (err) {
                         
                                               commentsbox.value = textbox1.value;
                         
                            }
                      and this is the modal pop up code
                      Code:
                      <cc1:ModalPopupExtender ID="HyperLink1_ModalPopupExtender" runat="server" 
                                         CancelControlID="button2" DropShadow="True" OkControlID="button1" 
                                         PopupControlID="panel2" TargetControlID="HyperLink1" 
                                         onokscript="onok()">
                                     </cc1:ModalPopupExtender>
                      when i have the popup come up and i click on the button, nothing happens, im using vs2008, so could this be the problem?

                      Comment

                      • acoder
                        Recognized Expert MVP
                        • Nov 2006
                        • 16032

                        #12
                        Firstly, are the IDs on the client-side "textbox1" and "commentsbo x"?

                        If they are, you still need to make sure you use the correct variable name. You have commentbox and commentsbox.

                        There's no nodeValue in JavaScript, use value instead. There's also no need for a try/catch here.

                        If that doesn't solve the problem, show me what the code looks like in your browser (view source).

                        Comment

                        • jarremw
                          New Member
                          • Jan 2008
                          • 50

                          #13
                          yeah the ids are the same...

                          i used this code also
                          Code:
                          function onok()
                          {
                          var textbox1 = document.getElementById("textbox1");
                          var dropdownlist1 = document.getElementById("dropdownlist1");
                          try{
                                 dropdownlist1.add(textbox1.value,null);
                          }catch (err) {
                                             dropdownlist1.add(textbox1.value);
                          }
                          and still nothing, does it have something to do with my button? should i make the button click event point to the ajax script? because right now all i have is the modal pop up extender onokscript event pointing to it...

                          Comment

                          • acoder
                            Recognized Expert MVP
                            • Nov 2006
                            • 16032

                            #14
                            Can you post a test page link? If not, at least post the code (client-side, not .NET), so I can see where the problem might lie.

                            Comment

                            • jarremw
                              New Member
                              • Jan 2008
                              • 50

                              #15
                              i acutally got it to work last night, turns out i forgot that javascript is case sensitive, so my textbox id was TextBox1 and i was looking for textbox1, so when i changed to TextBox1 it started working, thanks for the help though....
                              also, im trying to add items to a dropdownlist that is nested in an update panel, the thing i couldnt get to work last night was the adding items to the dropdownlist, is there a way a make the updatepanel do a postback within the script?

                              Comment

                              Working...