Auto complete function not working properly jquery

Auto complete function not working properly jquery - c#

I have a textbox that needs to be autocompleted when user types in atleast 2 characters, however, it's simply not working. I have almost the exact same code in another form and it is working fine. Any input will be greatly appreciated! I did not post the C# because, as you see, I console.log the list to ensure the ajax post was successful (it is). Also, the jquery and jquery-ui scripts are declared in the master page of this app.
var shipTo = $('#txtShipTo')
var shipFrom = $('#txtShipFrom')
var addressList = []
$(document).ready(function () {
$.ajax({
type: 'POST',
url: 'Shipping.aspx/fillList',
contentType: 'application/json; charset=utf-8',
success: function (r) {
$.each(r.d, function (index, value) {
addressList.push(value)
})
console.log(addressList)
},
error: function (result) {
alert("Fail")
}
})
})
shipFrom.autocomplete({
minLength: 2,
source: addressList,
})
<%# Page Title="Shipping Request" Language="C#" MasterPageFile="~/Base.master" AutoEventWireup="true" CodeFile="Shipping.aspx.cs" Inherits="Shipping" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<link href="StyleSheet1.css" rel="stylesheet" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div class="container" id="fromContainer">
<div class="row">
<div class="col-lg-5 col" id="shipFromDiv">
<label for = "txtShipFrom">Shipped From</label>
<asp:TextBox ID="txtShipFrom" runat="server" class="form-control" placeholder="Begin typing..." aria-label=""></asp:TextBox>
<label for = "txtAddress1">Address 1</label>
<asp:TextBox ID="txtAddress1" runat="server" class="form-control" disabled></asp:TextBox>
<label for = "txtAddress2">Address 2</label>
<asp:TextBox ID="txtAddress2" runat="server" class="form-control" disabled></asp:TextBox>
<div class="row">
<div class="col-lg-6 col-5">
<label for = "txtCity">City</label>
<asp:TextBox ID="txtCity" runat="server" class="form-control" disabled></asp:TextBox>
</div>
<div class="col-lg-2 col-3">
<label for = "txtState">State</label>
<asp:TextBox ID="txtState" runat="server" class="form-control" disabled></asp:TextBox>
</div>
<div class="col-lg-4 col-4">
<label for = "txtZip">Zip</label>
<asp:TextBox ID="txtZip" runat="server" class="form-control" disabled></asp:TextBox>
</div>
</div>
<div class="row">
<div class="col-lg-8 col">
<label for = "txtCountry">Country</label>
<asp:TextBox ID="txtCountry" runat="server" class="form-control" disabled></asp:TextBox>
</div>
<div class="col-lg-4 col">
<label for = "txtCode">Code</label>
<asp:TextBox ID="txtCode" runat="server" class="form-control" disabled></asp:TextBox>
</div>
</div>
</div>
<div class="col-lg-6 col" id="shipToDiv">
<label for = "txtShipTo">Shipped To</label>
<asp:TextBox ID="txtShipTo" runat="server" class="form-control" placeholder="Begin typing..."></asp:TextBox>
<label for = "txtAddress3">Address 1</label>
<asp:TextBox ID="txtAddress3" runat="server" class="form-control" disabled></asp:TextBox>
<label for = "txtAddress4">Address 2</label>
<asp:TextBox ID="txtAddress4" runat="server" class="form-control" disabled></asp:TextBox>
<div class="row">
<div class="col-lg-6 col">
<label for = "txtCity">City</label>
<asp:TextBox ID="TextBox1" runat="server" class="form-control" disabled></asp:TextBox>
</div>
<div class="col-lg-2 col">
<label for = "txtState">State</label>
<asp:TextBox ID="TextBox2" runat="server" class="form-control" disabled></asp:TextBox>
</div>
<div class="col-lg-4 col">
<label for = "txtZip">Zip</label>
<asp:TextBox ID="TextBox3" runat="server" class="form-control" disabled></asp:TextBox>
</div>
</div>
<div class="row">
<div class="col-lg-8 col">
<label for = "txtCountry">Country</label>
<asp:TextBox ID="TextBox4" runat="server" class="form-control" disabled></asp:TextBox>
</div>
<div class="col-lg-4 col">
<label for = "txtCode">Code</label>
<asp:TextBox ID="TextBox5" runat="server" class="form-control" disabled></asp:TextBox>
</div>
</div>
</div>
</div>
</div>
<script src="JavaScript2.js"></script>
</asp:Content>

Related

Unable to trigger onchange event from select tag in ASP.Net

