How can I populate textbox2 based on an autocomplete textbox1 selected value using ajax? If I used the text change event on the autocomplete textbox it fires when scrolling through the list? Somehow I need to capture the selected item?
<script language="javascript" type="text/javascript">
function getSelected() {
alert($get("<%=TextBox1.ClientID %>").value);
}
</script>
<td class="style7" colspan="3">
<asp:TextBox ID="TextBox2" runat="server" Height="97px"
Width="679px"></asp:TextBox>
</td>
So it appears that there is no server-side event in the AutoCompleteExtender that is raised when the user clicks on an item in the drop down list, but there is a client-side event available called OnClientItemSelected. This OnClientItemSelected property can then be bound to a JavaScript function which can then call back to the server-side.
<asp:TextBox ID="TextBox1" runat="server" Height="24px" Width="486px"></asp:TextBox>
<asp:AutoCompleteExtender ID="AutoCompleteExtender" runat="server"
DelimiterCharacters="" Enabled="True" ServicePath="AutoComplete.asmx" TargetControlID="TextBox1"
MinimumPrefixLength="2" UseContextKey="true" ContextKey="StateDropDown"
CompletionListElementID="autocompleteDropDownPanel" OnClientItemSelected="PostBackAutoCompleteChoice()">
</asp:AutoCompleteExtender>
<script type="text/javascript">
function PostBackAutoCompleteChoice() {
__doPostBack('<%= TextBox1.ClientID %>', '');
};
</script>
Related
i didn't get id from ajax tabcontainer
HERE code id need to get a id from tab_container how to do !!!!!!!
<script type="text/javascript">
function my()
{
var con = document.getElementById("TabContainer1").value;
alert(con);
}
</script>
<asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" Height="100%" Width="50%">
<asp:TabPanel ID="tabpnl1" runat="server" HeaderText="Role Master">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox>
<asp:Button ID="btn" runat="server" OnClientClick="my()" />
</ContentTemplate>
</asp:TabPanel>
its shows undefined
to get TabContainer1 in javascript you need to change logic of your javascript function
instead of
function my()
{
var con = document.getElementById("TabContainer1").value;
alert(con);
}
try using
function my()
{
var con = document.getElementById("<%= TabContainer1.ClientID %>");
alert(con);
}
As runtime while loading element in dom its ID will be changed. So instead of using static id as "TabContainer1" you can get ClientID which will be rendered at DOM.
Also value will not be work I guess as its container so its better to use .innerHTML instead of .value.
or alternative you can change your html tag
<asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" Height="100%" Width="50%" ClientIDMode="Static">
I have added ClientIDMode="Static" so it will use "TabContainer1" in DOM as static id will be generated. In this case, you do not need to change your javascript code.
Hope this help
I am using Ajax AutoCompleteExtender on a textbox(ASP.NET) and I have wired up the text change event. When I type in the textbox system is able to successfully fetch the data from an asmx method but the text change event associated with the auto complete text box is not getting fired. This is only happening in Edge browser. I tested the site in chrome and IE and it is working absolutely fine. To add this issue started to appear when I upgraded to the latest version of Ajax Control Kit. Also the text change event gets fired(edge) when I click on the submit button. It's something like the text change event is getting fired when some other event is fired.
Below is the code snippet.
<asp:TextBox ID="AutoTxtCompany" runat="server" aria-describedby="ContentPlaceHolder1_rfvCustomerCompany" AutoPostBack="true" CssClass="ui-autocomplete-input ui-widget ui-widget-content comboBoxDimensionsTextBox" OnTextChanged="AutoTxtCompany_TextChanged" aria-required="true" />
<asp:AutoCompleteExtender ID="autoextAutoTxtCompany" BehaviorID="autoextcompanyautocomplete" runat="server" TargetControlID="AutoTxtCompany" MinimumPrefixLength="1" EnableCaching="false"
CompletionSetCount="5000" CompletionInterval="100" ServiceMethod="getCompanyList" CompletionListCssClass="autocomplete_completionListElement" ServicePath="~/FrontEnd/AutoComplete.asmx" UseContextKey="true" FirstRowSelected="true">
</asp:AutoCompleteExtender>
Try to use the AutoCompleteExtender control's OnClientItemSelected event to fire the Textbox TextChanged event. Code like this:
<script type="text/javascript" >
function DoTextChangedPostBack(source, eventArgs) {
var hfield = $get('<%=AutoTxtCompany.ClientID%>');
hfield.value = eventArgs.get_value();
__doPostBack("<%=AutoTxtCompany.ID%>", "TextChanged");
}
</script>
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:TextBox ID="AutoTxtCompany" runat="server" aria-describedby="ContentPlaceHolder1_rfvCustomerCompany"
AutoPostBack="true" CssClass="ui-autocomplete-input ui-widget ui-widget-content comboBoxDimensionsTextBox"
OnTextChanged="AutoTxtCompany_TextChanged" aria-required="true" />
<ajaxtoolkit:autocompleteextender id="autoextAutoTxtCompany" behaviorid="autoextcompanyautocomplete" runat="server"
targetcontrolid="AutoTxtCompany" minimumprefixlength="1" enablecaching="false"
completionsetcount="5000" completioninterval="100" servicemethod="getCompanyList"
completionlistcssclass="autocomplete_completionListElement" servicepath="FrontEnd/AutoComplete.asmx"
OnClientItemSelected="DoTextChangedPostBack"
usecontextkey="true" firstrowselected="true">
</ajaxtoolkit:autocompleteextender>
</div>
I have the following code in my ASP.Net (4.0) page, in which there are 2 buttons - 'Button1' and 'Button2', a textbox, a required field validator and a custom validator.
I would like the custom validator to fire only when 'Button1' clicked and not when 'Button2' is clicked and Button2 still needs to evaluate a required field validator. How would I make this happen?
Input 1:
<asp:TextBox id="txtCustomData" runat="server" />
<asp:CustomValidator id="CustomValidator1"
runat="server" ErrorMessage="Number not divisible by 2!"
ControlToValidate="txtCustomData"
ClientValidationFunction="CheckEven" />
<br/>
Input 2:
<asp:TextBox id="TextBox2" runat="server" />
<asp:RequiredFieldValidator ID="rfv1" runat="server" ControlToValidate="TextBox2"
ErrorMessage="* Required" ForeColor="Red" >
</asp:RequiredFieldValidator>
<br/>
<br/>
<asp:Button id="btn1" runat="server" Text="Button1" />
<br/>
<asp:Button id="btn2" runat="server" Text="Button2" />
<script language="javascript">
<!--
function CheckEven(source, args) {
var val = parseInt(args.Value, 10);
if (isNaN(val)) {
args.IsValid = false;
}
else {
args.IsValid = ((val % 2) == 0);
}
}
// -->
</script>
UPDATE 1:
While Rick's answer is a possible answer, I found another approach to handling this situation.
I can use Validation groups when both buttons need to validate 2 different validators and one of the validators is a custom validator. Set ValidationGroup="Group1" for Button1 that needs to evaluate the custom validator and ValidationGroup="Group2" for Button2 that needs to evaluate the required field validator, and include the same values for corresponding validators. There is no need to include ValidationGroup for the textboxes.
Input 1:
<asp:TextBox id="txtCustomData" runat="server" />
<asp:CustomValidator id="CustomValidator1"
runat="server" ErrorMessage="Number not divisible by 2!"
ControlToValidate="txtCustomData"
ClientValidationFunction="CheckEven" />
<br/>
Input 2:
<asp:TextBox id="TextBox2" runat="server" />
<asp:RequiredFieldValidator ID="rfv1" runat="server" ControlToValidate="TextBox2"
ErrorMessage="* Required" ForeColor="Red" ValidationGroup="Group2">
</asp:RequiredFieldValidator>
<br/>
<br/>
<asp:Button id="btn1" runat="server" Text="Button1" ValidationGroup="Group1"/>
<br/>
<asp:Button id="btn2" runat="server" Text="Button2" ValidationGroup="Group2"/>
<script language="javascript">
<!--
function CheckEven(source, args) {
var val = parseInt(args.Value, 10);
if (isNaN(val)) {
args.IsValid = false;
}
else {
args.IsValid = ((val % 2) == 0);
}
}
// -->
</script>
UPDATE 2:
If you end up using custom javascript in OnClientClick event of the button, then you need to be careful with your javascript else you might end up having your button never postback even when data is valid.
For example if you have written a custom javascript function called 'ValidateData( )' then first make sure that it always has return true or return false statement in it, and second your OnClientClick should use this function in the manner shown below. Most developers will simply use OnClientClick = "return ValidateData();" which will make the ASP.Net button to NEVER perform an ASP.Net post back even when the data is evaluated as valid, since the default __doPostBack JavaScript function in ASP.Net will never get called (assuming UseSubmitBehavior="false" for this button, if UseSubmitBehavior="true" then __doPostBack is not used and button will postback).
<asp:Button id="btn1" runat="server" Text ="Button1"
OnClientClick="var r = ValidateData(); if (!r) { return false; } " />
<script type=<script type="text/javascript">
function ValidateData( )
{
var x = document.getElementById('xy1');
if(x.value == '1')
{
return false;
}
return true;
}
</script>
Include the CausesValidation attribute and set it to False. Your button will not trigger validation.
http://msdn.microsoft.com/en-us/library/system.windows.forms.control.causesvalidation(v=vs.110).aspx
<asp:Button id="btn2" runat="server" Text="Button2" CausesValidation="False"/>
How can I set TragetContriID to a HyperLink that is inside a GridView?
I tried this :
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
PopupControlID="Panel1"
CancelControlID="btnCancel"
OnCancelScript="HideModalPopup()"
TargetControlID="GridView1$HyperLink1">
</asp:ModalPopupExtender>
But I have an error: that there is no GridView1$HyperLink1
Setting the TargetControlID of the ModalPopupExtender basically trigger the client side Show function of that ModalPopup when the control is clicked. So you need to wire up the controls yourself.
First, since the ModalPopupExtender need a TargetControlID, you should add a dummy control to link the modal popup to :
<asp:Button runat="server"
ID="HiddenTargetControlForModalPopup"
style="display:none"/>
And link the ModalPopupExtender TargetControlID to it
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
PopupControlID="Panel1"
CancelControlID="btnCancel"
OnCancelScript="HideModalPopup()"
TargetControlID="HiddenTargetControlForModalPopup">
</asp:ModalPopupExtender>
So the ModalPopupExtender now has a target that do nothing. Now we now need to do the target's job. You need a javascript function to show the ModalPopup from client side.
<script type="text/javascript">
var ModalPopup='<%= ModalPopupExtender1.ClientID %>';
function ShowModalPopup() {
// show the Popup
$find(ModalPopup).show();
}
</script>
Then you should map the OnClientClick event of the control in your gridview to this javascript function. From your code, I see that you use a asp:HyperLink, I don't think it support the OnClientClick event, so you probably need to switch it to a asp:LinkButton.
<asp:LinkButton ID="LinkButton1" runat="server"
OnClientClick="ShowModalPopup()" />
I have two asp:ListBox. The ID's are Authors and AuthorsSelected. Authors listbox is loaded with all the authors and AuthorsSelected is empty at first. Using Javascript code, I am moving items from Authors to AuthorsSelected.
Now, before submitting the form, I want to verify that AuthorsSelected listbox is not empty. I tried asp:RequiredFieldValidator and it's not workijng and giving error message.
Please let me know how to validate the AuthorsSelected listbox and make sure it's not empty before submitting the form. Thanks.
Look at this very simple example:
<p>
<script language="javascript" type="text/javascript">
function validateListbox() {
var listbox = document.getElementById("<%= ListBox1.ClientID %>");
if (listbox.length == 0)
alert("no items!");
return (listbox.length > 0);
}
</script>
<asp:ListBox ID="ListBox1" runat="server">
<asp:ListItem>Item 1</asp:ListItem>
<asp:ListItem>Item 2</asp:ListItem>
</asp:ListBox>
</p>
<p>
<asp:Button ID="BtnSubmit" runat="server" Text="Submit" OnClientClick="return validateListbox()" />
</p>
Please note ListBox1.ClientID usage; I use it in order to reference my listbox in JavaScript.