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

Questions:

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?

<head>
  <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>
</head>
<body>
    <table id="mytable" class="tg">
        <colgroup>
            <col>
            <col>
            <col>
            <col>
        </colgroup>
        <tr>
            <th class="tg-baqh"></th>
            <th id="A1" class="tg-baqh">Table Name ==></th>
            <th class="columnTypeCss"><div id = "TT00"  contenteditable></div></th>
            </td>
        </tr>
        <tr>
            <th id="A1" class="tg-baqh">Column Name</th>
            <th class="tg-baqh">Column Type</th>
            <th class="tg-baqh">Other Arguments</th>
        </tr>
        <tr>
            <td class="columnNameCss">
                <div  class="ui-widget">
  <input id='AA00'>
</div>
            </td>

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

    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;
        if(counter<10){
        var padded_counter = '0'+counter}
        else{
        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";}
            //if(i=3){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 = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  } );
  </script>
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 $.

More:
https://docs.oracle.com/database/121/HTMDB/app_comp001.htm#HTMDB29028