Telerik Forums / UI for ASP.NET AJAX Forum / Ajax /

RadAjaxPanel.ajaxRequest causing postback

Telerik UI for ASP.NET AJAX
Resources Buy Try

8 posts, 1 answers

XiMnet Malaysia

50 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>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

    <script src="http://code.jquery.com/jquery-migrate-1.2.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>
Jayesh Goyani

2733 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>

    <script src="http://code.jquery.com/jquery-migrate-1.2.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
XiMnet Malaysia

50 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.
Maria Ilieva
Admin

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.
XiMnet Malaysia

50 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>
Maria Ilieva
Admin

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.
XiMnet Malaysia

50 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.
Answer
Maria Ilieva
Admin

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.

RadAjaxPanel.ajaxRequest causing postback

XiMnet Malaysia

Jayesh Goyani

XiMnet Malaysia

Maria Ilieva

XiMnet Malaysia

Maria Ilieva

XiMnet Malaysia

Maria Ilieva