Textbox and Button suddenly disappear from webpage after scrollbar added - c#

Hi I was trying to create a scrollbar for the chat page for the site I'm building, and ever since I added the scrollbar in (overflow), after about 5 seconds (about when the AJAX is triggered), the textbox and button that are right under the field used for displaying messages disappear, namely the MessageTextBox and SendButton.
Here is the code for my html page:
<form id="form1" runat="server">
<div class="row">
<div class="well center" style="width:50%">
<a>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Timer ID="Timer1" runat="server">
</asp:Timer>
</a>
<asp:UpdatePanel runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="tim" EventName="Tick" />
</Triggers>
<ContentTemplate>
<asp:Timer ID="tim" Interval="5000" Enabled="true" OnTick="UpdateChat" runat="server"></asp:Timer>
<div style="overflow: auto; height: 220px; width: 100%;">
<center>
<asp:Textbox ID="ChatLabel" textmode="MultiLine" style="overflow:auto;width:80%;height:200px" ReadOnly="true" runat="server"></asp:Textbox>
</center>
</ContentTemplate>
</asp:UpdatePanel>
<asp:TextBox ID="MessageTextBox" runat="server" Width="438px"></asp:TextBox>
<asp:Button ID="SendButton" runat="server" Text="Send"/>
</div>
</div>
</form>

Related

Update Progress not working for Upload Button inside Update Panel

I have a functionality where I am uploading an excel file and downloading its format to again Upload the data.
So for that I am using Update Progress for loading in between
My Update progress is working fine for Download Format button, but it is not working for Button Upload
Below is my aspx code:-
<asp:UpdatePanel ID="uptc" runat="server" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:TabContainer ID="TbTabValue" runat="server" ActiveTabIndex="0" AutoPostBack="true" OnActiveTabChanged="tc_ActiveTabChanged">
<asp:TabPanel ID="tpEnterprise"
HeaderText="Enterprise"
runat="server"
ActiveTabIndex="1"
OnDemand="true"
AutoPostBack="false"
TabStripPlacement="Top"
CssClass="ajax__tab_xp"
ScrollBars="None"
UseVerticalStripPlacement="true"
VerticalStripWidth="120px"
TabIndex="1">
<ContentTemplate>
<asp:UpdateProgress ID="UpdateProgress" runat="server" DynamicLayout="False" AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="0">
<ProgressTemplate>
<div class="loadingModal">
<div class="center">
<img alt="" src="../Images/loading.gif" />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="row">
<div class="col-sm-4">
<label>Select Category</label>
<asp:DropDownList ID="ddlEnterpriseCategory" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlEnterpriseCategory_SelectedIndexChanged"></asp:DropDownList>
<asp:Button runat="server" ID="btnDownloadEnterpriceExcel" Text="Download Format" Class="btn btn-default" OnClick="downloadEnterpriceExcel_Click" />
</div>
<div class="col-sm-8">
<label>Upload File</label>
<asp:FileUpload ID="EnterpriseFileuploader" runat="server" />
<br />
<asp:Button ID="btnUpload" runat="server" Text="Upload"
OnClick="btnUpload_Click" Class="btn btn-default" />
</div>
</div>
<br />
<div class="row">
<div class="col-sm-12">
<asp:Panel runat="server" ID="gvInputDataPanel">
<asp:GridView ID="gvInputData" runat="server" CssClass="table table-bordered" AllowPaging="True" OnPageIndexChanging="gvInputData_PageIndexChanging" EmptyDataText="No data found."
ShowHeaderWhenEmpty="True">
</asp:GridView>
</asp:Panel>
</div>
</div>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnDownloadEnterpriceExcel" />
<asp:PostBackTrigger ControlID="btnUpload" />
</Triggers>
</asp:UpdatePanel>
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel ID="tpUBR" ClientIDMode="Static" HeaderText="UBR" runat="server" TabIndex="2">
<ContentTemplate>
2
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
</ContentTemplate>
</asp:UpdatePanel>

