Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

RadAjaxPanel.ajaxRequest causing postback

7 Answers 311 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
XiMnet Malaysia
Top achievements
Rank 1
XiMnet Malaysia asked on 18 Oct 2013, 06:24 AM
Hi,

In this page, we are trying to show whatever user typed simultaneously using AjaxRequest.
However, the page seems to post back every time we typed 1 character and this cleared the textbox.
How can we prevent this?
Thanks.

URL: http://telerik.ximnet.com.my/test_onkeyupEvent.aspx

Code:
Imports Telerik.Web.UI
 
Partial Class xtopia_ContentMS_testlistview
    Inherits System.Web.UI.Page
    Protected Sub rap_AjaxRequest(sender As Object, e As AjaxRequestEventArgs) Handles rap.AjaxRequest
        ltl_show_text.Text = e.Argument
 
    End Sub
End Class


ASPX:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="test_onkeyupEvent.aspx.vb" Inherits="xtopia_ContentMS_testlistview" %>
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html>
 
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script>
       
 
        function requestStart(sender, eventArgs) {
            console.log("ss");
 
        }
 
        function onkeyupEvent() {
            var text = $find("<%= txt_art_search_box.ClientID %>").get_textBoxValue();
            console.log(text);
            $find('<%=rap.ClientID %>').ajaxRequest($('#txt_art_search_box').val());
        }
 
 
 
    </script>
</head>
<body>
    <form runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
        <telerik:RadAjaxPanel runat="server" ID="rap">
            <telerik:RadTextBox AutoPostBack="false" AutoCompleteType="Disabled" onkeyup="onkeyupEvent();" ID="txt_art_search_box" runat="server" EmptyMessage="Type here to search" Width="80%">
            </telerik:RadTextBox>
            <br />
            You type: <asp:Literal ID="ltl_show_text" runat="server" />
        </telerik:RadAjaxPanel>
    </form>
</body>
</html>

7 Answers, 1 is accepted

Sort by
0
Jayesh Goyani
Top achievements
Rank 2
answered on 18 Oct 2013, 09:39 AM
Hello,

<html>
<head runat="server">
    <title></title>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script>
 
            function onkeyupEvent() {
                var text = $find("<%= txt_art_search_box.ClientID %>").get_textBoxValue();
                $find('<%=rap.ClientID %>').ajaxRequest($('#txt_art_search_box').val());
            }
 
        </script>
    </telerik:RadCodeBlock>
</head>
<body>
    <form id="form1" runat="server">
        <div>
 
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            </telerik:RadAjaxManager>
            <telerik:RadAjaxPanel runat="server" ID="rap" OnAjaxRequest="rap_AjaxRequest">
                <telerik:RadTextBox AutoPostBack="false" AutoCompleteType="Disabled" onkeyup="onkeyupEvent();" ID="txt_art_search_box" runat="server" EmptyMessage="Type here to search" Width="80%">
                </telerik:RadTextBox>
                <br />
                You type:
                    <asp:Literal ID="ltl_show_text" runat="server" />
            </telerik:RadAjaxPanel>
 
        </div>
    </form>
</body>
</html>
protected void rap_AjaxRequest(object sender, AjaxRequestEventArgs e)
{
    ltl_show_text.Text = e.Argument.ToString();
}


Thanks,
Jayesh Goyani
0
XiMnet Malaysia
Top achievements
Rank 1
answered on 21 Oct 2013, 06:23 AM
Hello Jayesh,

I have created another page using your code but it is still post back once user type in a character. Any idea?
http://telerik.ximnet.com.my/test_onkeyupEvent_v2.aspx

Thanks.

0
Maria Ilieva
Telerik team
answered on 22 Oct 2013, 11:42 AM
Hello,

In order to avoid the double post to the server which is the actual cause of the issue I would suggests you to remove the RadTextBox control from the RadAjaxPanel and simply perform manual request like this:
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <telerik:RadTextBox AutoPostBack="false" AutoCompleteType="Disabled" onkeyup="onkeyupEvent();"
            ID="txt_art_search_box" runat="server" EmptyMessage="Type here to search" Width="80%">
        </telerik:RadTextBox>
        <br />
        <telerik:RadAjaxPanel runat="server" ID="rap" OnAjaxRequest="rap_AjaxRequest">
            You type:
            <asp:Literal ID="ltl_show_text" runat="server" />
        </telerik:RadAjaxPanel>