I want to change the textboxes that should be displayed based on accountType the user selects. However, the onchange event attached to select is not getting triggered. Any heads up?
This is the select tag.
<div class="col-md-12 form-group" style="color:black">
<select name="accountTypes" id="accountTypes" runat="server" onchange="javascript:document.forms[0].submit();" onserverchange="accountType_Changed">
<option value="customer">Customer</option>
<option value="pharmacy">Pharmacy</option>
<option value="doctor">Doctor</option>
</select>
</div>
The accountType_Changed function is:
void accountType_Changed(Object sender, EventArgs e)
{
cnic.Text = accountTypes.SelectedItem.Value;//or accountTypes.SelectedItem.Text
}
Edit:
Based on the solution proposed by #mahesh_b, following edits were made that fixed the problem:
protected void Page_Load(object sender, EventArgs e)
{
this.accountTypes.Attributes.Add("onchange", Page.ClientScript.GetPostBackEventReference(this.accountTypes, this.accountTypes.ID));
}
protected void accountType_Changed(object sender, EventArgs e)
{
cnic.Text = "Working!!!"; //accountTypes.SelectedItem.Value;//or accountTypes.SelectedItem.Text
}
Edit 2: Layout Rendering Issue after adding partial refresh
Login.aspx:
<asp:ScriptManager EnablePartialRendering="true" ID="scriptManager" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<section class="login_part section_padding ">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 col-md-6">
<div class="login_part_text text-center">
<div class="login_part_text_iner">
<h2>New to PHS?</h2>
<div class="row">
<div class="column col-md-12 form-group p_star">
<div class="col-md-12 form-group p_star">
<asp:TextBox ID="firstname" placeholder="First Name" class="form-control" runat="server">
</asp:TextBox>
</div>
</div>
<div class="column col-md-12 form-group p_star">
<div class="col-md-12 form-group p_star">
<asp:TextBox ID="lastname" placeholder="Last Name" class="form-control" runat="server">
</asp:TextBox>
</div>
</div>
</div>
<div class="col-md-12 form-group p_star">
<asp:TextBox ID="cnic" placeholder="CNIC" class="form-control" runat="server">
</asp:TextBox>
</div>
<div class="col-md-12 form-group p_star">
<asp:TextBox ID="email" placeholder="Email" class="form-control" runat="server">
</asp:TextBox>
</div>
<div class="col-md-12 form-group p_star">
<asp:TextBox ID="pass" placeholder="Password" class="form-control" runat="server">
</asp:TextBox>
</div>
<div class="col-md-12 form-group" style="color:black">
<select name="accountTypes" id="accountTypes" runat="server" onchange="javascript:document.forms[0].submit();" onserverchange="accountType_Changed">
<option value="customer">Customer</option>
<option value="pharmacy">Pharmacy</option>
<option value="doctor">Doctor</option>
</select>
</div>
<br /><br />
<div class="col-md-12 form-group p_star">
<asp:TextBox ID="taxNo" placeholder="Tax No" class="form-control" runat="server">
</asp:TextBox>
</div>
<div class="col-md-12 form-group p_star">
<asp:TextBox ID="pName" placeholder="Pharmacy Name" class="form-control" runat="server">
</asp:TextBox>
</div>
<div class="col-md-12 form-group p_star">
<asp:TextBox ID="pAddress" placeholder="Pharmacy Address" class="form-control" runat="server">
</asp:TextBox>
</div>
<div class="col-md-12 form-group p_star">
<asp:TextBox ID="cAddress" placeholder="Address" class="form-control" runat="server">
</asp:TextBox>
</div>
<div class="col-md-12 form-group p_star">
<asp:TextBox ID="docID" placeholder="Doctor Id" class="form-control" runat="server">
</asp:TextBox>
</div>
<div class="col-md-12 form-group p_star">
<asp:TextBox ID="experience" placeholder="Experience (Years)" class="form-control" runat="server">
</asp:TextBox>
</div>
<div class="col-md-12 form-group p_star">
<asp:TextBox ID="expertise" placeholder="Expertise (Specialization)" class="form-control" runat="server">
</asp:TextBox>
</div>
<br />
<p>Create an account today and avail the best deals on medics.</p>
<asp:Button ID="registerButton" class="btn_3" runat="server" width="50%" Text="Create Account" OnClick="createAccount_Clicked"/>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="login_part_form">
<div class="login_part_form_iner">
<h3>Welcome Back ! <br>
Please Sign in now</h3>
<form class="row contact_form" action="#" method="post" novalidate="novalidate">
<div class="col-md-12 form-group p_star">
<input type="text" class="form-control" id="name" name="name" value=""
placeholder="Username">
</div>
<div class="col-md-12 form-group p_star">
<input type="password" class="form-control" id="password" name="password" value=""
placeholder="Password">
</div>
<div class="col-md-12 form-group">
<button type="submit" value="submit" class="btn_3">
log in
</button>
<a class="lost_pass" href="#">forget password?</a>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
</ContentTemplate>
</asp:UpdatePanel>
These images show the original layout of select and what gets loaded after I change the value:
Original:
This is what gets loaded after changing the value in accountType:
How can I get to keep my original layout?

You need to use ASP.NET Dropdownlist with using AutoPostBack=true to trigger OnChange event:
<div class="col-md-12 form-group" style="color:black">
<asp:DropDownList id="accountTypes" AutoPostBack="True" OnSelectedIndexChanged="accountType_Changed" runat="server">
<asp:ListItem Value="account_type">Account Type</asp:ListItem>
<asp:ListItem Value="customer"> Customer </asp:ListItem>
<asp:ListItem Value="pharmacy"> Pharmacy </asp:ListItem>
<asp:ListItem Value="doctor"> Doctor </asp:ListItem>
</asp:DropDownList>
</div>
And server side accountType_Changed would be like this:
void accountType_Changed(Object sender, EventArgs e)
{
username.Text = accountTypes.SelectedItem.Value;//or accountTypes.SelectedItem.Text
}

