Using jQuery selectors with Ajax response

Question

I have an Ajax call and response (see the code below.) Prior to this, I had regular javascript code that would successfully turn my select element from a traditional select to a select2 widget.

When I try to change the select into the select2 with the javascript code $('#datepicker').datepicker(); in the response from Ajax call, I get an error in the debugger that says

Uncaught TypeError: $(...).select2 is not a function at XMLHttpRequest.xhttp.onreadystatechange (createschedule.php:46)

Here is the code that is inside the javascript function:

var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function() 
                {
                    if (this.readyState == 4 && this.status == 200) 
                    {
                        document.getElementById("row_"+cur_id).innerHTML = this.responseText;
                        $('#teacherselect').select2({ width: '100%' }); 
                        $('#datepicker').datepicker();
                    }
                };
                xhttp.open("GET", "editrow.php?id="+id, true);
                xhttp.send();

When Ajax returns and this code is executed, does it still have access to the items through jQuery? It appears that it does not.

Answer 1

Because your jQuery and JQuery UI are working correctly, I would start checking the path of the select2. Is it local or a CDN?