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

JavaScript error when typing custom tokens

7 Answers 124 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 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)

{

}

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

JavaScript error when typing custom tokens

7 Answers, 1 is accepted