For HTML controls use the server events, in your case OnServerChange event. In order the serverchange event to fire you have to explicitly submit the form or do a postback on onchange event. You can do this with below two options -
Submit the form on onchange event from client side:
<select name="accountTypes" id="accountTypes" runat="server"
onchange="javascript:document.forms[0].submit();" onserverchange="accountType_Changed">
Use the GetPostBackEventReference method from server side:
protected void Page_Load(object sender, EventArgs e)
{
this.accountTypes.Attributes.Add("onchange", Page.ClientScript.GetPostBackEventReference(this.accountTypes, this.accountTypes.ID));
}
You may have to also change the method signature to-
protected void accountType_Changed(object sender, EventArgs e)
{
}
Refer these threads to understand more on the same -
How to make HtmlSelect Control with OnChange event to trigger C# code behind function
OnServerChange event not firing
If your requirement can fit with changing to ASP.NET Drop down list then you can follow which Selim mentioned in another answer.

How to add RequiredFieldValidator on a Ajax Editor C#

I am trying to add validation on Editor but it cants work. here is my code
when I run this and fill field its give me an error.
<section style="padding-top: 120px" class="info-area pb-120 container-fluid">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-lg-12 no-padding info-area-left">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="form-horizontal" runat="server" id="FormControls">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Your Name</label>
<div class="col-sm-10">
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtUserName" ForeColor="Red" Display="Dynamic" ValidationGroup="inq" ErrorMessage="Enter name"></asp:RequiredFieldValidator>
<asp:TextBox ID="txtUserName" CssClass="form-control text-uppercase" runat="server" placeholder="Your name"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Your Testimonial</label>
<div class="col-sm-10">
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="Editor1" ForeColor="Red" Display="Dynamic" ValidationGroup="inq" ErrorMessage="Enter Testimonial"></asp:RequiredFieldValidator>
<cc1:Editor ID="Editor1" runat="server" placeholder="Testimonial" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<asp:Button ID="btnSend" OnClick="btnSend_Click" CssClass="primary-btn text-uppercase" ValidationGroup="inq" runat="server" Text="Send" />
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
</section>
may helps you

UpdateProgress not firing on every PostBack of controls inside UpdatePanel

