From https://spservices.codeplex.com/discussions/443533
Hey all,
First, Marc, I'm a long-time fan of your work - thanks so much for all of your amazing work not only on SPServices but with the SharePoint community at large.
Tried searching many places for possible approaches to this issue, but not turning up much of anything. I'm running __IE8__ with __SharePoint 2013__, __jQuery 1.9 uncompressed__ (though I have also tried 2.0, 1.8 and 1.72) and __SPServices 2013.01__ (though I have also tried 0.7.2). I'm not terribly brilliant with jQuery, but know my fair share of Javascript and have worked with SP 2007 and 2010 for years (new-ish to 2013).
I've created a new custom list in SharePoint. I was able to successfully add several cascading dropdowns to NewForm.aspx without issue (Note that I have not added a custom list form - I am simply adding SPServices jQuery code to NewForm.aspx). However, today I've been trying to add a new Autocomplete field called "CostCenter" to the same form and jQuery is throwing an error when I try to _select_ from the SPAutocomplete "dropdown":
```
Message: Syntax error, unrecognized expression: #CostCenter_381d65fe-ea4f-4776-ba6d-612421d2fdbc_$TextField
Line: 4411
Char: 2
Code: 0
URI: [site URL here]/Scripts/jquery-1.9.0.js
```
To clarify, I can start typing a value in my Single Line of Text "CostCenter" field and the Autocomplete dropdown appears with valid values, but when I click any of them, the browser throws that error. The code I'm using is as follows:
```
$().SPServices.SPAutocomplete({
sourceList: "CostCenters",
sourceColumn: "Title",
columnName: "CostCenter",
filterType: "Contains",
ignoreCase: true,
numChars: 2,
uniqueVals: false,
slideDownSpeed: "fast",
debug: true
});
```
I started poking around for a possible cause, and found that the error is thrown due to the following line in SPServices (indicated by >>>> below):
```
$.fn.SPServices.SPAutocomplete = function (options) {
...
...
// Set up hehavior for the available values in the list element
$("#" + containerId + " li").click(function () {
$("#" + containerId).fadeOut(opt.slideUpSpeed);
>>>> $("#" + columnObjId).val($(this).text());
}).mouseover(function () {
```
It looks to me like jQuery has a problem processing the ID of this field (according to the [jQuery Selector specifications](http://api.jquery.com/category/selectors/), I ought to expect problems with a dollar sign in the ID unless I escape that character), which again is generated as "CostCenter_381d65fe-ea4f-4776-ba6d-612421d2fdbc_$TextField" by SP 2013.
With the understanding that my jQuery skills are lacking, I was able to get the following Javascript line to work without issue:
```
// Set up hehavior for the available values in the list element
$("#" + containerId + " li").click(function () {
$("#" + containerId).fadeOut(opt.slideUpSpeed);
>>>> document.getElementById(columnObjId).value = $(this).text();
}).mouseover(function () {
```
Problem is, I hate mixing Javascript with jQuery here, and I hate even more that someone could overwrite the SPServices file with the best of intentions (I'm not the only administrator) and cause my changes to be lost (yes, I know we can enable version control and all that, but let's assume worst case scenarios for sake of discussion).
Do you have any ideas on this one?
Thanks again,
Chris
Comments: Fixed in 2013.02ALPHA5 There's no need to use the element's id at all since we have a reference to it from this line: var columnObj = $("input[Title='" + opt.columnName + "']");
Hey all,
First, Marc, I'm a long-time fan of your work - thanks so much for all of your amazing work not only on SPServices but with the SharePoint community at large.
Tried searching many places for possible approaches to this issue, but not turning up much of anything. I'm running __IE8__ with __SharePoint 2013__, __jQuery 1.9 uncompressed__ (though I have also tried 2.0, 1.8 and 1.72) and __SPServices 2013.01__ (though I have also tried 0.7.2). I'm not terribly brilliant with jQuery, but know my fair share of Javascript and have worked with SP 2007 and 2010 for years (new-ish to 2013).
I've created a new custom list in SharePoint. I was able to successfully add several cascading dropdowns to NewForm.aspx without issue (Note that I have not added a custom list form - I am simply adding SPServices jQuery code to NewForm.aspx). However, today I've been trying to add a new Autocomplete field called "CostCenter" to the same form and jQuery is throwing an error when I try to _select_ from the SPAutocomplete "dropdown":
```
Message: Syntax error, unrecognized expression: #CostCenter_381d65fe-ea4f-4776-ba6d-612421d2fdbc_$TextField
Line: 4411
Char: 2
Code: 0
URI: [site URL here]/Scripts/jquery-1.9.0.js
```
To clarify, I can start typing a value in my Single Line of Text "CostCenter" field and the Autocomplete dropdown appears with valid values, but when I click any of them, the browser throws that error. The code I'm using is as follows:
```
$().SPServices.SPAutocomplete({
sourceList: "CostCenters",
sourceColumn: "Title",
columnName: "CostCenter",
filterType: "Contains",
ignoreCase: true,
numChars: 2,
uniqueVals: false,
slideDownSpeed: "fast",
debug: true
});
```
I started poking around for a possible cause, and found that the error is thrown due to the following line in SPServices (indicated by >>>> below):
```
$.fn.SPServices.SPAutocomplete = function (options) {
...
...
// Set up hehavior for the available values in the list element
$("#" + containerId + " li").click(function () {
$("#" + containerId).fadeOut(opt.slideUpSpeed);
>>>> $("#" + columnObjId).val($(this).text());
}).mouseover(function () {
```
It looks to me like jQuery has a problem processing the ID of this field (according to the [jQuery Selector specifications](http://api.jquery.com/category/selectors/), I ought to expect problems with a dollar sign in the ID unless I escape that character), which again is generated as "CostCenter_381d65fe-ea4f-4776-ba6d-612421d2fdbc_$TextField" by SP 2013.
With the understanding that my jQuery skills are lacking, I was able to get the following Javascript line to work without issue:
```
// Set up hehavior for the available values in the list element
$("#" + containerId + " li").click(function () {
$("#" + containerId).fadeOut(opt.slideUpSpeed);
>>>> document.getElementById(columnObjId).value = $(this).text();
}).mouseover(function () {
```
Problem is, I hate mixing Javascript with jQuery here, and I hate even more that someone could overwrite the SPServices file with the best of intentions (I'm not the only administrator) and cause my changes to be lost (yes, I know we can enable version control and all that, but let's assume worst case scenarios for sake of discussion).
Do you have any ideas on this one?
Thanks again,
Chris
Comments: Fixed in 2013.02ALPHA5 There's no need to use the element's id at all since we have a reference to it from this line: var columnObj = $("input[Title='" + opt.columnName + "']");