Unable to run Autocomplete jQuery with dynamically created variable ASP.net?

Question

I am using jQuery Autocomplete code in javascript in aspx page. The code works fine when the data is declared in the script itself but when I pass the variable from code-behind to client script it doesn't Work.

<script type="text/javascript">
 $(function () {

//    var projects = [{value: "jquery", label: "jQuery", desc: "the write less, do more, JavaScript library", icon: "https://fbcdn-profile-a.akamaihd.net/static-ak/rsrc.php/v1/yP/r/FdhqUFlRalU.jpg" },
//                  {
//                    value: "jquery-ui",
//                  label: "jQuery UI",
//                 desc: "the official user interface library for jQuery",
//                 icon: "https://fbcdn-profile-a.akamaihd.net/static-ak/rsrc.php/v1/yP/r/FdhqUFlRalU.jpg"
//                                                  },
//                                                  {
//                                                  value: "sizzlejs",
//                                                  label: "Sizzle JS",
//                                                  desc: "a pure-JavaScript CSS selector engine",
//                                                  icon: "https://fbcdn-profile-a.akamaihd.net/static-ak/rsrc.php/v1/yP/r/FdhqUFlRalU.jpg"
//                                                  }
//                                                 ];
//                                                    
//                 alert(JSVar + JSVar1);

                 $("#Text1").autocomplete({
                     minLength: 0,
                     source: JSVar,
                     focus: function (event, ui) {
                         $("#Text1").val(ui.item.label);
                         return false;
                     }

                 })
                    .data("autocomplete")._renderItem = function (ul, item) {
                        return $("<li></li>")
                            .data("item.autocomplete", item)
                            .append("<a><img src='" + item.icon + "' width='32' height='32' />  " + item.label + "</a>")
                            .appendTo(ul);
                    };


                 $("#Text2").autocomplete({
                     minLength: 0,
                     source: JSVar1,
                     focus: function (event, ui) {
                         $("#Text2").val(ui.item.label);
                         return false;
                     }
                 })
                    .data("autocomplete")._renderItem = function (ul, item) {
                        return $("<li></li>")
                            .data("item.autocomplete", item)
                            .append("<a><img src='" + item.icon + "' width='32' height='32' />  " + item.label + "</a>")
                            .appendTo(ul);
                    };

             });

In code-behind, Male and Female are my main data..

   string str1 = "<script type=\"text/javascript\">var JSVar='" + Female + "'; var JSVar1='" + Male + "'; </script>";

    ClientScriptManager script = Page.ClientScript;
    if (!script.IsClientScriptBlockRegistered(this.GetType(), "Var"))
    {
        script.RegisterClientScriptBlock(this.GetType(), "Var", str1.ToString());
    }

The code works fine when I use var projects instead of JSVar and JSVar1 . But not when I use JSVar and JSVar1 which is dynamically defined in the code-behind with same structure like projects.

NOTE : I am able to get right values for JSVar and JSVar1 inside script on verifying them with alert() using ClientScriptManager.

Answer 1

Have you checked the ClientIDs of the text boxes are what you're expecting them to be?

For example, when you dynamically create elements using a PlaceHolder, the resulting ClientID will be something like "Placeholder_Text1".

Have a look at the page source in your browser after rendering to check. Then either copy the full id into your jQuery selector or use something like this

$("#<%=Text1.ClientID%>").autocomplete...