SPServices / jQuery ID Selectors in SP 2013, SPAutoComplete

May 13, 2013 at 10:01 PM
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, 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
Coordinator
May 21, 2013 at 3:59 AM
Chris:

It looks like you've found a bug with 2013. I haven't tested that particular function.

If you want to do anything remotely sophisticated with autocomplete, I'd suggest looking at the one in jQueryUI.

I'll add this to the issue tracker so that I can look at a fix for the next release.

Thanks,
M.
Coordinator
May 21, 2013 at 3:59 AM
This discussion has been copied to a work item. Click here to go to the work item and continue the discussion.
Coordinator
Jul 1, 2013 at 9:13 PM
Chris:

I was just starting to take a look at this and I think I know what was going on. The error you were getting mentions jquery-1.9.0.js. SPServices does not work with 1.9.x due to some bugs in those releases of jQuery. Did you get it working and was the fix to use 1.8.x?

M.
Jul 2, 2013 at 2:27 AM
Hi Mark,

I was actually able to get SP Services 2013.01 to work with jQuery 1.9.0 using the non-minified version, and it's worked fine for everything else I've tried so far (mostly web services calls to lists and cascading form dropdowns), and Autocomplete works great with just that one line change I mentioned in my original post. I wish I had more time to dig in on it myself, because it really seems like similarly structured code has worked elsewhere in the SP Services library without any modifications. Is there any other info I can provide that might be helpful in this case? I'm also happy to try newer versions of jQuery - but would like to try to avoid moving down a version if possible.

Thanks,
Chris