can't get server control id in jquery

Question

I have usercontrol with some server and client controls. I am trying to add values from text box to list box using jquery (on button click event) but getting following error;

Microsoft JScript runtime error: Syntax error, unrecognized expression: #<%= txtSubVendorRef.ClientID %>

ascx file;

   <tr>
        <td>
        <asp:TextBox ID="txtSubVendorRef" TabIndex="34" MaxLength="32" runat="server" 
                Width="220"></asp:TextBox>
        </td> 
        <td valign="top">Visit Dates</td>
        <td>
            <input type="button" id="btnAddRef" name="filter" value="Filter" />
        </td>
        <td>      
            <asp:ListBox runat="server" ID="lstVisitDates" Width="220px"></asp:ListBox>
        </td>
    </tr>

Here is the jquery function in js file;

$("#btnAddRef").click(function () {
   var txt = $("#<%=txtSubVendorRef.ClientID%>");
   var svc = $(txt).val();  //Its Let you know the textbox's value   
   var lst = $('#<%= lstVisitDates.ClientID %>');
   var options = $('#<%= lstVisitDates.ClientID %> option');
   var alreadyExist = false;
   $(options).each(function () {
       if ($(this).val() == svc) {
           alert("Item alread exists");
           alreadyExist = true;
           return;
       }
       txt.val("");
       // alert($(this).val());
   });
   if (!alreadyExist)
       $(lst).append('<option value="' + svc + '">' + svc + '</option>');
   return false; });

i found the solution here http://stackoverflow.com/questions/20227170/accessing-asp-net-controls-using-jquery-all-options — user1263981, Apr 09 '14 at 13:51
So now that you finally found the search feature, we can close your post for being a duplicate ;-) Be carefull though, option 2 and option 3 offer no guarantee to select a unique control... You can't say you haven't been told. — Laurent S., Apr 09 '14 at 13:58

Laurent S. · Accepted Answer · 2014-07-04T08:42:24.390

3

If your javascript code is in an external js file, there's no way it will get access to server-side code. This way of including server variables in javascript can only work with inline javascript into your UserControl/aspx page.

Please note also that if you're using >= 4.0 .Net Framwork, you can use the attribute ClientIDMode="Static" for your control to keep the id you specified without inheriting parent id's

edited Jul 04 '14 at 08:42

answered Apr 09 '14 at 13:45

Laurent S.

6,816
2
28
40

there is a script reference in user control file. – user1263981 Apr 09 '14 at 13:46
yes, it would work, but you're never sure it will rendre only 1 item though, you could have several items with an id ending with `myTextBox`. So in some case, it could fail and it will become hard to trace why... – Laurent S. Apr 09 '14 at 13:50
1

Yes, it works. Then if for any reason your UserControl is added twice to a page, this selector will return 2 controls instead of the one and only you're expecting. Then as you don't really understand what you're doing, you will have a hard-time understanding why your application that was working just fine now fails. – Laurent S. Apr 09 '14 at 13:55
i am using vs2010 and will be adding user control only once but thank you for mentioning about static control id. Would it work fine if i use static client mode and add a user control twice? Also if client mode id is not set to static and i add a user control twice then won't page render both controls with different id's? – user1263981 Apr 09 '14 at 14:02
Good remark. I asked myself the same question as I was typing and I'm currently researching this. I'm actually stuck in older .NET version myself so I never had the chance to use and test this, but wished this existed on many occasions :-) – Laurent S. Apr 09 '14 at 14:09

score 1 · Answer 2 · answered Apr 09 '14 at 13:46

1

Add ClientIdMode="Static" to your server controls and you can simply use the original ids assigned to them in your javascript.

answered Apr 09 '14 at 13:46

Amit Joki

58,320
7
77
95

score 0 · Answer 3 · answered Apr 09 '14 at 13:54

As a work-around to this, I typically create a javascript module, and include that logic block in my external js file. ex:

var jsModule = (function () {

    var obj = function (initData) { // constructor
        // private variables
        var lstVisitDates = initData.lstVisitDates;


        this.btnAddRefClick = function () { // public instance 
            // use your variables here.
        }
    }

    return obj;
})();

Then in my aspx, or ascx pages, I grab all the clientId values and pass them to my js module constructor:

var initData = {
    lstVisitDates: $('#<%= lstVisitDates.ClientID %>'),
    options: $('#<%= lstVisitDates.ClientID %> option')
};

var myModule = new jsModule(initData);
$("#btnAddRef").click(myModule.btnAddRefClick);

can't get server control id in jquery

3 Answers3