I'm using asp.net htmlEditorExtender, when i copy data from word and paste it into editor and after clicked on button space will automatically drops, why is this happening?
I was using ajax control toolkit version 16.1 now i updated it to 18.1 but getting same problem.
Here is my code
<div class="form-horizontal">
<div class="form-group">
<asp:Label ID="lblRichTextEditor" runat="server" Text="TextEditor" CssClass="control-label col-md-3"></asp:Label>
<div class="col-md-8">
<asp:TextBox ID="eBody" runat="server" Width="100%" Height="250px"></asp:TextBox>
<cc1:HtmlEditorExtender ID="HtmlEditorExteBody" runat="server" TargetControlID="eBody" EnableSanitization="false" DisplaySourceTab="false">
<Toolbar>
<cc1:Undo />
<cc1:Redo />
<cc1:Copy />
<cc1:Paste />
<cc1:Bold />
<cc1:Cut />
<cc1:Italic />
<cc1:Underline />
<cc1:FontSizeSelector />
<cc1:FontNameSelector />
<cc1:UnLink />
</Toolbar>
</cc1:HtmlEditorExtender>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-3 col-md-9">
<asp:Button ID="btnSave" runat="server" Text="Save" CssClass="btn btn-default" OnClick="btnSave_Click" />
</div>
</div>
<div class="form-group">
<div class="col-md-offset-3">
<asp:Label ID="lblBody" runat="server"></asp:Label>
</div>
</div>
</div>
I solved this issue by Updating Ajax control tool kit to latest version(18.1) and added TextMode="Multiline" in textbox.
Here is My Code
<asp:TextBox ID="eBody" runat="server" Width="100%" Height="250px" TextMode="MultiLine"></asp:TextBox>
Related
Problem
I'm creating a webshop and I want to use two different modals in one form in my masterpage, one modal is to create accounts and the other modal is to log users in.
The first modal works perfect, you can open the modal with the button, the buttons inside the modal also work perfect (e.g., register and close buttons). But the other modal (log in) doesn't work, you can open the modal and close the modal, but you can't log in. So the button log in inside the modal "log in" doesn't work, I have some C# code behind that button, but it never activated the code because the button doesn't go off. I put a breakpoint just after the BtnLogin_click, but even the breakpoint doesn't go off. The thing is if I put the second modal (register) in comment, the login modal works again or there must be something wrong in form right? Any tips or advice?
Attempt
The things I tried are:
Looked at the properties of the button, then event, and it said it's onclick with the correct name. Tried to create a new button, and a new onclick event.
HTML
The 2 buttons to open the modals
<input type = "button" id="btnShowLogin" class="btn btn-primary" value = "Login" />
<input type = "button" id="btnShowRegister" class="btn btn-primary" value = "Registreer" />
Modal 1 Login (not working)
<form id="form1" runat="server">
<div class="modal fade" id="LoginModal" tabindex="-1" role="dialog" aria-labelledby="ModalTitle"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×</button>
<h4 class="modal-title" id="ModalTitle">
Login</h4>
</div>
<div class="modal-body">
<label for="txtUsername">
Username</label>
<asp:TextBox ID="txtUsername" runat="server" CssClass="form-control" placeholder="Enter Username"
/>
<br />
<label for="txtPassword">
Password</label>
<asp:TextBox ID="txtPassword" runat="server" TextMode="Password" CssClass="form-control"
placeholder="Enter Password" />
<div class="checkbox">
<asp:CheckBox ID="chkRememberMe" Text="Remember Me" runat="server" />
</div>
<div id="dvMessage" runat="server" visible="false" class="alert alert-danger">
<strong>Error!</strong>
<asp:Label ID="lblMessage" runat="server" />
</div>
</div>
<div class="modal-footer">
<asp:Button ID="btnLogin" Text="Login" runat="server" OnClick="ValidateUser" CssClass="btn btn-default" Visible="true" />
<button type="button" class="btn btn-default" data-dismiss="modal">
Close</button>
</div>
</div>
</div>
</div>
Modal 2 register (working)
<div class="modal fade" id="RegisterModal" tabindex="-2" role="dialog" aria-labelledby="Registreer"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×</button>
<h4 class="modal-title" id="Registreer">
Registreer</h4>
</div>
<div class="modal-body">
<label for="TxtVnaam">
Voornaam</label>
<asp:TextBox ID="TxtVnaam" runat="server" CssClass="form-control" placeholder="Enter Voornaam"
/>
<label for="Txtnaam">
Achternaam
</label>
<asp:TextBox ID="Txtnaam" runat="server" CssClass="form-control" placeholder="Enter Achternaam"
/>
<br />
<label for="TxtNick">
Username</label>
<asp:TextBox ID="TxtNick" runat="server" CssClass="form-control" placeholder="Enter Username"
/>
<label for="txtEmail">
Email</label>
<asp:TextBox ID="txtEmail" runat="server" CssClass="form-control" placeholder="Enter Email"
/>
<br />
<asp:RequiredFieldValidator ErrorMessage="Required" Display="Dynamic" ForeColor="Red"
ControlToValidate="txtEmail" runat="server" />
<asp:RegularExpressionValidator runat="server" Display="Dynamic" ValidationExpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*"
ControlToValidate="txtEmail" ForeColor="Red" ErrorMessage="Invalid email address." />
<label for="txtWW">
Wachtwoord</label>
<asp:TextBox ID="TxtWW" runat="server" CssClass="form-control" placeholder="Enter Wachtwoord"
/>
<label for="bevestig">
Bevestig Wachtwoord</label>
<asp:TextBox ID="bevestig" runat="server" CssClass="form-control" placeholder="Enter Wachtwoord"
/><asp:CompareValidator ErrorMessage="Passwords do not match." ForeColor="Red" ControlToCompare="txtWW"
ControlToValidate="bevestig" runat="server" />
<label for="TxtGemeente">
Gemeente</label>
<asp:TextBox ID="TxtGemeente" runat="server" CssClass="form-control" placeholder="Enter Gemeente"
/>
<label for="TxtPC">
Postcode</label>
<asp:TextBox ID="TxtPC" runat="server" CssClass="form-control" placeholder="Enter Postcode"
/>
<br />
<label for="TxtAdres">
Adres</label>
<asp:TextBox ID="TxtAdres" runat="server" CssClass="form-control" placeholder="Enter adres"
/>
<br />
<label for="TxtTel">
Telefoonnummer</label>
<asp:TextBox ID="TxtTel" runat="server" CssClass="form-control" placeholder="Enter Telefoonnummer"
/>
<label for="TxtRek">
Rekeningnummer</label>
<asp:TextBox ID="TxtRek" runat="server" CssClass="form-control" placeholder="Enter rekeningnummer"
/>
<br />
</div>
<div class="modal-footer">
<asp:Button ID="Button1" Text="Registreer" runat="server" OnClick="RegisterUser" Class="btn btn-primary" />
<button type="button" class="btn btn-default" data-dismiss="modal">
Close</button>
</div>
</div>
</div>
</div>
</form>
JavaScript
<script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
<script type="text/javascript">
$(function () {
$("#btnShowLogin").click(function () {
$('#LoginModal').modal('show');
});
});
$(function () {
$("#btnShowRegister").click(function () {
$('#RegisterModal').modal('show');
});
});
</script>
I expect that the button login inside the modal login will active so it can use the code I put behind it and validate the user.
you have to set ValidationGroup attribute for RequiredFieldValidator for registering .
for example :
<asp:RequiredFieldValidator ValidationGroup="register" ErrorMessage="Required" Display="Dynamic" ForeColor="Red"
ControlToValidate="txtEmail" runat="server" />
when use asp validators you should set ValidationGroup attribute because in your case you have 2 submit buttons and when you click on log in button validator of registration show the message in hidden modal and form will not submit.
I am working on Asp.net form as follows
<form runat="server" id="form">
<label>Select Category <span>*</span></label>
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem>Mobiles</asp:ListItem>
<asp:ListItem>Electronics and Appliances</asp:ListItem>
<asp:ListItem>Cars</asp:ListItem>
<asp:ListItem>Bikes</asp:ListItem>
<asp:ListItem>Furniture</asp:ListItem>
<asp:ListItem>General</asp:ListItem>
</asp:DropDownList>
<div class="clearfix"></div>
<label>Ad Title <span>*</span></label>
<asp:TextBox ID="txt_title" class="phone" runat="server"></asp:TextBox>
<div class="clearfix"></div>
<label>Ad Description <span>*</span></label>
<%--<textarea class="mess" placeholder="Write few lines about your product"></textarea>--%>
<asp:TextBox ID="txt_Body" class="mess" placeholder="Write few lines about your product" TextMode="multiline" Style="resize: none" Width="770px" Height="150px" Wrap="true" runat="server" Font-Bold="True"></asp:TextBox>
<div class="clearfix"></div>
<div class="upload-ad-photos">
<label>Photos for your ad :</label>
<div class="photos-upload-view">
<asp:ImageButton ID="ImageButton1" UseSubmitBehavior="false" OnClientClick="return chooseFile();" ImageUrl="Images/Capture.JPG" runat="server" />
<asp:FileUpload ID="FileUploadControl" runat="server" Visible="False" />
<div id="messages">
<p>Status Messages</p>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="personal-details">
<label>Your Name <span>*</span></label>
<asp:TextBox ID="txt_name" class="name" runat="server"></asp:TextBox>
<div class="clearfix"></div>
<label>Your Mobile No <span>*</span></label>
<asp:TextBox ID="txt_phn" class="phone" runat="server"></asp:TextBox>
<div class="clearfix"></div>
<label>Your Email Address<span>*</span></label>
<asp:TextBox ID="txt_email" class="email" runat="server"></asp:TextBox>
<div class="clearfix"></div>
<p class="post-terms">By clicking <strong>post Button</strong> you accept our Terms of Use and Privacy Policy</p>
<asp:TextBox ID="post_sub" Text="Post" type="submit" runat="server"></asp:TextBox>
<div class="clearfix"></div>
</form>
Where I want to call a hidden fileupload when Imagebutton is clicked using JavaScript as follows:
<script type="text/javascript">
function chooseFile() {
document.getElementById("#FileUploadControl").click();
alert("grt");
return false;
}
</script>
But, I was not able to call the function instead page reloads, as you can see I am returning false in the function also. Please guide me to make this work.
You have set the Visible property of the FileUpload Control to false. Therefore it does not exist on the client side. The Visible property is not the same as display:none in HTML/CSS.
You should do something like this:
<span style="display: none">
<asp:FileUpload ID="FileUploadControl" runat="server" />
</span>
And it's always better to use the ClientID instead of hard coding the ID of the FileUpload Control.
<script type="text/javascript">
function chooseFile() {
document.getElementById("<%= FileUploadControl.ClientID %>").click();
return false;
}
</script>
When you use document.getElementById you shouldn't mention # since it already searches for id attribute, in your current state it will look for id #FileUploadControl which is not your element id. change your code to this:
function chooseFile() {
document.getElementById("FileUploadControl").click();
alert("grt");
return false;
}
<form runat="server" id="form">
<div class="photos-upload-view">
<img id="ImageButton1" OnClick="return chooseFile();" src="https://maxcdn.icons8.com/office/PNG/512/Computer_Hardware/mouse_left_click-512.png" style="widdth:40px;height:40px;" />
<input type="file" ID="FileUploadControl" runat="server" style="display:none;" />
</div>
</form>
Yes, number one is you using # of you document.getElementById("#FileUploadControl") it's wrong and you should use it without # document.getElementById("FileUploadControl").
second thing if you use Visible="False" attribute it not rendering the HTML element, without that you can use below two methods.
FileUploadControl.Style["visibility"] = "hidden" in your backend file
using following css class for hide
function chooseFile() {
document.getElementById("FileUploadControl").click();
alert("grt");
return false;
}
.setDisplayNone {
display:none;
}
<asp:FileUpload ID="FileUploadControl" runat="server" CssClass="setDisplayNone" />
I try to ajaxify RadNumericTextBoxs in Edit Form of Rad grid using (RadAjaxManager or RadAjaxManagerProxy) but i failed .
all i want to do is :
when text changed of (txt_CashAndEquivalents,txt_ShortTermInvestments) sum the values of both text boxes and set the result in txt_OneTotal without full postback .
<EditFormSettings EditFormType="Template">
<EditColumn UniqueName="EditCommandColumn1" FilterControlAltText="Filter EditCommandColumn1 column">
</EditColumn>
<FormTemplate>
<div class="FinancePositioncontainers">
<div class="FinancePosition-container" id="decorationZone">
<h4>Finance</h4>
<fieldset>
<legend>List</legend>
<div class="formRow" style="padding-right: 10px; padding-left: 10px;">
<h5>Bal</h5>
<label for="txt_CashAndEquivalents">bal1:</label>
<telerik:RadNumericTextBox ID="txt_CashAndEquivalents" runat="server" Text='<%# Eval("CashAndEquivalents")%>' Type="Number" DataType="System.Decimal" Width="160" NumberFormat-GroupSizes="3" AutoPostBack="True" TabIndex="1" OnTextChanged="txt_CashAndEquivalents_TextChanged"></telerik:RadNumericTextBox>
<div>
</div>
<label for="txt_ShortTermInvestments">bal2:</label>
<telerik:RadNumericTextBox ID="txt_ShortTermInvestments" runat="server" Text='<%# Eval("ShortTermInvestments")%>' Type="Number" DataType="System.Decimal" Width="160" NumberFormat-GroupSizes="3" TabIndex="2" AutoPostBack="True" OnTextChanged="txt_CashAndEquivalents_TextChanged"></telerik:RadNumericTextBox>
<div>
</div>
<hr />
<label for="txt_OneTotal">total :</label>
<telerik:RadNumericTextBox ID="txt_OneTotal" runat="server" ReadOnly="true" Type="Number" DataType="System.Decimal" Width="160" NumberFormat-GroupSizes="3"></telerik:RadNumericTextBox>
<div>
</div>
</div>
<asp:LinkButton ID="btnUpdate" runat="server" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'
ValidationGroup="Main" CssClass="btn btn-primary btn-xs white_cr"><span class="glyphicon glyphicon-floppy-disk"></span> <%# (Container is GridEditFormInsertItem) ? "Uppdate" %>
</asp:LinkButton>
<asp:LinkButton ID="btnCancel" runat="server" CausesValidation="False" CommandName="Cancel"
CssClass="btn btn-primary btn-xs white_cr"><span class="glyphicon glyphicon-ban-circle"></span>Cancel</asp:LinkButton>
<br />
<br />
</div>
</div>
</FormTemplate>
</EditFormSettings>
One approach you can consider is to utilise the client event, OnValueChanged of RadNumbericTextBox control, instead of the server side event.
For example,
<telerik:RadNumericTextBox ID="txt_CashAndEquivalents" runat="server" Text='<%# Eval("CashAndEquivalents")%>' Type="Number" DataType="System.Decimal" Width="160" NumberFormat-GroupSizes="3" TabIndex="1">
<ClientEvents OnValueChanged="DoSum" />
</telerik:RadNumericTextBox>
<script type="text/javascript">
function DoSum(sender, eventArgs)
{
var txt_ShortTermInvestments = $find('<%=txt_ShortTermInvestments.ClientID %>');
var txt_OneTotal = $find('<%=txt_ShortTermInvestments.ClientID %>');
var val_CashAndEquivalents = sender.get_value();
var val_ShortTermInvestments = txt_ShortTermInvestments.get_value();
txt_OneTotal.set_value(val_CashAndEquivalents + val_ShortTermInvestments);
}
</script>
Above code is just demonstrating the idea and hasn't been tested. So give it a go and see if it works for you or not.
For more details on the available client side events, please refer to the following link.
http://docs.telerik.com/devtools/aspnet-ajax/controls/numerictextbox/client-side-programming/radnumerictextbox-client-object#radnumerictextbox-client-object
I have a modalpopUpExtender and trying to pop up list of ATM
.Following code shows the ASP Panel where i want to do the pop up
<asp:Panel ID="pnlBanks" CssClass="atmBnkPopup" runat="server" meta:resourcekey="pnlBanksResource1">
<div id="pnlBanksCnt" style="display: none;">
<h2 class="sectionHeading">
<asp:Literal ID="litATMPaymentHeader" runat="server" meta:resourcekey="litATMPaymentHeaderResource1"
Text="ATM Payment (Indonesia)" />
</h2>
<asp:Literal ID="litATMPaymentText" runat="server" meta:resourcekey="litATMPaymentTextResource1" />
<br />
<div style="text-align: center;">
<asp:LinkButton ID="lbCloseBanks" runat="server" meta:resourcekey="lbCloseBanksResource1"
Text="<img
alt="Close" src="images/btn/btn-close.gif" __designer:mapid="5f" />" />
</div>
</div>
<asp:Button ID="btnBanks" runat="server" Style="display: none;" meta:resourcekey="btnBanksResource1" />
</asp:Panel>
<cc1:ModalPopupExtender ID="mpeBanks" runat="server" TargetControlID="btnBanks" CancelControlID="lbCloseBanks"
PopupControlID="pnlBanks" BackgroundCssClass="modalBackground" DynamicServicePath=""
Enabled="True" />
In the Aspx page, trying to call a JavaScript to pop up the screen
<p>
<asp:Literal ID="litATMBanks" runat="server" Text="To view the banks at which we accept ATM payment," meta: resourcekey="litATMBanksResource1" />
<a href="javascript:ShowBankList();">
<asp:Literal ID="litATMBanksLink" runat="server" Text="click here" meta: resourcekey="litATMBanksLinkResource1" />
</a>
</p>
Here is My Java Script
function ShowBankList() {
var modal = $find("mpeBanks");
if (modal) {
$("pnlBanksCnt").style.display = "block";
modal.show();
}
}
I am getting Modal as null .
I am not sure what is missing in the code . Why $find not able to find the element
I want the user to upload 4 photos using FileUpload, and if any of them are empty I would like to display an error message. How can I validate that all of them are filled correctly?
<div id="upload-area">
<div id="photo1">
<asp:FileUpload ID="PhotoUpload1" CssClass="photo-upload" ValidationGroup="PhotoUpload" runat="server" size="38" />
</div>
<div id="photo2">
<asp:FileUpload ID="PhotoUpload2" CssClass="photo-upload" ValidationGroup="PhotoUpload" runat="server" size="38" />
</div>
<div id="photo3">
<asp:FileUpload ID="PhotoUpload3" CssClass="photo-upload" ValidationGroup="PhotoUpload" runat="server" size="38" />
</div>
<div id="photo4">
<asp:FileUpload ID="PhotoUpload4" CssClass="photo-upload" ValidationGroup="PhotoUpload" runat="server" size="38" />
</div>
</div>
ASP.NET Validator
<div id="upload-warning">
<asp:RequiredFieldValidator ID="PhotoUploadValidator" runat="server"
ControlToValidate="PhotoUpload1" CssClass="upload-warning">
<img src="image/mobile/exclamation-mark.png" />
<span style="vertical-align: middle;">请上传四幅作品，您还需上传一幅作品。</span>
</asp:RequiredFieldValidator>
</div>
Thanks.