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>
Related
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>
I have this code in form:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:TextBox ID="Text1" runat="server"></asp:TextBox>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="Text2" runat="server"></asp:TextBox>
<asp:Button ID="Submit" runat="server" OnClick="Submit_Click"
Text="Click Me"/>
</ContentTemplate>
</asp:UpdatePanel>
When I click on Submit button, the all form is posted back on server (Text1 and Text2). I want to post back only textbox in UpdatePanel (Text2). Is it possible?
Thank you for responses.
EDIT (Solution):
I think, I have solution using Javascript:
function onSubmit() {
var text1 = this.document.getElementById('<%=Text1.ClientID%>');
text1.disabled = true;
return true;
}
....
<asp:Button ID="Submit" OnClientClick="onSubmit();" ..../>
It cause that Text1 will be disabled before PostBack. It seams that ASP.NET do not post back values from disabled textboxes. Hovewer, this works only without UpdatePanel. Of course, Text1 is empty after postback.
Well, the UpdatePanel controls what get's posted back. You cannot change that behavior. It should be posting the form data for the UpdatePanel only (I believe), plus the entire ViewState. It has to post the entire ViewState for the page lifecycle to work.
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 am trying to use AJAXControlToolkit’s Modelpopu with ConfirmDialog.I am using VS2008. Following is my code
<asp:Button ID="btnSave" runat="server" Text="Save" onclick="btnSave_Click" />
<asp:ConfirmButtonExtender ID="btnSave_ConfirmButtonExtender" runat="server"
ConfirmText="Want to Save?" Enabled="True" TargetControlID="btnSave">
</asp:ConfirmButtonExtender>
<asp:ModalPopupExtender ID="btnSave_ModalPopupExtender" runat="server"
DynamicServicePath="" Enabled="True" TargetControlID="btnSave">
</asp:ModalPopupExtender>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
Please guide me what should I do to make it run.
From the AJAX Control Toolkit documentation for the ConfirmButtonExtender:
http://www.asp.net/ajax/ajaxcontroltoolkit/samples/ConfirmButton/ConfirmButton.aspx
DisplayModalPopupID - Optionally specifies the ID of a ModalPopup control to use for displaying the confirmation dialog (instead of window.confirm). When using DisplayModalPopupID, the following conditions must be met:
The ModalPopup must be configured to work against the same TargetControlID as the ConfirmButton (and should work properly if the ConfirmButton is disabled).
The ModalPopup must specify OkControlID and/or CancelControlID to identify the buttons corresponding to window.confirm's OK/Cancel buttons.
The ModalPopup must not specify OnOkScript or OnCancelScript.
Example of using the AJAX controls together in your page:
<asp:ConfirmButtonExtender ID="btnSave_ConfirmButtonExtender" runat="server"
ConfirmText="Want to Save?" TargetControlID="btnSave"
DisplayModalPopupID="btnSave_ModalPopupExtender"></asp:ConfirmButtonExtender>
<asp:ModalPopupExtender ID="btnSave_ModalPopupExtender" runat="server"
TargetControlID="btnSave" PopupControlID="Panel1"
OkControlID="btnOK" CancelControlID="btnCancel"></asp:ModalPopupExtender>
Where Panel1 is an <asp:Panel> that gets displayed as the modal dialog, and btnOK and btnCancel are the OK and Cancel buttons on that panel.
I have an ajax panel (actually it' a Rad Ajax Panel - the behavior is similar to an Ajax Update Panel with everything in the ContentTemplate section and no Triggers), with an image button (asp:ImageButton) and a button (asp:Button).
I notice that they behave differently - the image button advances to postback (Page_Load and Button_Click server functions), when the button doesn't!
How can I achieve this behavior with the Button too? (Replacing the Button with an ImageButton solved the problem... Is there a way to maintain the Button and have the ImageButton's behavior?)
This is what my code looks like (two buttons, two click functions, and two client click functions):
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<div style="width: 800px;">
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script type="text/javascript">
function validateSave() {
// ...
return true;
}
function validateAdd() {
// ...
return true;
}
</script>
</telerik:RadScriptBlock>
<asp:Panel ID="Panel1" runat="server" Visible="false">
<fieldset>
<legend>New item</legend>
<%--..........--%>
<asp:ImageButton ID="Button4" runat="server"
ImageUrl="~/App_Themes/ThemeDefault/images/add.gif"
OnClientClick="return validateAdd();"
OnClick="Button4_Click" />
</fieldset>
<%--..........--%>
<asp:Button ID="Button2" runat="server"
OnClientClick="return validateSave();"
Text="Save" ToolTip="Save" OnClick="Button2_Click" />
</asp:Panel>
</telerik:RadAjaxPanel>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
</telerik:RadAjaxLoadingPanel>
</div>
UpdatePanels can often be problematic with Buttons. An easy thing that you can do is move the Button out of the UpdatePanel. After all, the more contents in your UpdatePanel, the slower the asynch postback will be.