I have this element:
<asp:Panel runat="server" ID="divNoPolicyId" class="divDSBox" ChildrenAsTriggers="false" UpdateMode="Conditional">
<telerik:RadTextBox ID="PolicyIdInput" runat="server" Width="75px" EmptyMessage="Policy Id" style="margin-left: 3px; margin-bottom: 7px;" onkeyup="checkForChars(this, event)"></telerik:RadTextBox>
<telerik:RadButton ID="GoButton" runat="server" Skin="Vista" ButtonType="StandardButton" Text="Go" style="margin-left: 5px; margin-top: 5px;" Enabled="False" CausesValidation="false">
<Icon SecondaryIconCssClass="rbNext" />
</telerik:RadButton>
</asp:Panel>
When the input box is focused and I click enter, the page reloads. I'm trying to prevent this behavior. How I've attempted this so far is capturing the event and preventing default behavior in javascript like so:
function checkForChars(textBox, event) {
console.log(event);
event.preventDefault();
}
I've also tried pointing the form's default submit action at a dummy button like this:
<asp:Panel runat="server" ID="divNoPolicyId" class="divDSBox" DefaultButton="DontReload">
<asp:Button runat="server" Style="display: none" ID="DontReload" disabled="true"/>
...
</asp:Panel>
This was also not functional. I have seen all related questions I could find and none had a decent answer.
I am new to server side rendering frameworks. In my experience with more modern front ends capturing the event and calling preventDefault() has always worked for me.
instead of panel could use an asp:updatePanel ? so only partial postback is sent.
<asp:UpdatePanel runat="server" ID="pan1">
<ContentTemplate>
//content
</ContentTemplate>
</asp:UpdatePanel>
Related
In an there is the function at the bottom right corner to drag and change the size of the box, is there a way of adding it to an asp textbox?
Textbox is as follows:
<div class="control">
<asp:TextBox runat="server" ID="TextBox1" Width="100%" EnableViewState="false" ViewStateMode="Disabled" />
<asp:Label runat="server" ID="Label1" Visible="false" ViewStateMode="Disabled" EnableViewState="false" AssociatedControlID="TextBox1" />
</div>
Set the attribute TextMode="multiline", you can still set Rows="1" if you want it initially to look like a textbox/text input.
I tryed trigger the TextChange event with ajax but it dosnt realy work how i do it. Hope you guys can help me.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:ScriptManager ID="ScriptManager1" runat="server" AsyncPostBackTimeout="0">
</asp:ScriptManager>
<asp:TextBox ID="TextBox1" runat="server" AutoCompleteType="Disabled" AutoPostBack="True" OnTextChanged="TextBox1_TextChanged"></asp:TextBox>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="TextBox1" EventName="TextChanged" />
</Triggers>
</asp:UpdatePanel>
The ScriptManager should appear before the UpdatPanel, not inside of it. And you don't need to define TextBox1 as a trigger. The TextBox being inside the UpdatePanel and the property ChildrenAsTriggers being true by default, the panel will be updated when TextBox1 loses focus after its content has been modified.
UPDATE
I originally misread the question. The following posts describes a method to trigger a postback and refresh the UpdatPanel every time a key is pressed in the TextBox: How do I make a Textbox Postback on KeyUp?.
I would like to know if it is possible to do requiredfieldvalidator purely in javascript.
I do not want my button click which processes the page to perform a postback, as postback completely resets my styling and there is too much to reload on ispostback.
I will however do the postback to the server to update SQL once all the fields have been completed.
<asp:UpdatePanel id="PurGradeUpdate" runat="server" RenderMode="Inline">
<ContentTemplate>
<telerik:RadComboBox ID="PURGrade" runat="server" Width="100" EmptyMessage=" ---" Font-Bold="true"></telerik:RadComboBox>
<asp:RequiredFieldValidator ID="PurGradeValidate" runat="server" Display="Dynamic" ControlToValidate="PURGrade" ErrorMessage="!!!" Font-Italic="true" Font-Bold="true" ForeColor="Red" InitialValue=" ---" EnableClientScript="true"></asp:RequiredFieldValidator>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="PURProduct" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
<telerik:RadButton ID="PurCreate" runat="server" AutoPostBack="false" OnClientClicked="PerformValidation"></telerik:RadButton>
I have the above in an update panel as the comboboxes are populated via SQL read, based on other comboboxes selected index changes.
I would now like to call that "PerformValidation" on my process button click and here the validation must happen, and if not valid, display the errormessage.
Thanks for the assistance.
Ok man i checked it on my VS and this works for sure:
<asp:UpdatePanel id="PurGradeUpdate" runat="server" RenderMode="Inline">
<ContentTemplate>
<asp:DropDownList ID="PURGrade" runat="server" Width="100" Font-Bold="true"></asp:DropDownList>
<asp:RequiredFieldValidator ID="PurGradeValidate" runat="server" Display="Dynamic" ControlToValidate="PURGrade" ErrorMessage="!!!" Font-Italic="true" Font-Bold="true" ForeColor="Red" InitialValue="---" EnableClientScript="true"></asp:RequiredFieldValidator>
<asp:DropDownList ID="PURProduct" runat="server" Width="100" Font-Bold="true"></asp:DropDownList>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="PURProduct" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
<Asp:Button ID="PurCreate" runat="server" AutoPostBack="true"></Asp:Button>
In aspx.cs file I added default value:
PURGrade.Items.Insert(0, "---");
So as i told you before you don't need to use custom JavaScript commands to validate on client side cuz asp required field validator runs on client side by default. The only think that can cause problems in your code is custom controls you use. Be sure that your combo box empty value is what is really added to the select list as a default value.
I have a FileUpload in the Updatepanel.
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
<Triggers>
<asp:PostBackTrigger ControlID="SaveButton" />
</Triggers>
<ContentTemplate>
<cc1:TabContainer CssClass="visoft__tab_xpie7" runat="server" ID="tab" ActiveTabIndex="0" Width="100%" Font-Size="11px">
<cc1:TabPanel runat="server" HeaderText="اطلاعات پایه" ID="TabPanel1">
<ContentTemplate>
<div class="row">
<span style="width: 100px" class="rowtitle">تصویر </span>
<asp:FileUpload ID="ImageFileUpload" runat="server"/>
<asp:ImageButton ID="RemoveImageButton" runat="server" ImageUrl="~/images/delete.png" />
</div>
<div class="row">
<span style="width: 100px" class="rowtitle">Category</span>
<asp:DropDownList ID="CategoryDropDownList" runat="server" Width="200px" AutoPostBack="True" DataTextField="Name" DataValueField="ID" OnSelectedIndexChanged="CategoryDropDownList_SelectedIndexChanged" />
<asp:RequiredFieldValidator ID="CategoryRFV" runat="server" ControlToValidate="CategoryDropDownList" ForeColor="Red" ValidationGroup="Save" ErrorMessage="مجموعه را انتخاب کنید." Text="*" />
</div>
<div class="row" style="height: 300px">
<span style="width: 100px" class="rowtitle">توضیحات کامل</span>
<editor:HtmlEditor Style="float: left" runat="server" Width="600px" ID="DescriptionHtmlEditor" />
<asp:RequiredFieldValidator Text="*" ID="DescriptionRFV" runat="server" ControlToValidate="DescriptionHtmlEditor" ForeColor="Red" ValidationGroup="Save" ErrorMessage="توضیحات را وارد کنید ." />
</div>
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>
<div class="row" style="text-align: center">
<asp:Button ID="SaveButton" class="button" Width="100px" OnClick="SaveButton_Click" runat="server" ValidationGroup="Save" Text="ذخیره" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
when i was trying to access the FileUpload FileName property after a partial postback of an updatepanel, it was empty.
I want get Filenme of uploadpanel in oncange event witj javascrip, but i don't get Fullpath of file.
function FileChange()
{
var filename = document.getElementById('<%= FileNameUpload.ClientID %>');
var file = document.getElementById('fileupload');
filename.value = file.value;
}
How to get filename of fileupload after partial postback?
When i was trying to access the FileUpload FileName property after a
partial postback of an updatepanel, it was empty.
Update Panels simply intercept the regular form submit and perform a FULL postback using an xmlhttp request. Because of this, the selection initially made on the input:file element was already submitted in the initial postback and you can't read it anymore afterwards. To prove what I am saying, try and read the file name on the initial postback and you'll see that you'll be able to.
Looking at your code, it also seems that you are trying to set the value of fileupload element programmatically. This is not possible either for security reasons - you can't access a user's hard drive from Javascript and decide which file the user should upload to your website. Once the user selected the file and the form was submitted, the selection is gone; the user would have to re-select the file himself.
You can try many hacks to make this work with UpdatePanels, but the cleanest in the long run is to implement this using jQuery Ajax because you have complete control of what gets submitted and what doesn't and when.
I hope this helps clarifying why your approach won't work.
I have a page with an editable field and several required fields. The problem is that whenever I click on a button to activate the editable field for making changes, or when applying/cancelling those changes, it causes my Javascript to fire again which appends yet another "required field" indicator to my required fields. I want the indicator to ONLY be appended on the first load, and not to be affected by buttons clicked on the interface. How can I accomplish this? I believe I just need the right condition for my Javascript "if" statement, but have no idea what that might be. I've researched it and come up dry.
Here's my markup. You can safely ignore entire UpdatePanel region. The only thing you need to know, is that the buttons within it are causing the Javascript to run again for each click.
Thanks! ;)
<asp:Content runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript">
function contentPageLoad() {
// Add "Required Field" Indicators
if (/*NEED CONDITION*/) {
$("h4.required").append(" <span class=\"r\">*</span>");
}
}
</script>
</asp:Content>
<asp:Content runat="server" ContentPlaceHolderID="MainContent">
<!-- This is an updatable textfield. -->
<!-- PROBLEM!: LinkButtons here cause the double firing of the javascript above. -->
<!-- Remember that "ChildrenAsTriggers" defaults to True for UpdatePanel. -->
<asp:UpdatePanel ID="RequestorNameUpdatePanel" runat="server">
<ContentTemplate>
<asp:MultiView ID="RequestorName_mv" runat="server" ActiveViewIndex="0">
<asp:View ID="RequestorNameNormalView" runat="server">
<div class="rightCol">
<asp:LinkButton ID="editRequestorName" runat="server" />
<h6 class="inlineH">Requestor's Name: <asp:Label ID="RequestorName_lbl" runat="server"></asp:Label></h6>
</div>
</asp:View>
<asp:View ID="RequestorNameEditView" runat="server">
<div class="rightCol">
<asp:LinkButton ID="updateRequestorName" runat="server" />
<asp:LinkButton ID="cancelRequestorName" runat="server" />
<h6 class="inlineH">Requestor's Name: </h6>
<asp:DropDownList ID="RequestorName_ddl" runat="server" ViewStateMode="Inherit" AutoPostBack="False" ></asp:DropDownList>
<asp:TextBox ID="RequestorName_cb" runat="server" EnableViewState="True" AutoPostBack="False"></asp:TextBox>
<button id="RequestorName_btn" type="button" class="toggle ui-button"></button>
</div>
</asp:View>
</asp:MultiView>
</ContentTemplate>
</asp:UpdatePanel>
<!-- "REQUIRED" indicator from javascript appended here -->
<h4 class="required">First Name</h4>
<asp:TextBox ID="tbFirstName" runat="server"></asp:TextBox>
</asp:Content>
Put this code on document ready.
$(document).ready(function() {
$("h4.required").append(" <span class=\"r\">*</span>");
});
Then it will not be called when your update panels load.