Update panel refreshing the entire page instead of just partial

I did what i normally do whenever i want a partial refresh of a page, but in this case it doesnt work out. There maybe an excessive usage of update panels but it should still work.... Can anyone tell me why?
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div style="width: 15%; float: left;">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Img/Untitled1.png" CssClass="imagez" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<div style="width: 85%; float: left; height: 100%; padding-top: 2%;">
<asp:Label ID="Label2" runat="server" Text="CPU" CssClass="auto-style7" Font-Names="sans-serif"></asp:Label>
<br />
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" CssClass="bla" Font-Names="sans-serif" AppendDataBoundItems="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
<asp:ListItem Selected="True">Pick a CPU</asp:ListItem>
<asp:ListItem Text="a" Value="a"></asp:ListItem>
</asp:DropDownList>
<strong>
<asp:Label ID="Label3" runat="server" Text="$" CssClass="auto-style8" Font-Names="sans-serif"></asp:Label>
<asp:Label ID="Label4" runat="server" Text="0.00" CssClass="auto-style8" Font-Names="sans-serif"></asp:Label>
</strong>
</div>
</ContentTemplate>
</asp:UpdatePanel>

Ajaxtoolkit ConfirmButtonExtender cannot fire

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<ContentTemplate>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click"
Text="Button" PostBackUrl="~/testing2.aspx" />
<asp:ConfirmButtonExtender ID="ConfirmButtonExtender1" runat="server"
targetControlID="Button1"
ConfirmText="Are you sure you want to click this button"
ConfirmOnFormSubmit="True" />
<asp:TextBox ID="TextBox1" runat="server" Height="25px"></asp:TextBox>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
My ConfirmButtonExtender just not working. The website do not pop up a box for me. Do I miss somethings? My code is above.
I think you are missing OnClientCancel property. Check out the working example below.
Ensure your page is using proper master page. This is a working code.
asp:Content ContentPlaceHolderID="SampleContent" Runat="Server">
<script type='text/javascript'>
function cancelClick() {
var label = $get('ctl00_SampleContent_Label1');
label.innerHTML = 'You hit cancel in the Confirm dialog on ' + (new Date()).localeFormat("T") + '.';
}
</script>
<ajaxToolkit:ToolkitScriptManager runat="Server" EnablePartialRendering="true" ID="ScriptManager1" />
<div class="demoarea">
<div class="demoheading">ConfirmButton Demonstration</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:LinkButton ID="LinkButton" runat="server" OnClick="Button_Click">Click Me</asp:LinkButton>
<ajaxToolkit:ConfirmButtonExtender ID="ConfirmButtonExtender1" runat="server"
TargetControlID="LinkButton"
ConfirmText="Are you sure you want to click the LinkButton?"
OnClientCancel="cancelClick" />
<br />
<br />
<asp:Button ID="Button" runat="server" Text="Click Me" OnClick="Button_Click" /><br />
<ajaxToolkit:ConfirmButtonExtender ID="ConfirmButtonExtender2" runat="server"
TargetControlID="Button"
OnClientCancel="cancelClick"
DisplayModalPopupID="ModalPopupExtender1" />
<br />
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button" PopupControlID="PNL" OkControlID="ButtonOk" CancelControlID="ButtonCancel" BackgroundCssClass="modalBackground" />
<asp:Panel ID="PNL" runat="server" style="display:none; width:200px; background-color:White; border-width:2px; border-color:Black; border-style:solid; padding:20px;">
Are you sure you want to click the Button?
<br /><br />
<div style="text-align:right;">
<asp:Button ID="ButtonOk" runat="server" Text="OK" />
<asp:Button ID="ButtonCancel" runat="server" Text="Cancel" />
</div>
</asp:Panel>
<asp:Label ID="Label1" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Content>

JavaScript not loading after partial update in ASP.Net

