CODEWITHSUNDEEP
jquerysharepointsharepoint-2010user-controls
Truezplaya
Truezplaya

Reputation: 1313

User control JQuery Issue

I've created a user control which is very basic, It's a asp.net text box with JQuery autocomplete functionality attached. This is all defined in the aspx page not programatically.

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script type="text/jscript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>


  <script type="text/jscript" >


      $(function() {

    $(".tb").autocomplete({

        source: [ <%=GetAutoCompleteData%> ],

    });

});
  </script>


  <asp:TextBox ID="TBAUTO" class="tb" runat="server"></asp:TextBox>
  <asp:Button ID="Button1" runat="server" Text="Search" onclick="Button1_Click"></asp:Button>

This works perfectly well when one control is on a page. However when i add another they both seem to have the same data which shouldn't be the case.

When i check what is rendered to the page it's as i expect but they both contain the same data when the auto complete functionality kicks in

This is what is rendered to the page This is what is rendered to the page

Any help would be appreciated.

enter image description here

Upvotes: 0

Views: 274

Answers (2)

Truezplaya
Truezplaya

Reputation: 1313

As i was having no luck with the above solution and i knew that the $(function() { 

$(".tb").autocomplete({ 

    source: [ <%=GetAutoCompleteData%> ], 

});

worked i simply set the CssClass on page load to a given variable(DataFilter) in my code and just

$(function() {

$(".<%=DataFilter%>").autocomplete({

    source: [ <%=GetAutoCompleteData%> ],

});

Upvotes: 0

Nicholas Murray
Nicholas Murray

Reputation: 13509

From what I can see you are chaining your autocomplete with a class by using $(".tb") which wil be a set of one or more dom elements. try using a # instead like below

    $(function() {      
        $("#<%= TBAUTO.ClientID %>").autocomplete({          
        source: [ <%=GetAutoCompleteData%> ],       
        });  
    });

Upvotes: 1

Related Questions