Code not Recognizing SP Services

Question

I am getting error that I see in Developer Tools - Cannot read SPAutocomplete of undefined.

I check in the Network tab and clearly see SP Services file loaded as is jQuery. I checked the browser settings and JavaScript is enabled. This is happening when i tried to use chosen.js also.

I get an error chosen is not a function. That file is loaded also. jQuery is loaded automatically in SharePoint, and i see that file is loaded as well.

Please see screen shot:

Any idea why this wouldn't reference the code properly?

Answer 1

I use the code as below and it works well:

<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices-2014.02.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
    $().SPServices.SPAutocomplete({
        sourceList: "list1",
        sourceColumn: "Title",
        columnName: "text",
        ignoreCase: true,
        numChars: 3,
        slideDownSpeed: 1000,
        debug: true
    });
});
</script>

Answer 2

As BigRaj mentions, it's critical that jQuery be loaded before SPServices (or any other jQuery extension).

If you think that jQuery is being loaded before SPServices, check also that jQuery is not being loaded a second time after you load SPServices.

I have seen cases where a second reference to jQuery later on the page causes it to be reloaded, which then removes the SPServices extension.

Answer 3

If SPServices is coming back as Undefined, it means that library hasn't been loaded. Whenever I've run into this issue it is because jQuery was not loaded first.

It's important that jQuery be loaded before SPServices, and any subsequent code be run in $().ready(function(){ <code here> }); or after the Script tag that has SPServices loaded in.