I have an UpdatePanel:
<asp:UpdatePanel runat="server" ID="panelFatt">
<ContentTemplate>
<div class="row" runat="server" id="divCFPIva">
<div class="col-md-6">
<div class="form-group">
<label for="txtCF">Codice Fiscale</label>
<asp:TextBox runat="server" ID="txtCF" type="text" MaxLength="16" class="form-control" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="txtPIVA">Partita IVA</label>
<asp:TextBox runat="server" ID="txtPIVA" type="text" MaxLength="11" class="form-control" />
</div>
</div>
<div class="col-md-12">
<span class="help-inline hidden lblerror" runat="server" id="lblErrorCFPIva"></span>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group" runat="server" id="divEmail">
<label for="txtEmail" class="control-label">Email*</label>
<div class="controls">
<asp:TextBox runat="server" TextMode="Email" type="text" ID="txtEmail" class="form-control" />
<span class="help-inline hidden lblerror" runat="server" id="lblErrorEmail"></span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group" runat="server" id="divTelefono">
<label for="txtTelefono" class="control-label">Recapito Telefonico*</label>
<div class="controls">
<asp:TextBox runat="server" ID="txtTelefono" type="text" TextMode="Phone" class="form-control" />
<span class="help-inline hidden lblerror" runat="server" id="lblErrorTelefono"></span>
</div>
</div>
</div>
</div>
<!-- /Row -->
<div class="form-group">
<asp:RadioButton runat="server" ID="radioScegliIndirizziFatt" Text=" Scegli tra uno dei tuoi indirizzi" AutoPostBack="true" OnCheckedChanged="radioScegliIndirizziFatt_CheckedChanged" Checked="true" GroupName="radioIndirizziFatt" />
<div class="form-group" runat="server" id="divScegliIndirizzoFatt">
<asp:DropDownList runat="server" ID="ddlIndirizziFatt" class="form-control"></asp:DropDownList>
<span class="help-inline hidden lblerror" runat="server" id="lblErrorScegliIndirizziFatt"></span>
</div>
<br />
<asp:RadioButton runat="server" ID="radioNuovoIndirizzoFatt" Text=" Inserisci un nuovo Indirizzo" AutoPostBack="true" OnCheckedChanged="radioNuovoIndirizzoFatt_CheckedChanged" GroupName="radioIndirizziFatt" />
<div class="form-group" runat="server" id="divNomeFatt">
<label for="txtNomeFatt" class="control-label">Nome o Ragione Sociale*</label>
<div class="controls">
<asp:TextBox runat="server" ID="txtNomeFatt" type="text" class="form-control" />
<span class="help-inline hidden lblerror" runat="server" id="lblErrorNomeFatt"></span>
</div>
</div>
<div class="form-group" runat="server" id="divIndirizzoFatt">
<label for="txtIndirizzoFatt" class="control-label">Indirizzo*</label>
<div class="controls">
<asp:TextBox runat="server" ID="txtIndirizzoFatt" type="text" class="form-control" />
<span class="help-inline hidden lblerror" runat="server" id="lblErrorIndirizzoFatt"></span>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="form-group" runat="server" id="divStatoFatt">
<label for="ddlStatoFatt" class="control-label">Stato</label>
<div class="controls">
<asp:DropDownList runat="server" ID="ddlStatoFatt" OnSelectedIndexChanged="ddlStatoFatt_SelectedIndexChanged" class="form-control" AutoPostBack="true" />
</div>
</div>
</div>
<div class="col-md-7">
<div class="form-group" runat="server" id="divProvinciaFatt" visible="false">
<label runat="server" id="lblProvinciaFatt" for="ddlProvinciaFatt" class="control-label">Provincia</label>
<div class="controls">
<asp:DropDownList runat="server" ID="ddlProvinciaFatt" class="form-control" OnSelectedIndexChanged="ddlProvinciaFatt_SelectedIndexChanged" AutoPostBack="true" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8" runat="server" id="divCittaFatt">
<div class="form-group">
<label runat="server" id="lblCittaFatt" for="txtCittaFatt" class="control-label">Città*</label>
<div class="form-group" runat="server" id="divDDLFatt" visible="false">
<asp:DropDownList runat="server" ID="ddlCittaFatt" class="form-control" OnSelectedIndexChanged="ddlCittaFatt_SelectedIndexChanged" AutoPostBack="true" />
</div>
<br />
<div class="form-group" runat="server" id="divTXTFatt" visible="false">
<asp:TextBox runat="server" ID="txtCittaFatt" type="text" class="form-control" />
</div>
<span class="help-inline hidden lblerror" runat="server" id="lblErrorCittaFatt"></span>
</div>
</div>
<div class="col-md-4" runat="server" id="divCAPFatt">
<div class="form-group">
<label for="txtCAPFatt" class="control-label">CAP*</label>
<div class="controls">
<asp:TextBox runat="server" ID="txtCapFatt" type="text" class="form-control" />
<span class="help-inline hidden lblerror" runat="server" id="lblErrorCAPFatt"></span>
</div>
</div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
And I'm trying to fire an UpdateProgress that I would like show loading image at every post back of the controls inside the UpdatePanel.
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="panelFatt">
<ProgressTemplate>
<div class="modal">
<div class="center">
<img alt="" src="http://i.stack.imgur.com/FhHRx.gif" />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
This is not working at all.
I saw on the Internet that someone associates a client method with the click of a button in the Update Panel.
But I should do it for all the controls that make a post back within my update panel.
Is there a way to make it work?
I modified my code in this way:
<asp:UpdatePanel runat="server" ID="panelFatt" UpdateMode="Conditional">
<ContentTemplate>
<div class="row">
<div class="col-md-6">
<h4>
<asp:CheckBox runat="server" ID="checkFattura" Text="Desidero ricevere la Fattura" AutoPostBack="true" OnCheckedChanged="checkFattura_CheckedChanged" CssClass="checkbox-inline cssRadio" /></h4>
</div>
</div>
<br />
<div class="row" runat="server" id="divCFPIva">
<div class="col-md-6">
<div class="form-group">
<label for="txtCF" runat="server" id="lblCF" visible="false">Codice Fiscale</label>
<asp:TextBox runat="server" ID="txtCF" type="text" MaxLength="16" class="form-control" Visible="false" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="txtPIVA" runat="server" id="lblPIva" visible="false">Partita IVA</label>
<asp:TextBox runat="server" ID="txtPIVA" type="text" MaxLength="11" class="form-control" Visible="false" />
</div>
</div>
<div class="col-md-12">
<span class="help-inline hidden lblerror" runat="server" id="lblErrorCFPIva"></span>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group" runat="server" id="divEmail">
<label for="txtEmail" class="control-label">Email*</label>
<div class="controls">
<asp:TextBox runat="server" TextMode="Email" type="text" ID="txtEmail" class="form-control" />
<span class="help-inline hidden lblerror" runat="server" id="lblErrorEmail"></span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group" runat="server" id="divTelefono">
<label for="txtTelefono" class="control-label">Recapito Telefonico*</label>
<div class="controls">
<asp:TextBox runat="server" ID="txtTelefono" type="text" TextMode="Phone" class="form-control" />
<span class="help-inline hidden lblerror" runat="server" id="lblErrorTelefono"></span>
</div>
</div>
</div>
</div>
<!-- /Row -->
<div class="form-group">
<div runat="server" id="divNotVisibleFatt">
<asp:RadioButton runat="server" ID="radioScegliIndirizziFatt" Text=" Scegli tra uno dei tuoi indirizzi" AutoPostBack="true" OnCheckedChanged="radioScegliIndirizziFatt_CheckedChanged" Checked="true" GroupName="radioIndirizziFatt" />
<div class="form-group" runat="server" id="divScegliIndirizzoFatt">
<asp:DropDownList runat="server" ID="ddlIndirizziFatt" class="form-control"></asp:DropDownList>
<span class="help-inline hidden lblerror" runat="server" id="lblErrorScegliIndirizziFatt"></span>
</div>
<br />
<asp:RadioButton runat="server" ID="radioNuovoIndirizzoFatt" Text=" Inserisci un nuovo Indirizzo" AutoPostBack="true" OnCheckedChanged="radioNuovoIndirizzoFatt_CheckedChanged" GroupName="radioIndirizziFatt" />
</div>
<div class="form-group" runat="server" id="divNomeFatt">
<label for="txtNomeFatt" class="control-label">Nome o Ragione Sociale*</label>
<div class="controls">
<asp:TextBox runat="server" ID="txtNomeFatt" type="text" class="form-control" />
<span class="help-inline hidden lblerror" runat="server" id="lblErrorNomeFatt"></span>
</div>
</div>
<div class="form-group" runat="server" id="divIndirizzoFatt">
<label for="txtIndirizzoFatt" class="control-label">Indirizzo*</label>
<div class="controls">
<asp:TextBox runat="server" ID="txtIndirizzoFatt" type="text" class="form-control" />
<span class="help-inline hidden lblerror" runat="server" id="lblErrorIndirizzoFatt"></span>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="form-group" runat="server" id="divStatoFatt">
<label for="ddlStatoFatt" class="control-label">Stato</label>
<div class="controls">
<asp:DropDownList runat="server" ID="ddlStatoFatt" OnSelectedIndexChanged="ddlStatoFatt_SelectedIndexChanged" class="form-control" AutoPostBack="true" />
</div>
</div>
</div>
<div class="col-md-7">
<div class="form-group" runat="server" id="divProvinciaFatt" visible="false">
<label runat="server" id="lblProvinciaFatt" for="ddlProvinciaFatt" class="control-label">Provincia</label>
<div class="controls">
<asp:DropDownList runat="server" ID="ddlProvinciaFatt" class="form-control" OnSelectedIndexChanged="ddlProvinciaFatt_SelectedIndexChanged" AutoPostBack="true" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8" runat="server" id="divCittaFatt">
<div class="form-group">
<label runat="server" id="lblCittaFatt" for="txtCittaFatt" class="control-label">Città*</label>
<div class="form-group" runat="server" id="divDDLFatt" visible="false">
<asp:DropDownList runat="server" ID="ddlCittaFatt" class="form-control" OnSelectedIndexChanged="ddlCittaFatt_SelectedIndexChanged" AutoPostBack="true" />
</div>
<br />
<div class="form-group" runat="server" id="divTXTFatt" visible="false">
<asp:TextBox runat="server" ID="txtCittaFatt" type="text" class="form-control" />
</div>
<span class="help-inline hidden lblerror" runat="server" id="lblErrorCittaFatt"></span>
</div>
</div>
<div class="col-md-4" runat="server" id="divCAPFatt">
<div class="form-group">
<label for="txtCAPFatt" class="control-label">CAP*</label>
<div class="controls">
<asp:TextBox runat="server" ID="txtCapFatt" type="text" class="form-control" />
<span class="help-inline hidden lblerror" runat="server" id="lblErrorCAPFatt"></span>
</div>
</div>
</div>
</div>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="checkFattura" EventName="CheckedChanged"/>
<asp:AsyncPostBackTrigger ControlID="radioScegliIndirizziFatt" EventName="CheckedChanged"/>
<asp:AsyncPostBackTrigger ControlID="radioNuovoIndirizzoFatt" EventName="CheckedChanged"/>
<asp:AsyncPostBackTrigger ControlID="ddlStatoFatt" EventName="SelectedIndexChanged"/>
<asp:AsyncPostBackTrigger ControlID="ddlProvinciaFatt" EventName="SelectedIndexChanged"/>
<asp:AsyncPostBackTrigger ControlID="ddlCittaFatt" EventName="SelectedIndexChanged"/>
</Triggers>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="panelFatt">
<ProgressTemplate>
<div class="modal">
<div class="center">
<img alt="" src="https://i.stack.imgur.com/FhHRx.gif" />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
but even not working..
and my data bind aer in Page_Load
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
// Combo Province
DataTable dtProv = oTabelle.GetDTProvinceByIdStato(IdStatoITA);
oUty.loadDDL(ref ddlProvinciaFatt, dtProv, "IdProvincia", "NomeProvincia", "", "", "");
ddlProvinciaFatt.SelectedValue = "";
...
}
}
and my associated event is the following
protected void ddlProvinciaFatt_SelectedIndexChanged(object sender, EventArgs e)
{
txtCapFatt.Text = "";
string idProvincia = ddlProvinciaFatt.SelectedValue;
// carico i comuni della provincia
oUty.loadDDL(ref ddlCittaFatt, oTabelle.GetDTComuniByIdProvincia(idProvincia), "IdComune", "NomeComune", "", "", "", true);
ddlCittaFatt.SelectedIndex = -1;
}
where I'm wrong?

