Post
Ask Question
Marius Vasile

Marius Vasile

  • 594
  • 1.9k
  • 145.6k

jquery autocomplete with .ashx not working with masterpage

Apr 24 2020 12:37 PM
I used the same approach for normal .aspx pages, I try to use masterpage and take advantage of a navbar using bootstrap. Everything whent well until I reached the autocomplete. I have to use .ashx file because I have multiple instances when using the same jquery and this makes it easier. I have no errors, but the autocomplete is not doing its job
 
The master page looks like this: 
 
 
  1. @ Master Language="C#" AutoEventWireup="true" CodeBehind="WAPReview.master.cs" Inherits="WAPReview.WAPReview" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html lang="en">  
  6. <head runat="server">  
  7.   
  8.     <title>Title</title>  
  9.   
  10.         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />  
  11.         <link href="/Scripts/jquery-ui.css" rel="stylesheet" />  
  12.         <script type="text/javascript" src="/Scripts/jquery-3.4.1.js"></script>  
  13.         <script type="text/javascript" src="/Scripts/jquery-ui.js"></script>  
  14.   
  15. <asp:ContentPlaceHolder ID="Head" runat="server">  
  16.   
  17. </asp:ContentPlaceHolder>  
  18.       
  19. </head>  
  20. <body>  
  21.     <form runat="server">  
  22.         <div id="nav">  
  23.             <nav class="navbar navbar-expand bg-primary navbar-dark">  
  24.                 <a class="navbar-brand" href="/HomePage.aspx">SAWCOD</a>  
  25.                 <!-- Links -->  
  26.                 <ul class="navbar-nav">  
  27.                     <li class="nav-item">  
  28.                         <a class="nav-link" href="/HomePage.aspx">Home</a>  
  29.                     </li>  
  30.                     <li class="nav-item">  
  31.                         <a class="nav-link" href="/IssueWAP/WAPControl.aspx">WAP Control</a>  
  32.                     </li>  
  33.                     <li class="nav-item">  
  34.                         <a class="nav-link" href="/ReviewWAP/ReviewWAP.aspx">WAP Review</a>  
  35.                     </li>  
  36.                     <!-- Dropdown 1 -->  
  37.                     <li class="nav-item dropdown">  
  38.                         <a class="nav-link dropdown-toggle" href="#" id="navbardrop1" data-toggle="dropdown">  
  39.                             WAP Report  
  40.                         </a>  
  41.                         <div class="dropdown-menu">  
  42.                             <a class="dropdown-item" href="/RepWAP/WAPReport.aspx">WAP Report</a>  
  43.                             <a class="dropdown-item" href="/RepWAP/WAPReviewReport.aspx">WAP Review Report</a>  
  44.                         </div>  
  45.                     </li>  
  46.                     <!-- Dropdown 2 -->  
  47.                     <li class="nav-item dropdown">  
  48.                         <a class="nav-link dropdown-toggle" href="#" id="navbardrop2" data-toggle="dropdown">  
  49.                             Dashboard  
  50.                         </a>  
  51.                         <div class="dropdown-menu">  
  52.                             <a class="dropdown-item" href="/Dashboard/WAPReviewed.aspx">WAP Reviewed</a>  
  53.                             <a class="dropdown-item" href="/Dashboard/WAPIssued.aspx">WAP Issued</a>  
  54.                         </div>  
  55.                     </li>  
  56.                     <!-- Dropdown 3 -->  
  57.                     <li class="nav-item dropdown">  
  58.                         <a class="nav-link dropdown-toggle" href="#" id="navbardrop3" data-toggle="dropdown">  
  59.                             Update Data  
  60.                         </a>  
  61.                         <div class="dropdown-menu">  
  62.                             <a class="dropdown-item" href="/Update/Update.aspx">Update Data</a>  
  63.                             <a class="dropdown-item" href="/UserUpdate/UserUpdate.aspx">User Update</a>  
  64.                         </div>  
  65.                     </li>  
  66.                 </ul>  
  67.                 <div class="form-inline my-2 my-lg-0 ml-auto">  
  68.                     <input class="form-control" type="search" placeholder="Enter WAP No" aria-label="Search" />  
  69.                     <button class="btn btn-outline-light btn-md my-2 my-sm-0 ml-3" type="submit">Search</button>  
  70.                 </div>  
  71.             </nav>  
  72.         </div><br /><br />  
  73.   
  74.   
  75. <asp:ContentPlaceHolder ID="MainContent" runat="server">  
  76.   
  77. </asp:ContentPlaceHolder>  
  78.     <hr />  
  79.             <footer class="container-fluid">  
  80.                 <div class="row h-100 justify-content-center align-items-center">  
  81.                     <p>© <%: DateTime.Now.Year %> - Southern Area Well Completion Operation Department</p>  
  82.                 </div>  
  83.             </footer>  
  84. </form>  
  85.     <script src="Scripts/errorValidation.js"></script>  
  86.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>  
  87.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>    
  88. </body>  
  89. </html>  
