RadAjaxPanel & Dropdownlist with AutoPostBack enabled issue

4 posts, 0 answers
  1. John
    John avatar
    3 posts
    Member since:
    Nov 2012

    Posted 02 Mar 2014 Link to this post

    I have a dropdownlist located inside RadAjax Panel (Build Q4 2006 ) with AutoPostBack option enabled and SelectedIndexChanged event is handled. Whenever loading the page a javascript exception is through "Expected ')'".

    The problem is related to the generated Javascript handler added to the dropdownlist "onchange" client event. I have tried to locate a solution for this issue through all threads but couldn't locate anything helpful for this issue.

    Here is the aspx markup used by the page

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
    <%@ Register Assembly="RadAjax.Net2" Namespace="Telerik.WebControls" TagPrefix="radA" %>

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <radA:RadAjaxPanel ID="RadAjaxPanel1" runat="server" height="200px" width="300px" ClientIDMode="AutoID" EnableOutsideScripts="True">
                <br />
                <asp:DropDownList ID="ddlItems" runat="server" AutoPostBack="True">
                    <asp:ListItem>Item1</asp:ListItem>
                    <asp:ListItem>Item2</asp:ListItem>
                </asp:DropDownList>
                <br />
                <br />
                <asp:Label ID="lblTest" runat="server"></asp:Label>
               
            </radA:RadAjaxPanel>
        </div>
        </form>
    </body>
    </html>



  2. John
    John avatar
    3 posts
    Member since:
    Nov 2012

    Posted 02 Mar 2014 in reply to John Link to this post

    I forgot to mention that I am building the project on .Net framework 4.5.1. 

    I have tested downgrading the .Net framework and the maximum .Net framework which works with no issues is 3.5.

    Hope there would be a solution to make it work on .Net framework 4.5.1.

    Thanks,
    John
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 03 Mar 2014 Link to this post

    Hi John,

    Unfortunately I couldn't replicate the issue at my end. Please have a look into the sample code snippet which works fine at my end.

    ASPX:
    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
        <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" onchange="Change();">
            <asp:ListItem Text="Item1">
            </asp:ListItem>
            <asp:ListItem Text="Item2">
            </asp:ListItem>
            <asp:ListItem Text="Item3">
            </asp:ListItem>
        </asp:DropDownList>
        <br />
        <br />
        <asp:Label ID="Label1" runat="server">
        </asp:Label>
    </telerik:RadAjaxPanel>

    C#:
    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        Label1.Text = DropDownList1.SelectedItem.Text;
    }

    JavaScript:
    <script type="text/javascript">
        function Change(sender, args) {
            var dropdownlist = document.getElementById("DropDownList1");
            var text = dropdownlist.options[dropdownlist.selectedIndex].text;
            alert(text);
        }
    </script>

    Thanks,
    Shinu.
  5. John
    John avatar
    3 posts
    Member since:
    Nov 2012

    Posted 12 Aug 2014 in reply to Shinu Link to this post

    Dear Shinu,

    I followed the same which was sent by you but again no result came out. The reason was related to the generated response and the error was "SCRIPT1006: Expected ')'". By investigating further the issue it is related to the generated javascript code for postback of the dropdownlist control within the Ajax Panel. The generated code is missing ")" character which leads to javascript error and not completing the request.

    ASPX:
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
     
    <%@ Register Assembly="RadAjax.Net2" Namespace="Telerik.WebControls" TagPrefix="telerik" %>
     
    <!DOCTYPE html>
     
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
                <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" onchange="Change();">
                    <asp:ListItem Text="Item1">
                    </asp:ListItem>
                    <asp:ListItem Text="Item2">
                    </asp:ListItem>
                    <asp:ListItem Text="Item3">
                    </asp:ListItem>
                </asp:DropDownList>
                <br />
                <br />
                <asp:Label ID="Label1" runat="server">
                </asp:Label>
            </telerik:RadAjaxPanel>
     
            <script type="text/javascript">
                function Change(sender, args) {
                    var dropdownlist = document.getElementById("DropDownList1");
                    var text = dropdownlist.options[dropdownlist.selectedIndex].text;
                    alert(text);
                }
            </script>
        </form>
    </body>
    </html>

    CS Code:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
     
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
     
        }
        protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
        {
            Label1.Text = DropDownList1.SelectedItem.Text;
        }
    }

    Rendered Page Source:
    <!DOCTYPE html>
     
    <head><title>
     
    </title></head>
    <body>
        <form method="post" action="Default.aspx" id="form1">
    <div class="aspNetHidden">
    <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
    <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
    <input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
    <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="YaCyfFCG9Tzgdp5OgI5JFuxwtXSsJzXb1x58pkgh46zdd7s2C0CUW3H3dXDwLeHHB0INeVAFbzRrDoHAiK3G95oXGVXyy+wWP6LLw8XZgf4QXt6ix2/qWj1Ecuj88C7I9PbUDMYWivvss4/cFp0J13rXbRtv/WTDEzw7jO/oLXBq1Ej5uf/MV9qOGFYbLp0x" />
    </div>
     
    <script type="text/javascript">
    //<![CDATA[
    var theForm = document.forms['form1'];
    if (!theForm) {
        theForm = document.form1;
    }
    function __doPostBack(eventTarget, eventArgument) {
        if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
            theForm.__EVENTTARGET.value = eventTarget;
            theForm.__EVENTARGUMENT.value = eventArgument;
            theForm.submit();
        }
    }
    //]]>
    </script>
     
     
             
                <select name="DropDownList1" onchange="Change();setTimeout('AjaxNS.AR(\'DropDownList1\',\'\', 'RadAjaxPanel1', event)', 0)" id="DropDownList1">
            <option selected="selected" value="Item1">Item1</option>
            <option value="Item2">Item2</option>
            <option value="Item3">Item3</option>
     
        </select>
                <br />
                <br />
                <span id="Label1"></span>
             
    </div>
     
            <script type="text/javascript">
                function Change(sender, args) {
                    var dropdownlist = document.getElementById("DropDownList1");
                    var text = dropdownlist.options[dropdownlist.selectedIndex].text;
                    alert(text);
                }
            </script>
         
    <div class="aspNetHidden">
     
        <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="KUHLNYlXzZnkEY/z99Kqaz2G2UFLNWaAlPh+97bCs3mLu/8bhdQ0qe4W43pyXRpdlz2ZnF45XcaRBLumvJygZbbk3rihuUS+CxM744cAvPtb5btvKMgalPRt7dYwmPzoXFO9Tqa6MfjQI7ALhyZE/ld3RnZ+Pm2nmzQaP6Vo53PjlbaCxUSfTfdwGgD+RFwk" />
    </div>
    <script type="text/javascript"></script></form>
     
    <!-- Visual Studio Browser Link -->
    <script type="application/json" id="__browserLink_initializationData">
        {"appName":"InternetExplorer","requestId":"61004c8f8b7a4e09886b271defafd5ca"}
    </script>
    <script type="text/javascript" src="http://localhost:61586/d86a65abfc4144c99a04cc0ce5abb18d/browserLink" async="async"></script>
    <!-- End Browser Link -->
     
    </body>
    </html>



    Thanks,
    John
Back to Top