JS、editable-selectを実装する時にTypeError: “editableSelect” is not a function エラーが出た時の対処法

Editable Select こちらにある、selectorとtextfield両方を組み合わせたような入力フォームを作る時に

$('#selected-id').editableSelect();

で対象のselectorのIDを指定します。

これで実装すると、ちょうどこの行で

TypeError: "editableSelect" is not a function

と言われてしまうときは、外部のJavscriptファイルの読み込みが完了されていなかったり、他のjQuery関連のファイルの読み込みで上書きされてしまっている可能性があるので、 外部ファイルの読み込みを完了してから、特定の処理を実行する様なスクリプトを書きましょう

こちらを参考にしました。

var url = "https://rawgit.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js"
waitOuterScript(url, function(){$('#selected-id').editableSelect();})

var waitOuterScript = function(src, handler){
    var base = document.getElementsByTagName("script")[0];
    var obj = document.createElement("script");
    obj.async = true;
    obj.src= src;
    if(obj.addEventListener){
        obj.onload = function () {
        handler();
        }
    }else{
        obj.onreadystatechange = function () {
            if ("loaded" == obj.readyState || "complete" == obj.readyState){
                obj.onreadystatechange = null;
                handler();
            }
        }
    }
    base.parentNode.insertBefore(obj,base);
};