For displaying UpdateProgress on every PostBack of your Controls in UpdatePanel:
Set UpdateMode of your UpdatePanel to Conditional:
Manually trigger AsyncPostBackTrigger to your controls inside UpdatePanel and give the ControlID and EventName that will fire:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" >
</ContentTemplate>
<!-- Some other controls that perform post back -->
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlStatoFatt"
EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
And can test its working in events using System.Threading.Thread.Sleep(3000);:
protected void ddlStatoFatt_SelectedIndexChanged(object sender, EventArgs e)
{
// delay it for testing
System.Threading.Thread.Sleep(3000);
Label1.Text = "Page refreshed with DropDownList at " +
DateTime.Now.ToString();
}
I have tried this at my site and its working:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" >
<ContentTemplate>
<fieldset>
<legend>UpdatePanel1</legend>
<asp:Label ID="Label1" runat="server" Text="Panel initially rendered."></asp:Label>
<br />
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True"
OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
<asp:ListItem Value="1">Choose</asp:ListItem>
<asp:ListItem Value="2">Blue</asp:ListItem>
<asp:ListItem Value="3">Green</asp:ListItem>
</asp:DropDownList>
<br />
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</fieldset>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
Panel2 updating....
</ProgressTemplate>
</asp:UpdateProgress>
And Code-Behind:
protected void Button1_Click(object sender, EventArgs e)
{
// Introducing delay for demonstration.
System.Threading.Thread.Sleep(3000);
Label1.Text = "Page refreshed at " +
DateTime.Now.ToString();
}
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
// Introducing delay for demonstration.
System.Threading.Thread.Sleep(3000);
Label1.Text = "Page refreshed with DDL at " +
DateTime.Now.ToString();
}

