CODEWITHSUNDEEP
jqueryasp.net
user1263981
user1263981

Reputation: 3147

can't get server control id in jquery

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; });

Upvotes: 0

Views: 1802

Answers (3)

Laurent S.
Laurent S.

Reputation: 6946

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

Upvotes: 3

Kyle B.
Kyle B.

Reputation: 5787

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);

Upvotes: 0

Amit Joki
Amit Joki

Reputation: 59232

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

Upvotes: 1

Related Questions