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.
Related
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>
I have read similar questions on stack overflow but this might be a bit different. Since the page I am working on has lots of usercontrols and Ajax already working... I will try to summarize the code first
The page has a link button View Details that opens a usercontrol EmploymentOfferDetails in popup
At the end of this same page, I have added a repeater control with imagebutton and want to open another popup with another user control in it on click of imagebutton
I have added itemcommand to repeater but it is not fired (have read all the repeater item command not firing posts)
Now the problem is when i open click on this imagebutton the employmentOfferDetails control's validator is somehow being triggered and since it has a null object it causes validation false and debugger goes to Application_EndRequest ..Here is the code
(Same code works with an imagebutton outside the repeater control) :S
<telerik:AjaxSetting AjaxControlID="lbEmploymentOfferDetails">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="pnlEmploymentOfferDetails" LoadingPanelID="rlpRIDESelected" />
<telerik:AjaxUpdatedControl ControlID="hfEmploymentOfferId" />
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="lbEmploymentOfferDummyLink">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="pnlEmploymentOfferDetails" LoadingPanelID="rlpRIDESelected" />
<telerik:AjaxUpdatedControl ControlID="hfEmploymentOfferId" />
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="rptMedicareReplyDateGroup">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="ucAGPTMailDetails" />
</UpdatedControls>
</telerik:AjaxSetting>
HTML
<div id="divEmploymentOfferDummylink" style="position:absolute;z-index:900;left:0;top:0;display:none;">
<asp:LinkButton runat="server" ID="lbEmploymentOfferDummyLink" Text="View Employment Offer Details" Visible="true" CausesValidation="false" OnClientClick="ShowEmploymentOfferDetails();"></asp:LinkButton>
</div>
<asp:Panel runat="server" ID="pnlPlacementBasicInformation">
<div class="control-group required" id="divEmploymentOfferLink" runat="server" visible="false">
<asp:Label runat="server" AssociatedControlID="lbEmploymentOfferDetails" CssClass="control-label"
Text="Employment Offer" ID="lblEmploymentOffer" />
<div class="controls">
<asp:LinkButton runat="server" ID="lbEmploymentOfferDetails" Text="View Details"
CausesValidation="false" OnClientClick="ShowEmploymentOfferDetails();"></asp:LinkButton>
</div>
</div>
<div id="medicareInformation" class="hide well">
<!-- Main facility and Additional Sites table -->
<!--Another repeater control goes here-->
<div class="control-group">
<asp:Label ID="Label20" runat="server" AssociatedControlID="lblMedicareReplyDate" Text="Medicare Send Confirmation:"
CssClass="control-label" Width="220px" />
<div class="controls" style="margin-left: 225px;">
<asp:Label ID="lblMedicareReplyDate" runat="server" />
<asp:Literal ID="litMedicareReplyEmaiId" runat="server" Visible="false" />
<asp:ImageButton ID="iBtnMedciareReplyEmail" runat="server" ImageUrl="~/Images/Icons/communication-active.png" Width="25px" AlternateText="Click to open email" ToolTip="Click to open email" />
</div>
</div>
<div class="control-group">
<asp:Label ID="Label23" runat="server" AssociatedControlID="rptMedicareReplyDateGroup" Text="Medicare Send Confirmation:"
CssClass="control-label" Width="220px" />
<asp:Repeater runat="server" ID="rptMedicareReplyDateGroup">
<ItemTemplate>
<div class="row" id="trRepeaterItem" runat="server">
<asp:Label ID="lblMedicareReplyDateItem" runat="server" />
<asp:Literal ID="litMedicareReplyEmaiIdItem" runat="server" Visible="false" />
<asp:ImageButton ID="iBtnMedciareReplyEmailItem" runat="server" ImageUrl="~/Images/Icons/communication-active.png" CausesValidation="false" Width="25px" AlternateText="Click to open email" ToolTip="Click to open email" CommandName="OpenEmail" OnClientClick="ShowMedicareDetails();" />
<asp:LinkButton ID="lnkTest" runat="server" OnClientClick="ShowMedicareDetails();" Text="Test Button" OnClick="lnkTest_Click" CausesValidation="false" />
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</div>
on image button click i am opening the modal popup that contains another user control. Now that causes server-side validations of whole page including EmploymentOfferDetails' server side validations and the Application_EndRequest is called because EmploymentOfferDetails is not properly initialized..and therefore (i assume) the repeater itemcommand is not triggered.
The iBtnMedciareReplyEmail(one outside repeater) however works properly.
I hope i am able to explain my issue
Found my answer here:
Repeater Item Command Causes Validation
For anybody that has this problem and stumbles across this post, here's what I found.
Turns out the problem was happening because I had
EnableViewState="false" set on the Repeater. This was breaking the
event postback somehow, and making every validator on the page fire.
All I had to do was manually call DataBind() on the Repeater from
within Page_Load(), and it cleared right up.
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 cannot for the life of me figure this out. I have tried SO MANY different things... I am just wanting to prevent a user from clicking a button to submit a form more than one time. I have been trying to use javascript to stop the postback in various way but none of them work. Here's some code:
<form id="MyForm" runat="server">
<asp:UpdatePanel ID="UpdatePanel" runat="server">
<ContentTemplate>
<asp:Panel ID="FormPanel" runat="server">
...
<asp:Button ID="SubmitButton" runat="server" Text="Submit" OnClientClick="Clicked(event)" OnClick="SubmitButton_Click" UseSubmitBehavior="false" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress" DynamicLayout="true" runat="server" AssociatedUpdatePanelID="UpdatePanel">
<ProgressTemplate>
...
</ProgressTemplate>
</asp:UpdateProgress>
</form>
<script>
function Clicked(event) {
alert('hello'); //this works!
event.preventDefault(); //don't think this works...
$('#<%= SubmitButton.ClientID %>').disabled = true; //this didn't even work!
}
</script>
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.