I have a problem with Javascript not load in asp.net when an updatepanel postback to the server and the problem is that javascript code is not in the same page where the updatepanel is so I can put it in pageLoad() function it is like this:
<script src="js/keyboard.js" type="text/javascript"></script>
and i use ASP.Net 4 and c# and this is my code code:
<link href="css/keyboard.css" rel="stylesheet" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div style="text-align: left; padding-right: 140px">
<dx:aspxcombobox id="comboBoxLangauge" clientinstancename="comboboxLang"
cssclass="combo" runat="server" width="140px" clientidmode="Static">
<Items>
<dx:ListEditItem Text="English to Kurdish" Value="1" Selected="true" />
<dx:ListEditItem Text="Kurdish to English" Value="2" />
</Items>
<ClientSideEvents SelectedIndexChanged="IndexChanged" />
</dx:aspxcombobox>
</div>
<br />
<br />
<asp:Button ID="btnTranslate" runat="server" Text="Search" ClientIDMode="Static"
CssClass="Search" OnClick="btnTranslate_Click" />
<asp:TextBox ID="txtBoxWord" runat="server" ClientIDMode="Static"
class="keyboardInput Search" Style="width: 260px; direction: ltr"></asp:TextBox>
<asp:AutoCompleteExtender ID="autocom" ClientIDMode="Static" runat="server" CompletionSetCount="10"
EnableCaching="true" MinimumPrefixLength="1" TargetControlID="txtBoxWord" ServicePath="~/translator/AutoComplete.asmx" ServiceMethod="GetCompletionList">
</asp:AutoCompleteExtender>
<asp:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" TargetControlID="OutPanel"
Corners="All" Radius="5" BorderColor="Silver">
</asp:RoundedCornersExtender>
<br />
<br />
<div id="OutPanel" runat="server" clientidmode="Static" style="width: 440px; height: 200px; overflow: auto; margin-left: auto; margin-right: auto; padding-top: 10px;" visible="false">
</div>
</ContentTemplate>
</asp:UpdatePanel>
<div id="OutPanel" runat="server" clientidmode="Static" style="width:440px;height:200px;overflow:auto;margin-left:auto;margin-right:auto;padding-top:10px;" visible="false">
</div>
</ContentTemplate>
</asp:UpdatePanel>
"The problem is that javascript code is not in the same page where the updatepanel is"
Whereas make sure your JavaScript is available on the page with UpdatePanel to load it properly.

Combobox selected item is deleted once selected . Invalid Postback or Callback argument

