When i click into the Button which is placed inside a usercontrol, i dont get the values that are inputted into the textbox on the button click event. please suggest any alternate.
my UserControl Markup:
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="SearchPopup.ascx.cs"
Inherits="trg.dgs.sites.web.ui.ui.charternew.usercontrol.SearchPopup" %>
<script type="text/javascript">
// function searchPopuptester() {
// debugger;
// var address = document.getElementById('<%= txtAddress.ClientID %>').value;
// //alert(address);
// var zip = document.getElementById('<%= txtZip.ClientID %>').value;
// // alert(zip);
// var aptnum = document.getElementById('<%= txtSuite.ClientID %>').value;
// alert(aptnum);
// debugger;
// $.ajax({
// type: "GET",
// url: "ui/charternew/usercontrol/SearchPopup.ascx/SearchAddress",
// data: [{ address: address, suite: aptnum, zip: zip}],
// datatype: "json",
// success: function (data) {
// window.location = data.d;
// },
// failure: function () {
// alert("Sorry,there is a error!");
// }
// });
// }
</script>
<div class="form_wrapper">
<div class="formarea">
<div class="form_heading">
<h4>
Check Service Availability</h4>
<p>
TO FIND THE BEST DEALS IN YOUR AREA</p>
</div>
dddddddddddd
<p>
<img src="ui/charternew/images/lock_icon.png" alt="Lock Icon" class="lock_icon" />Your
Information is Private and Secure</p>
<div class="feild_set">
<div class="feild_bar">
<asp:TextBox ID="txtAddress" runat="server" MaxLength="30" CssClass="feild1" />
</div>
<div class="feild_bar">
<div class="apt_feild">
<asp:TextBox ID="txtSuite" runat="server" MaxLength="25" CssClass="feild2" />
</div>
<div class="zipcode_feild">
<asp:TextBox ID="txtZip" runat="server" MaxLength="5" CssClass="feild2" />
</div>
</div>
<div class="feild_bar">
<asp:CheckBox ID="Ismoving" CssClass="tflables" TextAlign="right" runat="server"
Checked="false" />
<label>
Moving?</label>
<label id="lblMoveDate" style="display: none;">
<asp:TextBox ID="txtmovedate" runat="server" CssClass="txtfield" MaxLength="50" />
</label>
</div>
<asp:LinkButton ID="btnSubmit" runat="server" CssClass="btn" OnClick="btnSubmit_Click">Find My BEST Deals</asp:LinkButton>
</div>
<!-- End Form -->
</div>
</div>
My UserControl Code:
protected void btnSubmit_Click(object sender, EventArgs e)
{
string add = txtAddress.Text; }
Related
I have multiple Usercontrols in my project. Please find below two such Usercontrols' markup.
Places Usercontrol
<%# Control Language="C#" AutoEventWireup="true" CodeFile="Places.ascx.cs" Inherits="Places" EnableTheming="true" %>
<script type="text/javascript">
$(document).ready(function () {
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(EndRequest);
SetAutoComplete();
});
function SetAutoComplete() {
$("[id$=txtLocation]").autocomplete({
source: function (request, response) {
AjaxCall("<%= ResolveUrl("~/UControls/WebMethods.aspx/GetLocations") %>", request.term, response)
},
select: function (e, i) {
$("[id$=hfLocation]").val(i.item.val);
},
minLength: 1
});
}
</script>
<asp:TextBox ID="txtLocation" runat="server"></asp:TextBox>
<asp:HiddenField ID="hfLocation" runat="server" />
Skills User Control
<%# Control Language="C#" AutoEventWireup="true" CodeFile="UCSkill.ascx.cs" Inherits="UCSkill" EnableTheming="true" %>
<script type="text/javascript">
$(document).ready(function () {
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(EndRequest);
SetAutoComplete();
});
function SetAutoComplete() {
$("[id$=txtSkill]").autocomplete({
source: function (request, response) {
AjaxCall("<%= ResolveUrl("~/UControls/WebMethods.aspx/GetSkills") %>", request.term, response)
},
select: function (e, i) {
$("[id$=hfSkillID]").val(i.item.val);
},
minLength: 1
});
}
</script>
<asp:TextBox ID="txtSkill" runat="server" SkinID="lg-TB"></asp:TextBox>
<asp:Button ID="btnAddSkill" runat="server" Text="Add" OnClick="btnAddSkill_Click" />
<asp:HiddenField ID="hfSkillID" runat="server" />
Now my problem is, if use both the usercontrols in same page as below, only the one in the bottom works, i.e., my PlacesUC works and SkillsUC doesn't work, it just remains blank and doesn't throw any error even. If I move PlacesUC to top and SkillsUC to bottom, then my SkillsUC works and PlacesUC doesn't work. To make it clear the last usercontrol in the page alone works. Rest all Usercontrols above it doesn't work. It may be a conflict with ready function or autocomplete function. How to resolve this?
<%# Page Language="C#" CodeFile="Test.aspx.cs" Inherits="Test" MasterPageFile="~/UI/HomePage.master" %>
<%# Register Src="~/UControls/Places.ascx" TagPrefix="uc1" TagName="Places" %>
<%# Register Src="~/UControls/UCSkill.ascx" TagPrefix="uc1" TagName="UCSkill" %>
<asp:Content ContentPlaceHolderID="PageContent" runat="server">
<div class="row">
<div class="col-md-12 form-inline">
<table class="table table-sm">
<tr>
<td>
<uc1:UCSkill runat="server" ID="UCSkill" />
</td>
</tr>
<tr>
<td>
<uc1:Places runat="server" ID="Places" />
</td>
</tr>
</table>
</div>
</div>
</asp:Content>
Edit:-
My Ajax Call Function is as follows.
function AjaxCall(url, prefix, response) {
$.ajax({
url: url,
data: "{ 'prefix': '" + prefix + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.split('|')[0],
val: item.split('|')[1]
};
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
}
My master page is as follows.
<%# Master Language="C#" CodeFile="HomePage.master.cs" Inherits="HomePage" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>e-Recruitment</title>
</head>
<body style="padding-left: 5px; padding-right: 5px">
<style type="text/css">
.borderless td, .borderless th {
border: none;
}
.checkboxlist-inline li, .radiobuttonlist-inline li {
display: inline-block;
}
.checkboxlist-inline, .radiobuttonlist-inline {
margin-left: 8px;
}
.checkboxlist-inline label, .radiobuttonlist-inline label {
padding-left: 0;
padding-right: 8px;
}
</style>
<script src="../Scripts/jquery-3.2.1.slim.min.js"></script>
<script src="../Scripts/popper.min.js"></script>
<script src="../Scripts/bootstrap.min.js"></script>
<script src="../Scripts/jquery-1.10.0.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui.min.js" type="text/javascript"></script>
<link href="../Scripts/jquery-ui.css" rel="stylesheet" />
<form id="MainForm" runat="server" enctype="multipart/form-data">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="Company" Name="Company.JavaScript.CompanyScript.js" />
</Scripts>
</asp:ScriptManager>
<asp:UpdatePanel ID="MainUpdPanel" runat="server">
<ContentTemplate>
<div id="ParentDiv" class="container-fluid">
<div class="row">
<div class="col-md-1">
<img src="../Content/Images/logonew.png" class="img-responsive" />
</div>
<div class="col-md-11">
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div class="row">
<div class="col-md-12">
<asp:ContentPlaceHolder ID="PageContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div class="row">
<div class="col-md-12">
<br />
<table class="table table-hover">
<tr>
<td style="width: 10%">
<asp:Label ID="lblTheme" runat="server" Text="Site Theme"></asp:Label>
</td>
<td style="width: 20%; text-align: left">
<asp:DropDownList ID="ddlTheme" AutoPostBack="true" runat="server" OnSelectedIndexChanged="ddlTheme_SelectedIndexChanged">
</asp:DropDownList>
</td>
<td style="width: 70%; text-align: right">
<small><i>©<asp:Label ID="lblComp" runat="server" Text=" Company 2018"></asp:Label>
®<asp:Label ID="lblRights" runat="server" Text=" All Rights Reserved"></asp:Label></i></small>
</td>
</tr>
</table>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
Please update Jquery to select closest control to call your
SetAutoComplete();
code then all controls will work.
please check this line in your doucment.ready code.
prm.add_endRequest(EndRequest);
page is throwing
EndRequest is not defined error
.
Thank you all for your help, Finally the following solution worked.
All the Function names should be unique.
On page postback UpdatePanel content changes, so the events need to be registered again.
Considering the above two points, following is the new code.
Places User Control
<%# Control Language="C#" AutoEventWireup="true" CodeFile="Places.ascx.cs" Inherits="Places" EnableTheming="true" %>
<script type="text/javascript">
$(function () {
GetLocations();
});
var prmInstance = Sys.WebForms.PageRequestManager.getInstance();
prmInstance.add_endRequest(function () {
GetLocations();
});
function GetLocations() {
$("[id$=txtLocation]").autocomplete({
source: function (request, response) {
AjaxCall("<%= ResolveUrl("~/UControls/WebMethods.aspx/GetLocations") %>", request.term, response)
},
select: function (e, i) {
$("[id$=hfLocation]").val(i.item.val);
},
minLength: 1
});
}
</script>
<asp:TextBox ID="txtLocation" runat="server"></asp:TextBox>
<asp:HiddenField ID="hfLocation" runat="server" />
Skill User Control
<%# Control Language="C#" AutoEventWireup="true" CodeFile="UCSkill.ascx.cs" Inherits="UCSkill" EnableTheming="true" %>
<script type="text/javascript">
$(function () {
GetSkills();
});
var prmInstance = Sys.WebForms.PageRequestManager.getInstance();
prmInstance.add_endRequest(function () {
GetSkills();
});
function GetSkills() {
$("[id$=txtSkill]").autocomplete({
source: function (request, response) {
AjaxCall("<%= ResolveUrl("~/UControls/WebMethods.aspx/GetSkills") %>", request.term, response)
},
select: function (e, i) {
$("[id$=hfSkillID]").val(i.item.val);
},
minLength: 1
});
}
</script>
<asp:TextBox ID="txtSkill" runat="server" SkinID="lg-TB"></asp:TextBox>
<asp:Button ID="btnAddSkill" runat="server" Text="Add" OnClick="btnAddSkill_Click" />
<asp:HiddenField ID="hfSkillID" runat="server" />
This is the aspx code for the controls The feature that I want over here is that when I enter the value for the textboxes and select a dropdown value.. only after that should the button be enabled else the button should be disabled.
<div id="div1" class="panel-collapse collapse in">
<div class="form-inline">
<div class="form-group">
<label class="control-label">Part Number:</label>
<asp:TextBox type="text" class="form-control" ID="itemOne" runat="server" />
</div>
<div class="form-group">
<label>Name:</label>
<asp:TextBox type="text" class="form-control" ID="itemTwo" runat="server" />
</div>
<div class="form-group">
<label>Price:</label>
<asp:TextBox type="text" class="form-control" ID="itemThree" runat="server" />
</div>
<div class="form-group">
<label>Weight:</label>
<asp:TextBox type="text" class="form-control" ID="itemFour" runat="server" Style="width: 100px" />
</div>
<div class="form-group">
<label>Quantity:</label>
<asp:TextBox type="text" class="form-control" ID="miscItemQuantity" runat="server" Style="width: 80px" />
</div>
<div class="form-group">
<asp:DropDownList ID="dropdownList" CssClass="form-control" runat="server" Width="150" />
<%-- Items are added dynamically from the codebehind --%>
</div>
<asp:Button runat="server" ID="addItem" type="submit" Text="Add Item" CssClass="btn btn-primary pull-right"></asp:Button>
</div>
</div>
This is the jQuery code that I have tried to enable and disable the button with just one textbox
$(document).ready(function () {
$("#<%=itemOne.ClientID%>").keyup(function () {
if ($(this).val().length > 2) {
$("#<%=addItem.ClientID%>").removeAttr('disabled');
}
else {
$("#<%=addItem.ClientID%>").attr('disabled', 'disabled');
}
}).trigger('keyup');
});
I will be very glad to receive any solutions.
I think you are looking for something like this. First add a listener to each TextBox and DropDownList in div1 to check for changes. Then validate all controls withing the div for the correct values and set the button visibility accordingly.
<script type="text/javascript">
$(document).ready(function () {
$("#div1 input[type='text']").keyup(function () {
checkValues();
});
$("#div1 select").change(function () {
checkValues();
});
checkValues()
});
function checkValues() {
var isValid = true;
$("#div1 input[type='text']").each(function () {
if ($(this).val().length < 2) {
isValid = false;
}
});
$("#div1 select").each(function () {
if ($(this).prop('selectedIndex') === 0) {
isValid = false;
}
});
if (isValid) {
$("#<%=addItem.ClientID%>").removeAttr('disabled');
}
else {
$("#<%=addItem.ClientID%>").attr('disabled', 'disabled');
}
}
</script>
I am trying to enable show/hide password feature. I am creating an asp.net web form using C#.
My code is as below,
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class show : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
{
if (CheckBox1.Checked == false)
{
TextBox1.TextMode = TextBoxMode.Password;
}
if (CheckBox1.Checked == true)
{
TextBox1.TextMode = TextBoxMode.SingleLine;
}
}
}
On mypage.aspx,
there is a checkbox whose autopostback property is true and a textbox whose textmode is password.
The expected result is:-
show password into text when checkbox is checked.
hide password when checkbox is unchecked.
The problem is :-
This code is working only once i.e. it is not being executed when checkbox is checked or unchecked again.
The textbox becomes blank.
Please help me soon.
You are losing value within TextBox because on selection change, the page loads again, you need to check whether its a postBack or first time load and set the textBox value.
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
{
string Password = TextBox1.Text;
TextBox1.Attributes.Add("value", Password);
}
}
Your problem will be solved. I've tested it.
Hope it helps!
There's exactly zero need to use a postback for this. An example using jQuery:
Markup:
<label>Password fields are just a UI convenience:</label>
<input type="password" id="password" value="super secret password" />
<label>
<input type="checkbox" id="toggle-password" /> Toggle
</label>
jQuery code:
$(function() {
$('#toggle-password').on('change', function(e) {
var _this = $(this);
if (_this.is(':checked')) {
$('#password').attr({
'type': 'text'
});
} else {
$('#password').attr({
'type': 'password'
});
}
})
});
A vanilla JS version:
var toggle = document.getElementById('toggle-password');
var textbox = document.getElementById('password');
toggle.addEventListener("click", function() {
var isChecked = toggle.checked;
if (isChecked) {
textbox.type = "text";
} else {
textbox.type = "password";
}
})
You can't set the text property of a Password Type field for security reasons.So another way to set the value after changing mode is
if (CheckBox1.Checked == false)
{
string pass = TextBox1.Text;
TextBox1.TextMode = TextBoxMode.Password;
TextBox1.Attributes.Add("value", pass);
}
if (CheckBox1.Checked)
{
TextBox1.TextMode = TextBoxMode.SingleLine;
}
<head runat="server">
<title>Show Hide Password</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#show_password').hover(function show() {
//Change the attribute to text
$('#txtCurrentpassword').attr('type', 'text');
$('.icon').removeClass('fa fa-eye-slash').addClass('fa fa-eye');
},
function () {
//Change the attribute back to password
$('#txtCurrentpassword').attr('type', 'password');
$('.icon').removeClass('fa fa-eye').addClass('fa fa-eye-slash');
});
//CheckBox Show Password
$('#ShowPassword').click(function () {
$('#Password').attr('type', $(this).is(':checked') ? 'text' : 'password');
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#show_password1').hover(function show() {
//Change the attribute to text
$('#txtNewPassword').attr('type', 'text');
$('.icon').removeClass('fa fa-eye-slash').addClass('fa fa-eye');
},
function () {
//Change the attribute back to password
$('#txtNewPassword').attr('type', 'password');
$('.icon').removeClass('fa fa-eye').addClass('fa fa-eye-slash');
});
//CheckBox Show Password
$('#ShowPassword').click(function () {
$('#Password').attr('type', $(this).is(':checked') ? 'text' : 'password');
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#show_password2').hover(function show() {
//Change the attribute to text
$('#txtConfirmPassword').attr('type', 'text');
$('.icon').removeClass('fa fa-eye-slash').addClass('fa fa-eye');
},
function () {
//Change the attribute back to password
$('#txtConfirmPassword').attr('type', 'password');
$('.icon').removeClass('fa fa-eye').addClass('fa fa-eye-slash');
});
//CheckBox Show Password
$('#ShowPassword').click(function () {
$('#Password').attr('type', $(this).is(':checked') ? 'text' : 'password');
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<br />
<br />
<br />
<div class="col-md-10">
<div class="" style="display: none" runat="server" id="divStatusMsg">
<asp:HiddenField ID="lblLoginUserId" runat="server" />
<asp:HiddenField ID="HidEncrptedPWD" runat="server" />
<asp:HiddenField ID="HidCurrEncrptedPWD" runat="server" />
<asp:HiddenField ID="hidError" runat="server" />
</div>
</div>
<h2>Update Password</h2>
<label class="col-form-label" style="color: red">(Min 10 Character including 1 Upper, 1 Lower Charcter, 1 Numeric & 1 Special Character)</label>
<div class="row">
<div class="col-md-6">
<label>User Name</label>
<div class="input-group">
<asp:TextBox ID="txtUserName" TextMode="SingleLine" runat="server" CssClass="form-control" Enabled="false"></asp:TextBox>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Current Password</label>
<div class="input-group">
<asp:TextBox ID="txtCurrentpassword" TextMode="Password" runat="server" CssClass="form-control"></asp:TextBox>
<div class="input-group-append">
<button id="show_password" class="btn btn-primary" type="button">
<span class="fa fa-eye-slash icon"></span>
</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>New Password</label>
<div class="input-group">
<asp:TextBox ID="txtNewPassword" TextMode="Password" runat="server" CssClass="form-control"></asp:TextBox>
<div class="input-group-append">
<button id="show_password1" class="btn btn-primary" type="button">
<span class="fa fa-eye-slash icon"></span>
</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Re-Enter Password :</label>
<div class="input-group">
<asp:TextBox ID="txtConfirmPassword" TextMode="Password" runat="server" CssClass="form-control"></asp:TextBox>
<div class="input-group-append">
<button id="show_password2" class="btn btn-primary" type="button">
<span class="fa fa-eye-slash icon"></span>
</button>
</div>
</div>
</div>
</div>
<br />
<!--Button Region-->
<div class="row">
<div class="col-lg-6 text-right" id="divDateSearch">
<div class="form-group">
<button type="button" id="btnSave" runat="server" class="btn btn-success btn-border btn-sm" onserverclick="btnSave_click">Change</button>
<button type="button" id="btnReset" runat="server" class="btn btn-default btn-border btn-sm" onserverclick="btnReset_click">Reset</button>
</div>
</div>
</div>
<!--Button Region-->
</div>
</form>
</body>
Hope this question is understandable.
I have a repeater with several rows from the database, and each row has a picture and a button
like this:
<asp:Repeater runat="server" DataSourceID="SqlDataSource1" ID="repeater1">
<ItemTemplate>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6" style="height: 200px;">
<div class="thumbnail text-center sletbox">
<img class="img-responsive" src='../fotos/<%# Eval("url") %>' alt=""></a>
<div class="slet">
<a href='delete_picture.aspx?id=<%# Eval("pic_id") %>&a=<%# Eval("album") %>&n=<%# Eval("url") %>' onclick="return confirm('Vil du slette dette billed?')">
<h3 class="btn btn-danger btn-xs" id="contact">Slet</h3>
</a>
</div>
</div>
</div>
<!-- col-lg-4 -->
</ItemTemplate>
</asp:Repeater>
Then i have made a jquery function that makes the the button appear by hover, and that works fine.
<script>
$(document).ready(function () {
$(".slet").hide();
$(".sletbox").hover(function () {
$(".slet").fadeToggle(50);
});
});
</script>
But the problem is that it makes ALL the buttons appear, not just the one you're hovering.
So how do i make only the one you're hovering appear?
Try with below code:
$(document).ready(function () {
$(".slet").hide();
$(".sletbox").hover(function () {
$(this).find(".slet").fadeToggle(50); //locating the associated .slet and not the all one.
});
});
I have a autocomplete dropdown which works fine, it however does a postback everytime an item is addded to the list box.
To rectify this I have wrapped the content in an update panel. The autocomplete functions as expected until you click add. Where the postback would usaully be, after the item has been added the autocomplete does not work.
Below is the code:
aspx:
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel runat="server" ID="UpdatePanel" UpdateMode="Conditional">
<ContentTemplate>
<div class="row">
<div class="span4">
<h3>
Create Season</h3>
</div>
</div>
<div class="row">
<div class="span2">
<label class="control-label" for="TeamName">
Season Name:</label>
</div>
<div class="span3">
<asp:TextBox ID="SeasonNameTextBox" runat="server" Text="Premier League"></asp:TextBox>
</div>
</div>
<div class="row">
<div class="span2">
<label class="control-label" for="TeamName">
Season Year:</label>
</div>
<div class="span3">
<asp:DropDownList ID="DropDownList1" runat="server" Width="100px">
<asp:ListItem>2012/13</asp:ListItem>
<asp:ListItem Value="2013/14">2013/14</asp:ListItem>
<asp:ListItem>2014/15</asp:ListItem>
<asp:ListItem>2015/16</asp:ListItem>
</asp:DropDownList>
</div>
</div>
<div class="row">
<div class="span2">
<label class="control-label" for="TeamName">
Add Team to Season:</label></p>
</div>
<div class="span3">
<asp:TextBox ID="TeamNameTextBox" runat="server" CssClass="searchinput"></asp:TextBox>
</div>
</div>
<div class="row">
<div class="span2">
</div>
<div class="span3">
<p>
<asp:Button ID="AddTeamButton" CssClass="btn btn-primary" runat="server" Text="Add"
OnClick="AddTeamButton_Click" /></p>
</div>
</div>
<div class="row">
<div class="span2">
<label class="control-label" for="TeamName">
Seasons Teams:</label></p>
</div>
<div class="span3">
<asp:ListBox ID="TeamNameListBox" runat="server"></asp:ListBox>
<asp:Button ID="SubmitTeamsButton" CssClass="btn btn-primary" runat="server" Text="Submit"
OnClick="SubmitTeamsButton_Click" />
<asp:Literal ID="TeamCount" runat="server"></asp:Literal>
</div>
</div>
<div class="row">
<div class="span9">
<p>
<asp:Literal ID="CreateSeasonError" runat="server"></asp:Literal></p>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$(".searchinput").autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "PredictiveSearch.asmx/GetAllPredictions",
data: "{'keywordStartsWith':'" + request.term + "'}",
dataType: "json",
async: true,
success: function (data) {
response(data.d);
},
error: function (result) {
alert("Due to unexpected errors we were unable to load data");
}
});
},
minLength: 1
});
});
</script>
</ContentTemplate>
</asp:UpdatePanel>
asmx:
[System.Web.Script.Services.ScriptService]
public class PredictiveSearch : System.Web.Services.WebService
{
[WebMethod]
public IList<string> GetAllPredictions(string keywordStartsWith)
{
//TODO: implement real search here!
SqlConnection conn = new SqlConnection(WebConfigurationManager.ConnectionStrings["RaiseFantasyLeagueConnectionString"].ConnectionString);
SqlCommand cmd = new SqlCommand("[dbo].[findEnglishTeams]", conn);
cmd.CommandType = CommandType.StoredProcedure;
string searchTerm = keywordStartsWith;
SqlParameter searchTermParam = new SqlParameter("#searchterm", searchTerm);
cmd.Parameters.Add(searchTermParam);
IList<string> output = new List<string>();
conn.Open();
SqlDataReader dReader = cmd.ExecuteReader(CommandBehavior.CloseConnection);
if (dReader.HasRows)
{
while (dReader.Read())
{
output.Add(dReader["englishTeamName"].ToString());
}
return output;
}
else
{
return output;
}
}
}
Can anyone shed any light on why this might be happening and how to fix it?
Thanks in advance !
Try this:
Use
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded();
for UpdatePanels instead of
$(document).ready() {.. }
Example(not tested):
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(yourAutoCompleteInitializationFunction);
function yourAutoCompleteInitializationFunction() {
$(".searchinput").autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "PredictiveSearch.asmx/GetAllPredictions",
data: "{'keywordStartsWith':'" + request.term + "'}",
dataType: "json",
async: true,
success: function (data) {
response(data.d);
},
error: function (result) {
alert("Due to unexpected errors we were unable to load data");
}
});
},
minLength: 1
});
}