This is a migrated thread and some comments may be shown as answers.

Combobox not allowing selections after jquery ajax request inside onclientselecteditemchanged event

1 Answer 101 Views

ComboBox

This is a migrated thread and some comments may be shown as answers.

dd asked on 17 Sep 2013, 04:36 PM

I have a combobox on a page that loads other comboboxes dynamically when the user selects a value. After this happens once, the user can no longer make a selection in the original combobox. I made a simple project to reproduce this behavior. Any ideas as to what I can do to fix this?

Edit: Telerik version 2009.3.1314.35. Can't upgrade because of project specs. Thanks.

WebForm1.aspx

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="TestProject1.WebForm1" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html>

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

<head runat="server">

<title></title>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"> </script>

<script type="text/javascript">

var currentIndex = -1;

function changeFilter(sender, args) {

currentIndex++;

$.ajax({

type: "POST",

url: "WebForm1.aspx?action=test&row=" + currentIndex,

success: function (data) {

var arr = data.split("|"); //0 is result, 1 is html to add

var result = arr[0];

if (result == "success") {

var html = arr[1];

$(html).appendTo($("#container0"));

}

});

return false;

}

</script>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager id="rsm1" runat="server"></telerik:RadScriptManager>

<div>

<telerik:RadComboBox ID="cmbxExistingFilters" runat="server" ClientIDMode="Static" AutoPostBack="false"

EmptyMessage="Saved Filters" RegisterWithScriptManager="false" AllowCustomText="false"

AppendDataBoundItems="true" EnableAutomaticLoadOnDemand="false" OnClientSelectedIndexChanged="changeFilter"

EnableVirtualScrolling="false" >

</telerik:RadComboBox>

<div id="hiddenContainer" runat="server" style="display:none;"></div>

<div id="container0" runat="server"></div>

</div>

</form>

</body>

</html>

WebForm1.aspx.vb

Imports Telerik.Web.UI

Imports System.IO

Public Class WebForm1

Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

If HttpContext.Current.Request.Headers("X-Requested-With") = "XMLHttpRequest" Then ' if ajax postback

Response.Clear()

Dim row As String = Request.QueryString("row")

Response.Write("success|" + RenderCustomControl(BuildStatesTextbox(row)) + _

RenderCustomControl(BuildSectorCombobox(row)) + "|")

ElseIf IsPostBack Then

Else

Me.container0.ClientIDMode = UI.ClientIDMode.Static

BindToCombo(Me.cmbxExistingFilters)

End If

End Sub

Private Sub BindToCombo(ctrl As RadComboBox)

ctrl.Items.Clear()

For i As Integer = 0 To 5

Dim rci As New RadComboBoxItem

rci.Text = "hey_" + i.ToString

rci.Value = "hey_" + i.ToString

ctrl.Items.Add(rci)

Next

ctrl.DataBind()

End Sub

Private Function RenderCustomControl(ctrl As Control) As String

Dim sb As New StringBuilder

Try

If ctrl IsNot Nothing Then

Using sw As New StringWriter(sb)

Using html As New HtmlTextWriter(sw)

ctrl.Page = Me

'hiddenContainer.Controls.Add(ctrl)

ctrl.RenderControl(html)

End Using

End If

Catch ex As Exception

Response.Write(ctrl.ID + " Fail<br>")

End Try

Return sb.ToString

End Function

''' <summary>

''' Create textbox to display states

''' </summary>

''' <param name="row"></param>

''' <returns></returns>

''' <remarks></remarks>

Private Function BuildStatesTextbox(row As String) As RadTextBox

Dim txtboxStates As New RadTextBox

txtboxStates.Width = 150

txtboxStates.ID = "tbxStates_" + row

txtboxStates.ClientIDMode = UI.ClientIDMode.Static

txtboxStates.Attributes("onclick") = "alert('" + row + "');"

txtboxStates.AutoPostBack = False

'txtboxStates.Style.Add("display", "none")

txtboxStates.ReadOnly = True

txtboxStates.RegisterWithScriptManager = False

Return txtboxStates

End Function

''' <summary>

''' Create combobox to let the user choose the sector

''' </summary>

''' <param name="row"></param>

''' <returns></returns>

''' <remarks></remarks>

Private Function BuildSectorCombobox(row As String) As RadComboBox

Dim cmbxSectors As New RadComboBox

cmbxSectors.Width = 150

cmbxSectors.ID = "cmbxSectors_" + row

cmbxSectors.ClientIDMode = UI.ClientIDMode.Static

For i = 0 To 5

Dim cmbxItem As New RadComboBoxItem()

cmbxItem.Text = "bye_" + i.ToString

cmbxItem.Value = "bye_" + i.ToString

cmbxSectors.Items.Add(cmbxItem)

Next

cmbxSectors.DataBind()

cmbxSectors.AutoPostBack = False

' cmbxSectors.Style.Add("display", "none")

cmbxSectors.RegisterWithScriptManager = False

Return cmbxSectors

End Function

End Class

1 Answer, 1 is accepted

answered on 20 Sep 2013, 02:32 PM

Hello David,

Thank you for contacting Telerik Support.

I was able to replicate the described issue. It seems that the problem is related with the scripts loaded on the page and with the RadScriptManager. Therefore, I would suggest you to currently use the asp:ScriptManager, until we investigate and troubleshoot the problem.

Hope this would help. Please excuse us for any inconveniences caused.

Regards,
Nencho
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.