RadAjaxPanel.ajaxRequest causing postback

8 posts, 1 answers
  1. XiMnet Malaysia
    XiMnet Malaysia avatar
    46 posts
    Member since:
    Jan 2006

    Posted 18 Oct 2013 Link to this post

    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>
  2. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 18 Oct 2013 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. XiMnet Malaysia
    XiMnet Malaysia avatar
    46 posts
    Member since:
    Jan 2006

    Posted 21 Oct 2013 Link to this post

    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.

  5. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 22 Oct 2013 Link to this post

    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.
  6. XiMnet Malaysia
    XiMnet Malaysia avatar
    46 posts
    Member since:
    Jan 2006

    Posted 22 Oct 2013 Link to this post

    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>


  7. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 23 Oct 2013 Link to this post

    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.
  8. XiMnet Malaysia
    XiMnet Malaysia avatar
    46 posts
    Member since:
    Jan 2006

    Posted 23 Oct 2013 Link to this post

    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.

  9. Answer
    Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 28 Oct 2013 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017