I used code below in my projects and worked properly. I hope it helps you.
<asp:UpdatePanel ID="panelFatt" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:UpdateProgress ID="UpdateProgress1" runat="Server" DisplayAfter="1" AssociatedUpdatePanelID="panelFatt">
<ProgressTemplate>
<div style="position: absolute; text-align: center; height: 100%; width: 100%; top: 0; right: 0; left: 0; z-index: 9999999; background-color: #000000; opacity: 0.7;">
<image src="http://i.stack.imgur.com/FhHRx.gif" alternatetext="Loading ..." tooltip="Loading ..." style="padding: 10px; position: absolute; top: 45%; left: 50%;" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
</asp:UpdatePanel>

From the Code you provided , everything seems fine but you have missed to add the AsyncPostback trigger in your <asp:updatepanel></asp:updatepanel> : for your case , this can be added:
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlStatoFatt"
EventName="SelectedIndexChanged" />
</Triggers>
I have added only on dropdown , to check whether its working or not , if it goes well then you can change the controlID with your updatepannelId.
Another thing you missed in your code is that you need to see the UpdateMode="Conditional" in your update panel

If you need to show it for fullpostbacks you can use a simple javascript function. Taken from, https://forums.asp.net/t/1101546.aspx?Update+Progress+show+on+Ajax+Full+Postback+Trigger
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="upTest">
<ProgressTemplate>
Updating!
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="upTest" ChildrenAsTriggers="False" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:Button ID="btnFullPost" Text="Full Post" runat="server" OnClick="btnFullPost_Click" OnClientClick="ShowProgress();"/>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnFullPost" />
</Triggers>
</asp:UpdatePanel>
<script type="text/javascript">
function ShowProgress()
{
document.getElementById('<% Response.Write(UpdateProgress1.ClientID); %>').style.display = "inline";
}
</script>

Accessing bootstrap Modal Controls from CodeBehind c# web forms

I am using bootstrap data-id to populate the controls in modal bootstrap.
After this action, once user makes changes to the input values, on button click I want to access those values in c# Code behind and submit those values to database.
http://www.aspsnippets.com/demos/267/
The link show to use hidden field,
Here is my code so far
<asp:HiddenField ID="hdnField" runat="server" Value="" />
<a href="#" data-target="#my_modal" data-toggle="modal" class="myModalDialog"
data-id="First Name" data-name="My Name">Open Modal</a>
<div class="modal fade hmodal-info" id="my_modal" tabindex="4000" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="color-line">
</div>
<div class="modal-header text-center">
<h4 class="modal-title">
Edit Details</h4>
<small class="font-bold"> Name Goes here.</small>
</div>
<div class="modal-body">
<p>
some content</p>
<input type="text" name="bookId" id="bookId" value="" />
<input type="text" name="bookName" id="bookName" value="" />
<asp:TextBox ID="txtVendorId" runat="server"></asp:TextBox>
</div>
<div class="modal-footer">
<asp:Button ID="btnCallServer" runat="server" Text="Submit" />
<asp:Label ID="Label1" runat="server" Text="Click here to submit" class="btn btn-success" ></asp:Label>
<asp:HiddenField ID="HiddenField1" runat="server" Value="" />
</div>
</div>
</div>
</div>
$(document).ready(function () {
$(document).on("click", ".myModalDialog", function () {
var myBookId = $(this).data('id');
alert($(this).data('name'));
$(".modal-body #bookId").val(myBookId);
var myBookName = $(this).data('name');
$(".modal-body #bookName").val(myBookName);
$('[id$=txtVendorId]').val(myBookName);
});//href click
$('#<% =Label1.ClientID %>').click(function (e) {
var txt = "";
txt = $('#<% =txtVendorId.ClientID %>').val();
$("#<%=btnSubmit.ClientID%>").click();
});
});//documnet ready
<div class="modal fade hmodal-info" id="my_modal" tabindex="4000" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="color-line">
</div>
<div class="modal-header text-center">
<h4 class="modal-title">
Edit Details</h4>
<small class="font-bold"> Name Goes here.</small>
</div>
<div class="modal-body">
<p>
some content</p>
<input type="text" name="bookId" id="bookId" value="" />
<input type="text" name="bookName" id="bookName" value="" />
<asp:TextBox ID="txtVendorId" runat="server"></asp:TextBox>
</div>
<div class="modal-footer">
<asp:Button ID="btnCallServer" runat="server" Text="Submit" />
<asp:Label ID="Label1" runat="server" Text="Click here to submit" class="btn btn-success" ></asp:Label>
<asp:HiddenField ID="HiddenField1" runat="server" Value="" />
</div>
</div>
</div>
</div>