.ashx and jquery are:
 
  1. (function ($) {  
  2.     $(document).ready(function () {  
  3.         $('#IssuerBN').autocomplete({  
  4.             source: 'IssuerHandler.ashx'  
  5.         });  
  6.     });  
  7.     })(jQuery);  
  8.   
  9.   
  10. using System;  
  11. using System.Collections.Generic;  
  12. using System.Configuration;  
  13. using System.Data;  
  14. using System.Data.SqlClient;  
  15. using System.Web;  
  16. using System.Web.Script.Serialization;  
  17.   
  18. namespace WAPReview  
  19. {  
  20.     /// <summary>  
  21.     /// Summary description for IssuerHandler  
  22.     /// </summary>  
  23.     public class IssuerHandler : IHttpHandler  
  24.     {  
  25.         public void ProcessRequest(HttpContext context)  
  26.         {  
  27.             string term = context.Request["term"] ?? "";  
  28.             List<string> txtIssuerBN = new List<string>();  
  29.             string connString = ConfigurationManager.ConnectionStrings["ConnString"].ConnectionString;  
  30.             //string connString = Properties.Settings.Default.ConnectionString.ToString();  
  31.             using (SqlConnection conn = new SqlConnection(connString))  
  32.             {  
  33.                 SqlCommand cmd = new SqlCommand("selectIssuerBN", conn);  
  34.                 cmd.CommandType = CommandType.StoredProcedure;  
  35.                 cmd.Parameters.AddWithValue("@IssuerBN", term);  
  36.                 conn.Open();  
  37.                 SqlDataReader dr = cmd.ExecuteReader();  
  38.                 while (dr.Read())  
  39.                 {  
  40.                     txtIssuerBN.Add(dr["IssuerBN"].ToString());  
  41.                 }  
  42.             }  
  43.             JavaScriptSerializer js = new JavaScriptSerializer();  
  44.             context.Response.Write(js.Serialize(txtIssuerBN));  
  45.         }  
  46.         public bool IsReusable  
  47.         {  
  48.             get  
  49.             {  
  50.                 return false;  
  51.             }  
  52.         }  
  53.     }  
  54. }  
and webpage:
 
  1. <%@ Page Language="C#" MasterPageFile="~/WAPReview.Master" AutoEventWireup="true" CodeBehind="ReviewWAP.aspx.cs" Inherits="WAPReview.ReviewWAP" %>  
  2.   
  3. <asp:Content ID="Content1" ContentPlaceHolderID="Head" runat="server">  
  4.           
  5.         <script src="/Scripts/SearchIssuerBN.js" type="text/javascript"></script>  
  6.         <script src="/Scripts/SearchReceiverCN.js" type="text/javascript"></script>  
  7.         <script src="/Scripts/errorValidation.js" type="text/javascript"></script>  
  8.               
  9. </asp:Content>  
  10. <asp:Content ID="Content4" ContentPlaceHolderID="MainContent" runat="server">  
  11. <asp:ScriptManager runat="server" EnablePartialRendering="true"></asp:ScriptManager>  
  12. <div class="container">  
  13.   
  14. ....................................  
  15.   
  16. <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">  
  17.             <ContentTemplate>  
  18.             <div id="Issuer2" class="row no-gutters">  
  19.                 <div class="col">  
  20.                     <div class="row no-gutters">  
  21.                         <div class="col-12">  
  22.                             <asp:Label class="form-control badge-success" ID="Label50" runat="server" Text="Task Issuer" />  
  23.                         </div>  
  24.                     </div>  
  25.                     <div class="row no-gutters">  
  26.                         <div class="col-4">  
  27.                             <asp:Label class="form-control badge-primary" ID="Label52" runat="server" Text="Issuer BN" />  
  28.                             <asp:TextBox class="form-control" ID="IssuerBN" runat="server" AutoPostBack="True" OnTextChanged="GetIssuerName" />  
  29.                             <asp:RequiredFieldValidator id="val13" runat="server" style="display:none" ControlToValidate="IssuerBN" />  
  30.                         </div>  
  31.                         <div class="col-8">  
  32.                             <asp:Label class="form-control badge-primary" ID="Label53" runat="server" Text="Issuer Name" />  
  33.                             <asp:TextBox class="form-control" ID="IssuerName" runat="server" ReadOnly="true" />  
  34.                             <asp:RequiredFieldValidator id="val14" runat="server" style="display:none" ControlToValidate="IssuerName" />  
  35.                         </div>  
  36.                     </div>  
  37.                 </div>  
  38.                 <div class="col">  
  39.                     <div class="row no-gutters">  
  40.                         <div class="col-12">  
  41.                             <asp:Label class="form-control badge-success" ID="Label51" runat="server" Text="Task Receiver" />  
  42.                         </div>  
  43.                     </div>  
  44.                     <div class="row no-gutters">  
  45.                         <div class="col-4">  
  46.                             <asp:Label class="form-control badge-primary" ID="Label54" runat="server" Text="Receiver CN" />  
  47.                             <asp:TextBox class="form-control" ID="ReceiverCN" runat="server" AutoPostBack="True" OnTextChanged="GetReceiverName" />  
  48.                             <asp:RequiredFieldValidator id="val15" runat="server" style="display:none" ControlToValidate="ReceiverCN" />  
  49.                         </div>  
  50.                         <div class="col-8">  
  51.                             <asp:Label class="form-control badge-primary" ID="Label55" runat="server" Text="Receiver Name" />  
  52.                             <asp:TextBox class="form-control" ID="ReceiverName" runat="server" ReadOnly="true" />  
  53.                         <asp:RequiredFieldValidator id="val16" runat="server" style="display:none" ControlToValidate="ReceiverName" />  
  54.                         </div>  
  55.                     </div>  
  56.                 </div>  
  57.             </div>  
  58.         </ContentTemplate>  
  59.     </asp:UpdatePanel>  
This time I was not able to find a solution since morning 

Answers (3)