How to make jQuery UI to work in DotnetNuke 6+

Question

EDIT: Here is the edited control file (control.ascx):

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="Sale.ascx.cs" Inherits="Enmasse.Modules.Demo_Enmasse.Sale" %>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#<%=txtuser.ClientID%>").autocomplete('<%=ResolveUrl("Search_Username.ashx")%>');
        function AnotherJSFunction{
...
}
        });      
    </script>

    <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex=0>
    <asp:View ID="main" runat="server">
    <div class=item>
    <asp:TextBox ID="txtuser" runat="server" ></asp:TextBox><br />
    ...

Here is the edited code behind file (control.ascx.cs):

protected void Page_Load(object sender, System.EventArgs e)
       {
            DotNetNuke.Framework.jQuery.RequestUIRegistration();
       }

This is the web handler just in case (ashx):

<%@ WebHandler Language="C#" Class="Search_Username" %>

using System;
using System.Web;
using System.Data.SqlClient;
using System.Configuration;
using System.Text;

public class Search_Username : IHttpHandler {

    public void ProcessRequest (HttpContext context) {
        string prefixText = context.Request.QueryString["q"];
        using (SqlConnection conn = new SqlConnection())
        {
            conn.ConnectionString = ConfigurationManager.ConnectionStrings["SiteSqlServer"].ConnectionString;
            using (SqlCommand cmd = new SqlCommand())
            {
                cmd.CommandText = "select Username from Users where Username like @SearchText + '%' and IsSuperUser <> 1";
                cmd.Parameters.AddWithValue("@SearchText", prefixText);
                cmd.Connection = conn;
                StringBuilder sb = new StringBuilder();
                conn.Open();
                using (SqlDataReader sdr = cmd.ExecuteReader())
                {
                    while (sdr.Read())
                    {
                        sb.Append(sdr["Username"]).Append(Environment.NewLine);
                    }
                }
                conn.Close();
                context.Response.Write(sb.ToString());
            }
        }
    }
    public bool IsReusable {
        get {
            return false;
        }
    }
}

I have tested the web handler Search_Username.ashx and it works fine, but I'm not sure that the link to the file is correct. The jQuery autocomplete still doesn't work and there is no error either. I have no clue where to fix, although I have review some question on here. Can someone help me?

Answer 1

Since you're in DNN 6, jQuery UI is included in the framework. Remove the JavaScript includes from your markup, and add DotNetNuke.Framework.jQuery.RequestUIRegistration in the Page_Load.

From there, I would view source on the page and check that your URLs are correct. Typically, I would use ResolveUrl, rather than ModulePath to get the path to a resource (e.g. <%=ResolveUrl("Search_Username.ashx")%>).

Otherwise it looks pretty reasonable. You might look at the "Remove with caching" example from jqueryui.com, and add some logging into the source method it provides, so you can see if you're actually wired-up, making calls, and getting responses.