Bootstrap modal's button ASP.NET C#

I have a problem with my site
I have this modal:
<div class="modal fade " id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content login-modal">
<div class="modal-header login-modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title text-center" id="loginModalLabel">Autenticazione utente</h4>
</div>
<div class="modal-body">
<div class="text-center">
<div class="form-group">
<asp:Panel ID="pError" Visible="false" runat="server">
<div class="alert alert-dismissable alert-danger" id="confirm" runat="server">
<asp:Label ID="lblError" runat="server"> </asp:Label>
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
</div>
</asp:Panel>
</div>
<div role="tabpanel" id="pnl" class="login-tab">
<!-- SCHEDE -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a id="signin-taba" href="#home" aria-controls="home" role="tab" data-toggle="tab">Accedi</a></li>
<li role="presentation"><a id="signup-taba" href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Registrati</a></li>
<li role="presentation"><a id="forgetpass-taba" href="#forget_password" aria-controls="forget_password" role="tab" data-toggle="tab">Recupero</a></li>
</ul>
<!-- LOGIN -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active text-center" id="home">
<div class="clearfix"></div>
<%-- email --%>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-at"></i></div>
<asp:TextBox ID="txtLoginEmail" CssClass="form-control" placeholder="Email" runat="server"></asp:TextBox>
</div>
<asp:RequiredFieldValidator ID="vLoginEmail" runat="server" Display="dynamic" ControlToValidate="txtLoginEmail" ForeColor="Red" ValidationGroup="validator" ErrorMessage="*Email obbligatoria"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="reLoginEmail" runat="server" ValidationGroup="validator" ControlToValidate="txtLoginEmail" Display="Dynamic" ForeColor="red" ErrorMessage="Inserire l'email nel formato corretto" SetFocusOnError="True" ValidationExpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-lock"></i></div>
<asp:TextBox type="password" ID="txtLoginPassword" class="form-control" placeholder="Password" runat="server"></asp:TextBox>
</div>
</div>
<asp:Button ID="btnLogin" OnClick="btnLogin_Click" CssClass="btn btn-danger" data-loading-text="Signing In...." ValidationGroup="validator" runat="server" Text="Accedi"></asp:Button>
<input id="resetLogin" class="btn btn-danger" runat="server" type="reset" value="reset" />
<div class="clearfix"></div>
<div class="login-modal-footer">
<div class="row">
<div class="col-xs-8 col-sm-8 col-md-8">
<i class="fa fa-lock"></i>
Recupero
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
<i class="fa fa-check"></i>
Registrati
</div>
</div>
</div>
</div>
<%-- REGISTRAZIONE --%>
<div role="tabpanel" class="tab-pane" id="profile">
<div class="clearfix"></div>
<div class="form-group">
<div class="input-group">
<label class="radio-inline">
<asp:RadioButton ID="rbUtente" GroupName="rbTipologia" Checked="true" runat="server" />Utente</label>
<label class="radio-inline">
<asp:RadioButton ID="rbRistoratore" GroupName="rbTipologia" runat="server" />Ristoratore</label>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-user"></i></div>
<%-- username --%>
<asp:TextBox class="form-control" ID="txtNome" placeholder="Nome" runat="server"></asp:TextBox>
</div>
<asp:RequiredFieldValidator ID="vtxtNome" runat="server" Display="dynamic" ControlToValidate="txtNome" ForeColor="Red" ValidationGroup="validator2" ErrorMessage="*Nome obbligatorio"></asp:RequiredFieldValidator>
</div>
<%-- cognome --%>
<div class="form-group ">
<div class="input-group ">
<div class="input-group-addon"><i class="fa fa-user"></i></div>
<asp:TextBox class="form-control" ID="txtCognome" placeholder="Cognome" runat="server"></asp:TextBox>
</div>
<asp:RequiredFieldValidator ID="vCognome" runat="server" Display="dynamic" ControlToValidate="txtCognome" ForeColor="Red" ValidationGroup="validator2" ErrorMessage="*Cognome obbligatorio"></asp:RequiredFieldValidator>
</div>
<%-- email --%>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-at"></i></div>
<asp:TextBox class="form-control" ID="txtEmail" placeholder="Email" runat="server"></asp:TextBox>
</div>
<asp:RequiredFieldValidator ID="vEmail" runat="server" Display="dynamic" ControlToValidate="txtEmail" ForeColor="Red" ValidationGroup="validator2" ErrorMessage="*Email obbligatoria"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="reEmail" runat="server" ValidationGroup="validator2" ControlToValidate="txtEmail" Display="Dynamic" ForeColor="red" ErrorMessage="Inserire l'email nel formato corretto" SetFocusOnError="True" ValidationExpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>
</div>
<%-- password --%>
<div class="form-group ">
<div class="input-group ">
<div class="input-group-addon"><i class="fa fa-lock"></i></div>
<asp:TextBox type="password" class="form-control" ID="txtPassword" placeholder="Password" runat="server"></asp:TextBox>
</div>
<asp:RequiredFieldValidator ID="vPassword" runat="server" Display="dynamic" ControlToValidate="txtPassword" ForeColor="Red" ValidationGroup="validator2" ErrorMessage="*Password obbligatoria"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="rePassword" runat="server" ValidationGroup="validator2" ControlToValidate="txtPassword" Display="Dynamic" ForeColor="red" ErrorMessage="La password deve contenere: minimo 8 caratteri; almeno 1 maiuscola; almeno 1 minuscola; almeno 1 numero" SetFocusOnError="True" ValidationExpression="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,15}$"></asp:RegularExpressionValidator>
</div>
<%-- password controllo --%>
<div class="form-group ">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-lock"></i></div>
<asp:TextBox type="password" class="form-control" ID="txtCPassword" placeholder="Conferma password" runat="server"></asp:TextBox>
</div>
<asp:CompareValidator ID="cvPassword" ValidationGroup="validator2" Display="Dynamic" runat="server" ForeColor="Red" ControlToCompare="txtPassword" ControlToValidate="txtCPassword" ErrorMessage="La password non corrisponde"></asp:CompareValidator>
<asp:Label ID="lblRegistrazione" Visible="false" runat="server" ></asp:Label>
</div>
<asp:Button ID="btnSignin" CssClass="btn btn-danger " data-loading-text="Registrando...." OnClick="btnSignin_Click" ValidationGroup="validator2" runat="server" Text="Registrati"></asp:Button>
<input id="r2" class="btn btn-danger" runat="server" type="reset" value="reset" />
<div class="clearfix"></div>
<div class="login-modal-footer">
<div class="row">
<div class="col-xs-8 col-sm-8 col-md-8">
<i class="fa fa-lock"></i>
Password dimenticata?
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
<i class="fa fa-check"></i>
Registrati
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane text-center" id="forget_password">
<div class="clearfix"></div>
<%--RECUPERO --%>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-at"></i></div>
<asp:TextBox class="form-control" ID="txtRecEmail" placeholder="Email" runat="server"></asp:TextBox>
</div>
<asp:Label ID="lblRecovery" runat="server" ></asp:Label>
<asp:RequiredFieldValidator ID="vREmail" runat="server" Display="dynamic" ControlToValidate="txtRecEmail" ForeColor="Red" ValidationGroup="validator3" ErrorMessage="*Email obbligatoria"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="reREmail" runat="server" ValidationGroup="validator3" ControlToValidate="txtRecEmail" Display="Dynamic" ForeColor="red" ErrorMessage="Inserire l'email nel formato corretto" SetFocusOnError="True" ValidationExpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>
</div>
<asp:Button ID="btnRecovery" OnClick="btnRecovery_Click" CssClass="btn btn-danger reco" data-loading-text="Invio...." ValidationGroup="validator3" runat="server"></asp:Button>
<div class="clearfix"></div>
<div class="login-modal-footer">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<i class="fa fa-lock"></i>
Registrazione
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<i class="fa fa-check"></i>
Accesso
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
It has 3 tabs: Signin (LOGIN), Signup (Registrazione) and forgot password (RECUPERO).
It is a bit 'difficult to explain but I'll try:
In the 3 cards I have 3 buttons.
If I am in my third card and I press enter key, the computer triggers the onclick event of the button that is located on the first tab.
I tried this jquery code but it doesn't work:
$(document).keypress(function (event) {
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == '13') {
if ($('#home').is(":visible")) {
$("#btnLogin").trigger("click");
}
else if ($('#profile').is(":visible")) {
$("#btnSignin").trigger("click");
}
else {
$('#btnRecovery').click(ShowPopUp);
}
}
}
);
Do you have any solution?
P.S.
If I use the browser's console the javascript code work, but when i try it on my project it doesn't work...
Please help me... this is my exam's project...

