[Solved] Issue creating jQuery selectors with special characters

[Ryan Haugh]

I have found a pretty important issue with the way the telerik controls generate their jQuery selectors.  Consider the following example:

Html.Telerik().DatePicker()
            .Name("DatePicker[0]")
            .MinDate(Model.MinDate.Value)
            .MaxDate(Model.MaxDate.Value)
            .Value(Model.SelectedDate.Value)
            .ShowButton(Model.ShowButton.Value)

This would be a very common naming style when dynamically creating a variable list of input rows in MVC such as:

Date 1: <datepicker with ID InputtedDate[0]>
Date 2: <datepicker with ID InputtedDate[1]>
...
Date n <datepicker with ID InputtedDate[n]>

The problem lies in the code that generates the jQuery selector (in this case ClientSideObjectWriter.Start()).  For the above example, the following JavaScript code would be rendered:

jQuery('#DatePicker[0]').tDatePicker({format:'M/d/yyyy', selectedDate:new $.telerik.datetime(2010,07,03), minDate:new $.telerik.datetime(1900,00,01), maxDate:new $.telerik.datetime(2099,11,31)});

This is incorrect because the selector engine would see that as attribute '0' in the element with ID 'DatePicker'.  This needs to be escaped:

jQuery('#DatePicker\\[0\\]').tDatePicker({format:'M/d/yyyy', selectedDate:new $.telerik.datetime(2010,07,03), minDate:new $.telerik.datetime(1900,00,01), maxDate:new $.telerik.datetime(2099,11,31)});

A very simple fix would be to escape all special characters before writing the selector in the Start method:

string selector = @"#;&,.+*~':""!^$[]()=>|/".ToCharArray().Aggregate(id, (current, chr) => current.Replace(chr.ToString(), @"\\" + chr));

writer.Write("jQuery('#{0}').{1}(".FormatWith(selector, type));

If I'm missing something, please let me know.

Ryan

[Atanas Korchev]

Hello Ryan Haugh,

You are absolutely right. The problem really exists in the current official release. I tried the suggested workaround and it works flawlessly. The problem is now fixed and the fix will appear in the next release.

I have updated your Telerik points.

Regards,
Atanas Korchev
the Telerik team