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

JavaScript error when typing custom tokens

7 Answers 172 Views

AutoCompleteBox

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

Ron asked on 22 Nov 2012, 12:41 PM

Hi again!

Here's the reprosteps of a bug for the example below: type sequentially letter 'a' and semicolon in intervals of 500 ms or less (approximately). I didn't measure precisely, but it is a bit slower than normal speed of touch-typing.

The error occurs: "Microsoft JScript runtime error: Unable to get value of the property 'left': object is null or undefined". The error occurs when both OnEntryAdded and OnEntryRemoved are assigned.

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestAutocompleteSuggList._Default" %>

<%@ Register Assembly="Telerik.Web.UI, Version=2012.3.1120.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head id="Head1" runat="server">

<title></title>

<script type="text/javascript" src="Scripts/jquery-1.8.3.min.js"></script>

</head>

<body>

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

<div>

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<asp:UpdatePanel runat="server">

<ContentTemplate>

<telerik:RadAutoCompleteBox runat="server"

ID="racAutocomplete"

AllowCustomEntry="true"

OnEntryAdded="ServerEntryAdded"

OnEntryRemoved="ServerEntryAdded"

InputType="Token" />

</ContentTemplate>

</asp:UpdatePanel>

</div>

</form>

</body>

</html>

Default.aspx.cs

using System;

using System.Web.UI;

using System.Collections.Generic;

using Telerik.Web.UI;

using System.Threading;

namespace TestAutocompleteSuggList

{

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

const string StartupJS = @"

var $input = jQuery('#{1} input[name=""{0}""]');

$input.focus();

";

ScriptManager.RegisterStartupScript(this,//restore focus on AutocompleteBox

this.GetType(),

"ScriptOnLoad",

string.Format(StartupJS, racAutocomplete.ClientID.Replace("_", "$"), racAutocomplete.ClientID),

true);

const int maxcount = 10;

racAutocomplete.DataSource = new List<string>() {

new string('a', maxcount),

};

racAutocomplete.DataBind();

}

protected void ServerEntryAdded(object sender, AutoCompleteEntryEventArgs e)

{

}

7 Answers, 1 is accepted

answered on 27 Nov 2012, 12:45 PM

Hello Vakhtang,

I have performed some tests, based on the provided snippet of code and description, but I was unable to replicate the issue. I have recorded a video, demonstrating the behavior at my end. Please correct me if I had misunderstood your scenario. In addition, I would like to ask you to record a video, demonstrating the problematic behavior at your end.

All the best,
Nencho
the Telerik team

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 their blog feed now.

answered on 29 Nov 2012, 10:08 AM

Here's a reproduction of the same buggy behavior when user pastes a string into AutoCompleteBox. (Tried for Telerik.Web.UI, Version=2012.3.1127.35.) Just paste (Ctrl+V) the string "Maxim" (w/o quotes) to reproduce.

(The original scenario where the bug occurs: a user pastes a semicolon-separated string of tokens and code-behind validates the tokens against the data source.)

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestAutocompleteSuggList._Default" %>

<%@ Register Assembly="Telerik.Web.UI, Version=2012.3.1127.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head id="Head1" runat="server">

<title></title>

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>

<script type="text/javascript">

jQuery(document).ready(function () {

jQuery(document).on('paste', 'input[name="<%# racb1.ClientID %>"]', function (e) {

var $el = $(this);

/* Just a small timeout till value can get populated */

setTimeout(function () {

__doPostBack('<%# racb1.ClientID %>', $el.val()); // postback changes

}, 100);

});

</script>

</head>

<body>

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

<div>

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">

<ContentTemplate>

<telerik:RadAutoCompleteBox runat="server"

ID="racb1"

AllowCustomEntry="true"

OnEntryAdded="ServerEntryAdded"

Width="500"

InputType="Token" />

</ContentTemplate>

</asp:UpdatePanel>

</div>

</form>

</body>

</html>

Default.aspx.cs

using System;

using System.Web.UI;

using System.Linq;

using System.Collections.Generic;

using Telerik.Web.UI;

namespace TestAutocompleteSuggList

{

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

Page.DataBind();

var dataSource = new List<string>() { "Petrov, Maxim" };// single record 'Petrov, Maxim'

racb1.DataSource = dataSource;

/* *****************************

* parse pasted string

*/

if (Request.Form["__eventtarget"] == racb1.ClientID)

{

var allEntries = Request.Form["__eventARGUMENT"].Split(new[] { ";" }, StringSplitOptions.RemoveEmptyEntries);

foreach (string entry in allEntries)

{

// validate entries, choose only ones which are in autocomplete's DataSource

var provedEntry = dataSource.SingleOrDefault(str => str.Trim() == entry.Trim());

if (provedEntry != null)

racb1.Entries.Add(new AutoCompleteBoxEntry(provedEntry));

else

{ // invalid entries processing

}

UpdatePanel1.Update();

}

protected void ServerEntryAdded(object sender, AutoCompleteEntryEventArgs e)

{

}