Develop Reference

Auto complete function not working properly jquery

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>

The second Modal in my ASPX file doesn't Post when clicking submit button

I have an ASPX file that contains two modals (myModal and addModal) and a gridview that has buttons calling each of these. I am having trouble with the second modal when opening and clicking its Submit button as it won't fire a PostBack. Its only a problem with the second one. If I change the sequence of these Modals within the ASPX file, then I again have trouble only with the second one in the file.
Is there something additional needed when having two modals in the same ASPX page to get it to fire a PostBack?
Here are the ASPX and C# files:
C# file:
protected void Page_Load(object sender, EventArgs e)
{
try{
if (IsPostBack)
{
Control control = null;
string controlName = Request.Params["__EVENTTARGET"];
if (!String.IsNullOrEmpty(controlName))
{
control = FindControl(controlName);
GridViewRow gvRow1 = (GridViewRow)control.Parent.Parent;
string controlID = control.ID.ToString();
}
}
if(!IsPostBack)
{
DataGrid_Load(DAL.reg(HeadText.Text, OrgText.Text), "reg");
ErrorText.Text = "NO POSTBACK";
}
}
catch{}
}
ASPX file:
<div id="myModal" class="modal fade">
<script type="text/javascript">
function openModal() {
$('[id*=myModal]').modal('show');
}
</script>
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title">Update Data</h2>
</div>
<div class="modal-body">
<form class="form-inline" role="form" method="POST" action="" >
<div class="control-group">
<div class="controls controls-row">
<label for="lblnameid" class="col-sm-2 control-label">Name</label>
<div class="col-sm-6">
<asp:TextBox ID="lblnameid" runat="server" Text="" CssClass="form-control" ></asp:TextBox>
</div>
<label for="rankid" class="col-sm-1 control-label">Rank</label>
<div class="col-sm-3">
<asp:DropDownList id="rankid" runat="server" CssClass="form-control"
SelectedValue='<%# Eval("rank") %>' TabIndex='<%# TabIndex %>'>
<asp:ListItem Value=""> </asp:ListItem>
<asp:ListItem Value="a"> A </asp:ListItem>
<asp:ListItem Value="b"> B </asp:ListItem>
<asp:ListItem Value="c"> C </asp:ListItem>
</asp:DropDownList>
</div>
</div>
</div>
<p> </p>
<div class="control-group">
<div class="col-sm-10">
<asp:TextBox ID="id" type="hidden" runat="server" Text="" CssClass="form-control" ></asp:TextBox>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="pull-right">
<button type="submit" class="btn btn-default">Cancel</button>
<!-- <button type="submit" class="btn btn-primary">Save</button> -->
<asp:Button ID="btnUpdate" OnClientClick="<% %>" class="btn btn-default" runat="server" Text="Save" CommandArgument='<%# Eval("Id") %>' OnCommand="btnUpdate_Click" />
</div>
</div>
</div>
</form>
</div><!-- /.modal-body -->
<form role="form" action="">
<div class="modal-footer">
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div id="addModal" class="modal fade" tabindex="-1" method="POST" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<script type="text/javascript">
$('#addModal').on('hidden.bs.modal', function () {
$(this).find('form').trigger('reset');
})
</script>
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<form class="form-horizontal" role="form">
<fieldset>
<div class="form-group">
<label class="col-sm-2 control-label" for="textinput">Name</label>
<div class="col-sm-6">
<input type="text" id="lblnameid" class="form-control">
</div>
</div>
</fieldset>
<div class="modal-footer">
<asp:Button ID="btnSubmit" OnClientClick="<% %>" class="btn btn-primary" runat="server" Text="Save" CommandArgument='<%# Eval("Id") %>' OnCommand="btnSubmit_Click" />
</div>
</form>
</div>
</div>
</div> <!-- /.modal-body -->
</div> <!-- /.modal-content -->
</div> <!-- /.modal-dialog -->

The problem was I had 3 sets of form tags in my page. One for the overall page and one each for the two Bootstrap Modals I had that opened up from button clicks. The solution came when I removed the form tags from the bootstrap modals. Then all button clicks from the modals worked properly and submitted the data.