Create a local variable(in the jQuery load function) called currentTab
Create a click event for your tabs(<li> tags)
In the click event set the currentTab variable to the clicked <li>
Modify your keypress function to evaluate the currentTab variable and trigger the relevant click event
<script type="text/javascript">
$(function () {
$("#show").click(function () {
jQuery.noConflict();
$("#loginModal").modal('show');
});
var currentTab = "";
$(".nav li").click(function () {
var li = $(this);
var liText = li.text();
currentTab = liText;
alert('You clicked on "' + liText + '" now lets store this value in a variable called currentTab');
});
$(document).keydown(function (event) {
debugger;
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == '13') {
switch (currentTab) {
case "Accedi":
$("#btnLogin").trigger("click");
break;
case "Registrati":
$("#btnSignin").trigger("click");
break;
case "Recupero":
$("#btnRecovery").trigger("click");
break;
}
}
});
});
</script>

Develop Reference

C# (C-Sharp) is a programming language developed by Microsoft that runs on the .NET Framework.

Auto complete function not working properly jquery - c#

Related

Unable to trigger onchange event from select tag in ASP.Net

How to add RequiredFieldValidator on a Ajax Editor C#

UpdateProgress not firing on every PostBack of controls inside UpdatePanel

Accessing bootstrap Modal Controls from CodeBehind c# web forms

Bootstrap modal's button ASP.NET C#

Categories

Resources