Give this a try and verify if it covers your requirements.

Regards,
Maria Ilieva
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
XiMnet Malaysia
Top achievements
Rank 1
answered on 23 Oct 2013, 02:22 AM
Thanks, Maria.
It works. But what if we need to wrap other components before the textbox in ajaxpanel?
Is there a way manually exclude the textbox ? For example, the dropdownlist below.

<telerik:RadAjaxPanel runat="server" ID="rap">
      
         <asp:DropDownList runat="server" ID="ddl_status">
         <asp:ListItem Text="Active" Value="1" />
         <asp:ListItem Text="Pending" Value="0" />
     </asp:DropDownList>
 
           <telerik:RadTextBox AutoPostBack="false" AutoCompleteType="Disabled" onkeyup="onkeyupEvent();" ID="txt_art_search_box" runat="server" EmptyMessage="Type here to search" Width="80%">
         </telerik:RadTextBox>
            
         <br />
         You type: <asp:Literal ID="ltl_show_text" runat="server" />
     </telerik:RadAjaxPanel>


0
Maria Ilieva
Telerik team
answered on 23 Oct 2013, 02:31 PM
Hi,

You could exclude the TextBox control from being ajaxified by using the following approach:
protected void Page_Load(object sender, EventArgs e)
{
    RadScriptManager1.RegisterPostBackControl(txt_art_search_box);
}

I hope this helps.

Regards,
Maria Ilieva
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
XiMnet Malaysia
Top achievements
Rank 1
answered on 24 Oct 2013, 03:45 AM
Hi Maria

URL: http://telerik.ximnet.com.my/test_onkeyupEvent.aspx

Updated the page load event as following:
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
 
      RadScriptManager1.RegisterPostBackControl(txt_art_search_box)
    
  End Sub


But it still doesn't solve the issue. Am I missing something?

Thanks.

0
Accepted
Maria Ilieva
Telerik team
answered on 28 Oct 2013, 09:41 AM
Hi XiMnet,

In this case the correct solution would be to use RadAjaxManager control and add independent settings of each control. This will allow avoiding of the TextBox update which is causing its reset after ajaxRequest. See the approach below and verify of it works for you:
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    <Scripts>
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
    </Scripts>
</telerik:RadScriptManager>
<telerik:RadCodeBlock ID="RCB1" runat="server">
    <script type="text/javascript">
        function requestStart(sender, eventArgs) {
            console.log("ss");
        }
        function onkeyupEvent() {
            var text = $find("<%= txt_art_search_box.ClientID %>").get_textBoxValue(); console.log(text);
            $find('<%=rap.ClientID %>').ajaxRequest($('#txt_art_search_box').val());
        }
    </script>
</telerik:RadCodeBlock>
<div>
    <telerik:RadAjaxManager ID="rap" runat="server" OnAjaxRequest="rap_AjaxRequest1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="rap">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ltl_show_text" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="txt_art_search_box">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ddl_status" />
                    <telerik:AjaxUpdatedControl ControlID="ltl_show_text" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <asp:DropDownList runat="server" ID="ddl_status">
        <asp:ListItem Text="Active" Value="1" />
        <asp:ListItem Text="Pending" Value="0" />
    </asp:DropDownList>
    <telerik:RadTextBox AutoPostBack="false" AutoCompleteType="Disabled" onkeyup="onkeyupEvent();"
        ID="txt_art_search_box" runat="server" EmptyMessage="Type here to search" Width="80%">
    </telerik:RadTextBox>
    <br />
    You type:
    <asp:Literal ID="ltl_show_text" runat="server" />
</form>


I hope this helps

Regards,
Maria Ilieva
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
Ajax
Asked by
XiMnet Malaysia
Top achievements
Rank 1
Answers by
Jayesh Goyani
Top achievements
Rank 2
XiMnet Malaysia
Top achievements
Rank 1
Maria Ilieva
Telerik team
Share this question
or