Home » Jquery » javascript – "Uncaught TypeError: $(…).autocomplete is not a function" and Oracle Apex

javascript – "Uncaught TypeError: $(…).autocomplete is not a function" and Oracle Apex

Posted by: admin February 22, 2020 Leave a comment


So I am tearing my hair out trying to figure out why this isn’t working. I keep getting an Uncaught TypeError: $(...).autocomplete is not a function error. I’ve searched stack overflow and tried everything I can find but it simply refuses to work. I am trying to use this on an Oracle Apex application if that matters.

Does anyone have any suggestions as what to do?

  <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <table id="mytable" class="tg">
            <th class="tg-baqh"></th>
            <th id="A1" class="tg-baqh">Table Name ==></th>
            <th class="columnTypeCss"><div id = "TT00"  contenteditable></div></th>
            <th id="A1" class="tg-baqh">Column Name</th>
            <th class="tg-baqh">Column Type</th>
            <th class="tg-baqh">Other Arguments</th>
            <td class="columnNameCss">
                <div  class="ui-widget">
  <input id='AA00'>

            <td  class="columnTypeCss">
                <div class="ui-widget">
  <input id='BB00' >
            <td class="otherArgumentsCss">
                <div class="ui-widget">
  <input id='CC00' >
<div style="text-align: center;">
<button id="myButten2" class="butten" type="button" value="button">Add Column</button>

    function createCell(cell, text) {
        var div = document.createElement('div'), // create DIV element
            txt = document.createTextNode(text); // create text node
        //div.appendChild(txt); // append text node to the DIV
        //div.setAttribute('class', style); // set DIV class attribute
        cell.appendChild(div); // append DIV to the table cell
        cell.innerHTML = "<div contenteditable>" + text + "</div>";

    var addRow = function (event) {
        var table = document.getElementById("mytable");
        var numcols = document.getElementById('mytable').rows[0].cells.length;
        var row = table.insertRow(-1);
        var counter = document.getElementById("mytable").rows.length - 1;
        var padded_counter = '0'+counter}
        var padded_counter = counter}
        for (i = 0; i < numcols; i++) {
            var cell1 = row.insertCell(-1);
            if (i == 0) {
                cell1.setAttribute('class', 'columnNameCss')
                cell1.setAttribute('id', 'AA'+padded_counter)
                cell1.innerHTML = "<div contenteditable></div>"
            } else if (i == 1) {
                cell1.setAttribute('class', 'columnTypeCss')
                cell1.setAttribute('id', 'BB'+padded_counter)
                cell1.innerHTML = "<div contenteditable></div>";
            } else {
                cell1.setAttribute('class', 'otherArgumentsCss')
                cell1.setAttribute('id', 'CC'+padded_counter)
                cell1.innerHTML = "<div contenteditable></div>"
            //if(i=0){cell1.className = "columnNameCss";}
            //else if (i=1){cell1.className="columnTypeCss"}else{
            //    cell1.className="otherArgumentsCss"

document.getElementById("myButten2").addEventListener("click", addRow, false);
</script>  <script>
  $( function() {
    var availableTags = [
    $( "#tags" ).autocomplete({
      source: availableTags
  } );
How to&Answer:

It can be related to the different versions of JQuery conflict.
You can try to remove link to the jquery CDN or use apex.jQuery instead of $.