Problem with jQuery selector and MasterPage
        Posted  
        
            by Daemon
        on Stack Overflow
        
        See other posts from Stack Overflow
        
            or by Daemon
        
        
        
        Published on 2010-05-10T12:46:20Z
        Indexed on 
            2010/05/10
            13:04 UTC
        
        
        Read the original article
        Hit count: 504
        
Hi,
I have a problem with a master page containing a asp:textbox that I'm trying to access using jQuery. I have read lot sof thread regarding this and tried all the different approaches I have seen, but regardless, the end result end up as Undefined.
This is the relevant part of the MasterPage code:
<p><asp:Label ID="Label1" AssociatedControlID="osxinputfrom" runat="server">Navn</asp:Label><asp:TextBox CssClass="osxinputform" ID="osxinputfrom" runat="server"></asp:TextBox></p>
When I click the button, the following code from a jQuery .js file is run:
show: function(d) {
      $('#osx-modal-content .osxsubmitbutton').click(function (e) {
        e.preventDefault();
        if (OSX.validate()){                    
          $('#osx-modal-data').fadeOut(200);
          d.container.animate(
            {height:80},
            500,
            function () {
              $('#osx-modal-data').html("<h2>Sender...</h2>").fadeIn(250, function () {
                $.ajax({
                  type: "POST",
                  url: "Default.aspx/GetDate",
                  data: "{'from':'" + $("#osxinputfrom").val() + "','mailaddress':'" + $("#osxinputmail").val() + "','header':'Test3','message':'Test4'}",
                  contentType: "application/json; charset=utf-8",
                  dataType: "json",
                  success: function(msg) {
                    $('#osx-modal-data').fadeOut(200, function () {
                      $('#osx-modal-data').html('<h2>Meldingen er sendt!</h2>');
                      $('#osx-modal-data').fadeIn(200);
                    });
                  },
                  error: function(msg){
                    $('#osx-modal-data').fadeOut(200, function () {
                      $('#osx-modal-data').html('<h2>Feil oppstod ved sending av melding!</h2>');
                      $('#osx-modal-data').fadeIn(200);
                    });
                  }
                });
              });  
            }
          );
        }
        else{
          $('#osxinputstatus').fadeOut(250, function () {
            $('#osxinputstatus').html('<p id="osxinputstatus">' + OSX.message + '</a>');
            $('#osxinputstatus').fadeIn(250);
          });
        }           
      });  
    },
So the problem here is that $("#osxinputfrom").val() evaluated to Undefined. I understand that the masterpage will add some prefix to the ID, so I tried using the ID from the page when it's run that ends up as ct100_osxinputfrom, and I also tried some other hinds that I found while searching like $("#<%=osxinputfrom.ClientID%>"), but it ends up as Undefined in the method that is called from the jQuery ajax method anyway. The third and fourth parameters to the ajay function that is hardcoded as Test3 and Test4 comes fine in the C# backend method.
So my question is simply: How can I rewrite the jQuery selector to fetch the correct value from the textbox? (before I used master pages it worked fine by the way)
Best regards Daemon
© Stack Overflow or respective owner