How can I use my currentDate variable to set the arrival date in the asp.net textbox control?

<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Request.aspx.cs" Inherits="XEx06Reservation.Request" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Chapter 6: Reservations</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/site.css" rel="stylesheet" />
<style type="text/css">
.auto-style1 {
display: block;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.auto-style2 {
left: 0px;
top: 0px;
width: 1112px;
height: 64px;
}
</style>
</head>
<body>
<div class="container">
<header class="jumbotron">
<img src="Images/logo.png" alt="Royal Inns and Suites" />
</header>
<main>
<form id="form1" runat="server" class="form-horizontal">
<h1>Reservation Request</h1>
<h3>Request data</h3>
<div class="form-group">
<label class="col-sm-3 control-label">Arrival Date</label>
<div class="col-sm-4">
<asp:TextBox ID="txtArrivalDate" runat="server" CssClass="form-control" TextMode="Date"
Height="39px" Width="186px"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Departure Date</label>
<div class="col-sm-4">
<!-- text box -->
<asp:TextBox ID="TextBox1" runat="server" CssClass="form-control" TextMode="Date" Height="39px" Width="186px"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Number of people</label>
<div class="col-sm-4">
<!-- drop-down -->
<asp:DropDownList ID="DropDownList3" runat="server" Height="39px" Width="186px">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
</asp:DropDownList>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Bed type</label>
<div class="auto-style2">
<!-- radio buttons -->
<asp:RadioButton ID="RadioButton1" runat="server" Text="King" Selected="True" />
<asp:RadioButton ID="RadioButton2" runat="server" Text="Two Queens"/>
<asp:RadioButton ID="RadioButton3" runat="server" Text="One Queen"/>
</div>
</div>
<h3>Special requests</h3>
<div class="form-group">
<div class="col-sm-7">
<!-- multiline text box -->
<asp:TextBox ID="TextBox2" runat="server" CssClass="form-control" TextMode="MultiLine" Rows="4" Width="334px" ></asp:TextBox>
</div>
</div>
<h3>Contact information</h3>
<div class="form-group">
<label class="col-sm-3 control-label">First Name</label>
<div class="col-sm-4">
<asp:TextBox ID="txtFirstName" runat="server" CssClass="auto-style1" Width="153px" Height="36px"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Last Name</label>
<div class="col-sm-4">
<!-- text box -->
<asp:TextBox ID="TextBox3" runat="server" CssClass="form-control" Width="158px"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Email address</label>
<div class="col-sm-4">
<!-- text box -->
<asp:TextBox ID="TextBox4" runat="server" CssClass="form-control" Width="159px" TextMode="Email"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Telephone number</label>
<div class="col-sm-4">
<!-- text box -->
<asp:TextBox ID="TextBox5" runat="server" CssClass="form-control" Width="155px" TextMode="Phone"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Preferred method</label>
<div class="col-sm-4">
<!-- drop down -->
<asp:DropDownList ID="DropDownList2" runat="server" CssClass="auto-style1" Width="155px">
<asp:ListItem>Email</asp:ListItem>
<asp:ListItem>Telephone</asp:ListItem>
</asp:DropDownList>
</div>
</div>
<%-- Submit and Clear buttons --%>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<asp:Button ID="btnSubmit" runat="server" Text="Submit"
CssClass="btn btn-primary" />
<asp:Button ID="btnClear" runat="server" Text="Clear"
CssClass="btn btn-primary" />
</div>
</div>
<%-- message label --%>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-11">
<asp:Label ID="lblMessage" runat="server" CssClass="text-info"></asp:Label>
</div>
</div>
</form>
</main>
<footer>
<p>© <asp:Label ID="lblYear" runat="server"></asp:Label>
Royal Inns and Suites</p>
</footer>
</div>
</body>
</html>
I am trying to figure out how can I use the currentDate variable to set an arrival date (like October 10, 2017 - 10/10/2017) in that control's box everytime the page loads. Here is my code that I have tried on my own, but everytime I test the page, nothing is automatically put into that control's textbox. Can someone help me? Any others sources other then this (https://www.quora.com/How-do-I-populate-date-automatically-in-a-text-box-in-asp-net)?
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace XEx06Reservation
{
public partial class Request : System.Web.UI.Page
{
private string currentDate = DateTime.Today.ToString("d");
private string currentYear = DateTime.Today.Year.ToString();
protected void Page_Load(object sender, EventArgs e)
{
txtArrivalDate.Text = currentDate;
}
}
}

I think this is what you are looking for:-
In Your .aspx page:-
<asp:Label ID="lblYear" runat="server"></asp:Label>
<asp:TextBox ID="txtArrivalDate" runat="server"></asp:TextBox>
In your .aspx.cs page:-
public partial class WebForm1 : System.Web.UI.Page
{
private static readonly DateTime currentDate = new DateTime(2017, 10, 10);
private string currentYear = DateTime.Today.Year.ToString();
protected void Page_Load(object sender, EventArgs e)
{
txtArrivalDate.Text = currentDate.ToString();
lblYear.Text = currentYear;
}
}

UpdateProgress not working on secound click

UpdateProgress works good on first button click . But when i click second time the UpdateProgress didn't appeared.Instead of UpdateProgress all things works good on second click. Please help me..
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSubmit" />
</Triggers>
<ContentTemplate>
<div class="form-group row">
<div class="col-sm-6">
<p style="margin: 0 0 5px 0;"><b>Class</b></p>
<asp:DropDownList ID="drpClass" CssClass="form-control" OnSelectedIndexChanged="drpClass_SelectedIndexChanged" AutoPostBack="true" runat="server"></asp:DropDownList>
</div>
<div class="col-sm-6">
<p style="margin: 0 0 5px 0;"><b>Division</b></p>
<asp:DropDownList ID="drpDiv" CssClass="form-control"
runat="server">
</asp:DropDownList>
</div>
</div>
<div class="form-group row">
<div class="col-sm-6">
<p style="margin: 0 0 5px 0;"><b>Date</b></p>
<asp:TextBox runat="server" ID="txtDateGiven" CssClass="form-control"
placeholder="Select a Date"></asp:TextBox>
<asp:CalendarExtender ID="CalendarExtender2" runat="server" Format="dd/MMM/yyyy" PopupButtonID="txtDateGiven"
TargetControlID="txtDateGiven">
</asp:CalendarExtender>
</div>
<div class="col-sm-6">
<p style="margin: 0 0 5px 0;"><b>Date of Submission</b></p>
<asp:TextBox runat="server" ID="txtDateSubmit" CssClass="form-control"
placeholder="Select a Date"></asp:TextBox>
<asp:CalendarExtender ID="CalendarExtender1" runat="server" Format="dd/MMM/yyyy" PopupButtonID="txtDateSubmit"
TargetControlID="txtDateSubmit">
</asp:CalendarExtender>
</div>
</div>
<div class="form-group row">
<div class="col-sm-12">
<p style="margin: 0 0 5px 0;"><b>Subject</b></p>
<asp:DropDownList ID="drpSubject" CssClass="form-control" runat="server"></asp:DropDownList>
</div>
</div>
<div class="form-group row">
<div class="col-sm-12">
<p style="margin: 0 0 5px 0;"><b>Type</b></p>
<asp:DropDownList ID="drpAssignmentType" CssClass="form-control" runat="server"></asp:DropDownList>
</div>
</div>
<div class="form-group row">
<div class="col-sm-12">
<p style="margin: 0 0 5px 0;"><b>Title</b></p>
<asp:TextBox ID="txtAssignmentTitle" CssClass="form-control" placeholder="Enter Title"
runat="server"></asp:TextBox>
</div>
</div>
<div class="form-group row">
<div class="col-sm-12">
<p style="margin: 0 0 5px 0;"><b>Description</b></p>
<asp:TextBox ID="txtAssignmentDes" CssClass="form-control" TextMode="MultiLine" Height="250"
placeholder="Enter Description"
runat="server"></asp:TextBox>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="updProgress"
AssociatedUpdatePanelID="UpdatePanel1"
runat="server">
<ProgressTemplate>
<div class="modal">
<div class="center">
<span style="padding-left: 10px"><b>Please Wait..</b></span>
<img alt="" src="../images/Preloader_3.gif" width="50" height="50" />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<div class="form-group row">
<div class="col-sm-6">
<p style="margin: 0 0 5px 0;"><b>Upload File</b></p>
<asp:FileUpload ID="imgPhoto" runat="server" />
<br />
<asp:Button ID="btnUpload" Text="Upload" runat="server" OnClick="Upload" Style="display: none" />
<% if (ViewState["Image"] != null)
{%>
<a target="_blank" href="<%=ViewState["ImageName"]%>">View Attachment</a>
<%}
else
{ %>
<asp:Label ID="Label1" runat="server" ForeColor="Red" Text="No File Uploaded"></asp:Label>
<%} %>
</div>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="form-group row">
<div class="col-sm-6">
<div class="col-sm-6">
<asp:Button ID="btnSubmit" OnClick="btnSubmit_Click"
OnClientClick="javascript:return btnSubmit();" CssClass="btn btn-primary"
runat="server" Text="Submit" />
Cancel
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
Code behind
updProgress.Visible = true;
SendEmail(Convert.ToInt32(drpDiv.Text));
updProgress.Visible = false;
txtAssignmentTitle.Text = "";
txtAssignmentDes.Text = "";
txtDateGiven.Text = "";
txtDateSubmit.Text = "";
ViewState["Image"] = null;
ViewState["ImageName"] = null;
drpAssignmentType.Items.Clear();
drpClass.Items.Clear();
drpDiv.Items.Clear();
drpSubject.Items.Clear();
drpSubject.Items.Insert(0, new ListItem("--Select--", "0"));
drpAssignmentType.Items.Insert(0, new ListItem("--Select--", "0"));
LoadClass();
LoadClassAndAssignmentType();
drpDiv.Items.Insert(0, new ListItem("--Select--", "0"));
i am using update panel to avoid page load .Also the UpdateProgress didn't appeared if i try to reload the page using response.redirect . Please help me ..

Page content disappear after timer ticks

I am using UpdatePanel control to update charts on my page after a certain time. I faced a problem that when the timer ticks, all charts disappear. I traced and found nothing error. Can anyone help me on this?
Here is a sample of the .aspx file
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager>
<asp:Timer ID="Timer1" runat="server" OnTick="Timer1_Tick" Interval="120000">
</asp:Timer>
<div class="row">
<div class="col-lg-4 col-md-4">
<asp:DropDownList ID="ddlDuration" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlDuration_SelectedIndexChanged" CssClass="form-control" Style="margin-left: 5px;">
<asp:ListItem Value="1">Today</asp:ListItem>
<asp:ListItem Value="3">A week ago</asp:ListItem>
<asp:ListItem Value="2">A month ago</asp:ListItem>
<asp:ListItem Value="4">A year ago</asp:ListItem>
</asp:DropDownList>
</div>
<div class="col-lg-8 col-md-8">
<div class="col-lg-1 col-md-1">
<label class="control-label">From Date:</label>
</div>
<div class="col-lg-3 col-md-3">
<asp:TextBox ID="txtDateFrom" runat="server" CssClass="form-control"></asp:TextBox>
</div>
<div class="col-lg-1 col-md-1">
<label class="control-label">To Date:</label>
</div>
<div class="col-lg-3 col-md-3">
<asp:TextBox ID="txtDateTo" runat="server" CssClass="form-control"></asp:TextBox>
</div>
<asp:Button ID="btnGetReport" runat="server" Text="Apply" CssClass="btn btn-success" Style="background-color: #8B0000; border: #8B0000;" OnClick="btGetReport_Click"></asp:Button>
<div class="row">
<asp:Label ID="dterror" runat="server" />
</div>
<hr />
<div id="chart">
<div class="row">
<div class="col-md-6">
<div class="panel panel-primary">
<div class="panel-body">
<div id="ComplaintsByStatus">
</div>
</div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
and here is part of the code behind
protected void Timer1_Tick(object sender, EventArgs e)
{
UpdateChart();
}
here is a screen shot of what I get before timer ticks
and this is what I get after
Thanks in advance.