I have four textboxes one combobox and one button ( and some other controls) in my page . Based on the values typed in the textboxes the related values are updated in the combobox. On clicking the submit button in my page It was giving the following error .
"Invalid postback or callback argument. Event validation is enabled using in configuration or in a page. For Secuity purposes,this feature verifies that arguments to postback or callback events originate from the server control that originally rendered them. If the data is valid and expected . Use the ClientScriptManager.RegisterForEventsValidation method in order to register the postback or callback data for validation."
Now in the page directive I added
<%#Page EnableEentValidation="false">
When I type the values in the four textboxes the corresponding value will appear in the cobobox . But when I select that combobox value, the selected value wil be deleted . What is the reason for this ?
<%# Page Language="C#" MasterPageFile="~/Main.Master" AutoEventWireup="true" CodeBehind="AddeChecklist.aspx.cs"
Inherits="LabTrack.WebApplication.Echecklist.AddeChecklist" EnableEventValidation ="false" %>
<%# Register TagPrefix="Labinal" TagName="AutoCompleteControl" Src="~/UserControls/AutoCompleteEnabledWebUserControl.ascx" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<link href="../Styles/CheckListRev.css" rel="stylesheet" type="text/css" />
<!-- Style for the page -->
<link href="../Styles/AddeChecklist.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server">
</asp:ScriptManager>
<asp:Panel ID="ErrorMessagePanel" CssClass="ErrorPanel" Visible="true" runat="server">
<div class="ErrorDiv">
<asp:BulletedList CssClass="ErrorMessage" ID="ErrorMessageBulletedList" runat="server">
</asp:BulletedList>
</div>
</asp:Panel>
<div class="PageTitle">
<asp:Label ID="PageHeaderLabel" runat="server"></asp:Label>
</div>
<div class="MainDiv">
<div style="text-align: center;">
<div class="PlaceHolder">
<table id="formTable">
<tr>
<td>
<asp:UpdatePanel runat="server" ID="updatepanelCustomer" UpdateMode="Conditional">
<ContentTemplate>
<span class="boldLabelLong">Customer:</span><br />
<asp:TextBox ID="CustomerNameTextBox" Width="200" runat="server"></asp:TextBox>
<asp:HiddenField ID="IxCustomerHiddenField" runat="server" />
<asp:Button ID="customerTriggerbutton" runat="server" Text="Button" Style="display: none;" />
</ContentTemplate>
</asp:UpdatePanel>
</td>
<td>
<asp:UpdatePanel runat="server" ID="updatepanelProgram" UpdateMode="Conditional">
<ContentTemplate>
<span class="boldLabelLong">Program:</span><br />
<asp:TextBox ID="ProgramNameTextBox" Width="200" runat="server"></asp:TextBox>
<asp:Button ID="programTriggerbutton" runat="server" Text="Button" Style="display: none;" />
<asp:HiddenField ID="IxProgramHiddenField" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="customerTriggerbutton" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</td>
<td>
<asp:UpdatePanel runat="server" ID="updatepanelWorkPackage" UpdateMode="Conditional">
<ContentTemplate>
<span class="boldLabelLong">WorkPackage:</span><br />
<asp:TextBox ID="WorkPackageNameTextBox" Width="200" runat="server"></asp:TextBox>
<asp:HiddenField ID="IxWorkPackageHiddenField" runat="server" />
<asp:Button ID="workPackageTriggerbutton" runat="server" Text="Button" Style="display: none;" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="programTriggerbutton" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</td>
<td>
<asp:UpdatePanel runat="server" ID="updatepanelActivity" UpdateMode="Conditional">
<ContentTemplate>
<span class="boldLabelLong">Activity:</span><br />
<asp:TextBox ID="ActivityNameTextBox" Width="200" runat="server"></asp:TextBox>
<asp:HiddenField ID="IxActivityHiddenField" runat="server" />
<asp:Button ID="activityTriggerbutton" runat="server" Text="Button" Style="display: none;" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="workPackageTriggerbutton" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="activityTriggerbutton" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
</table>
</div>
<div class="PlaceHolder">
<asp:Label ID="TemplateLabel" Text="Template:" CssClass="ControlLabel" runat="server"></asp:Label>
<asp:UpdatePanel runat="server" ID="updatepanelTemplate" UpdateMode="Conditional">
<ContentTemplate>
<asp:DropDownList ID="TemplateSelectDropDownList" runat="server" Width="400" Visible="true"
AutoPostBack="true">
</asp:DropDownList>
<asp:HiddenField ID="IxTemplateHiddenField" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="workPackageTriggerbutton" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:Panel ID="SustainPanelTemplateOwner" Visible="true" runat="server">
<div>
<asp:Label ID="TemplateOwnerLabel" Text="Owner:" CssClass="ControlLabel" runat="server"></asp:Label>
<asp:TextBox ID="TemplateOwnerTextBox" CssClass="controlMargin" Width="400" runat="server"></asp:TextBox>
</div>
</asp:Panel>
<asp:HiddenField ID="IxDeliverableHiddenField" runat="server" />
<asp:HiddenField ID="IxReleaseActionHiddenField" runat="server" />
<asp:HiddenField ID="IxConfigHiddenField" runat="server" />
<asp:HiddenField ID="IxTemplateOwnerHiddenField" runat="server" />
<asp:HiddenField ID="TemplateSelectedSnameHiddenField" runat="server" />
<asp:HiddenField ID="TemplateOwnerSelectedsNameHiddenField" runat="server" />
<asp:HiddenField ID="DeliverableSelectedHiddenField" runat="server" />
<div>
<asp:Label ID="DeliverableLabel" CssClass="ControlLabel" runat="server" Text="Deliverable:"></asp:Label>
<asp:TextBox ID="DeliverableTextBox" CssClass="controlMargin" Width="400" runat="server"></asp:TextBox>
</div>
<asp:Panel ID="SustainPanelConfig" Visible="true" runat="server">
<div>
<asp:Label ID="ConfigurationLabel" runat="server" Text="Configuration:" CssClass="ControlLabel"></asp:Label>
<select id="ConfigurationSelect" class="controlMargin">
<option></option>
</select>
</div>
</asp:Panel>
<asp:Panel ID="SustainPanelRelease" Visible="true" runat="server">
<div>
<asp:Label ID="ReleaseActionLabel" CssClass="ControlLabel" runat="server" Text="Release Action:"></asp:Label>
<asp:TextBox ID="ReleaseActionTextBox" CssClass="controlMargin" Width="400" runat="server"></asp:TextBox>
</div>
</asp:Panel>
<asp:Panel ID="SustainPanel" Visible="true" runat="server">
<div class="SustainPanelControls">
<div>
<asp:Label ID="ChangeLabel" Text="Change #: " runat="server"></asp:Label>
</div>
<div>
<asp:TextBox ID="ChangeTextBox" Width="110" runat="server"></asp:TextBox>
</div>
<div>
<asp:Label ID="SupplementLabel" Text="Supplement: " runat="server"></asp:Label>
</div>
<div>
<asp:TextBox ID="SupplementTextBox" Width="80" runat="server"></asp:TextBox>
</div>
<div>
<asp:Label ID="NewWrrLabel" Text="WRR #: " runat="server"></asp:Label>
</div>
<div>
<asp:TextBox ID="NewWrrTextBox" Width="80" runat="server"></asp:TextBox>
</div>
<div>
<asp:Label ID="DddLabel" Text="3D: " runat="server"></asp:Label>
</div>
<div>
<asp:TextBox ID="DddTextBox" Width="80" runat="server"></asp:TextBox>
</div>
</div>
<div>
<table id="DesignDataTable2">
<tr>
<td>
<asp:Label ID="AllFbSheetsWrrLabel" Text="All F/B Sheets w/WRR #:" CssClass="ControlLabel" runat="server"></asp:Label>
</td>
<td>
<asp:TextBox CssClass="completeControl" ID="AllFbSheetsWrrTextBox" Width="588" Rows="2"
TextMode="MultiLine" runat="server"></asp:TextBox>
</td>
</tr>
</table>
</div>
</asp:Panel>
</div>
<div class="EditButtonGroup">
<input id="EditButton" type="button" value="Edit" class="ButtonSettings" />
<input id="RemoveButton" type="button" value="-" class="ButtonSettings" />
<input id="AddButton" type="button" value="+" class="ButtonSettings" />
</div>
</div>
<div class="ViewData">
<div class="ViewDataDiv">
<table id="DesignDataTable" class="designDataTable">
<tbody>
</tbody>
</table>
</div>
</div>
<div class="submitButtonDiv">
<asp:Button ID="SubmitButton" runat="server" Text="Button Text" class="submitButtonCreateChecklist" />
</div>
</div>
</asp:Content>
You are creating new values on the client side, and posting them back to the server.
For security reasons ASP.NET implements "event validation". When even validation is enabled, if the server creates a combo with 3 possible values, it will only accept this values on postback. If you create a different value and send it back to the server, you get the error you're referring to.
Here you have some info:
Page.EnableEventValidation Property
You can use ClientScriptManager.RegisterForEventValidation Method if you know which are the possible values generated on the client side, or disable validation completely if you don't know them in advance.
To disable validation:
You set the EnableEventValidation property by setting the enableEventValidation attribute of the # Page directive or the enableEventValidation attribute of the pages element in the Web.config file. If you set this property in code, you must set it before the page is initialized.
Sounds like an issue with Viewstate overriding the values.
Try fetching the value directly using Request.Form[Dropdown.ClientId]

Categories

Resources