jQuery animation doesn't work with SAPUI5

Question

I'm constructing a tree-view that slides out based on the buttons the user clicks in the preceding column. I get this error when I click on the first column of buttons:

Uncaught TypeError: $(...).effect is not a function
    at runEffect1 (test:39)
    at HTMLDivElement.<anonymous> (test:66)
    at HTMLDivElement.dispatch (jquery-dbg.js:4737)
    at HTMLDivElement.c3.handle (jquery-dbg.js:4549)

How do I fix it? These functions worked when I used vanilla JavaScript and without the SAPUI5 imported, but using jQuery now gives problems. I need to use SAPUI5 with jQuery. Also, the snippet doesn't work due to adding SAPUI5.

 $(document).ready(function() { $(function() { // run the currently selected effect function runEffect1() { var selectedEffect = "slide"; var options = {}; /* Hide the columns so that they can slide into display*/ $("#column_2").hide(); $("#column_3").hide(); $("#column_4").hide(); // Run the effect $("#column_2").effect(selectedEffect, options, 450, function() { $("#column_3").effect(selectedEffect, options, 450, function() { $("#column_4").effect(selectedEffect, options, 450, callback); }); }); }; // Callback function to bring a hidden box back function callback() { setTimeout(function() { $("#effect").removeAttr("style").hide().fadeIn(); }, 100); }; // Set effect from select menu value $("#column_1").on("click", function() { runEffect1(); return false; }); $("#column_2").on("click", function() { runEffect2(); return false; }); }); }); function myFunction2(e) { test = e; console.log(e); jQuery("#column_2").html(""); jQuery("#column_2").html("<span style='color:#FFFFFF'> GL Accounts </span>"); jQuery("#column_3").html(""); jQuery("#column_3").html("<span style='color:#FFFFFF'> GL Name </span>"); jQuery("#column_4").html(""); jQuery("#column_4").html("<span style='color:#FFFFFF'> GL Balance </span>"); jQuery("#column_5").html(""); for (var prop3 in array0) { jQuery("#column_2").append('<div class="col-md-auto"> <button type="button" id=' + prop3 + ' class="list-group-item" onclick="myFunction4(this.id)">test</button></div>'); jQuery("#column_3").append('<div class="col-md-auto"> <button type="button" id=' + prop3 + ' class="list-group-item" onclick="myFunction4(this.id)">test1</button></div>'); jQuery("#column_4").append('<div class="col-md-auto"> <button type="button" id=' + prop3 + ' class="list-group-item" onclick="myFunction4(this.id)">test2</button></div>'); } for (var prop2 in array17) { jQuery("#column_4").append('<div class="col-md-auto"> <button type="button" id=' + prop2 + ' class="list-group-item" onclick="myFunction2(this.id)">test3</button></div>'); } } function myFunction4(e) { test = e; console.log(e); jQuery("#column_5").html(""); jQuery("#column_5").html("<span style='color:#FFFFFF'> Breakdown </span>"); for (var prop5 in array11) { jQuery("#column_5").append('<div class="col-md-auto"> <button type="button" id=' + prop5 + ' class="list-group-item" onclick="myFunction5(this.id)">test4</button></div>'); } } function myFunction5(e) { test = e; console.log(e); window.open("", "", "width=500,height=500"); } sap.ui.getCore().attachInit(function() { console.log("SAPUI5 modules loaded....") jQuery("#column_1").html(""); jQuery("#column_1").html("<span style='color:#FFFFFF'> Account Group </span>"); for (var prop in array2) { jQuery("#column_1").append('<div class="col-md-auto"> <button type="button" id=' + prop + ' class="list-group-item" onclick="myFunction2(this.id)">test0</button></div>'); } }); 

 @import url(https://fonts.googleapis.com/css?family=Roboto:300); .login-page { width: 360px; padding: 8% 0 0; margin: auto; } .form { position: relative; z-index: 1; background: #FFFFFF; max-width: 360px; margin: 0 auto 100px; padding: 45px; text-align: center; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); } .form input { font-family: "Roboto", sans-serif; outline: 0; background: #f2f2f2; width: 100%; border: 0; margin: 0 0 15px; padding: 15px; box-sizing: border-box; font-size: 14px; } .form button { font-family: "Roboto", sans-serif; text-transform: uppercase; outline: 0; background: #4778b7; width: 100%; border: 0; padding: 15px; color: #FFFFFF; font-size: 14px; -webkit-transition: all 0.3 ease; transition: all 0.3 ease; cursor: pointer; } .form button:hover, .form button:active, .form button:focus { background: #7ac1db; } .form .message { margin: 15px 0 0; color: #b3b3b3; font-size: 12px; } .form .message a { color: #4CAF50; text-decoration: none; } .form .register-form { display: none; } .container { position: relative; z-index: 1; max-width: 300px; margin: 0 auto; } .container:before, .container:after { content: ""; display: block; clear: both; } .container .info { margin: 50px auto; text-align: center; } .container .info h1 { margin: 0 0 15px; padding: 0; font-size: 36px; font-weight: 300; color: #1a1a1a; } .container .info span { color: #4d4d4d; font-size: 12px; } .container .info span a { color: #000000; text-decoration: none; } .container .info span .fa { color: #EF3B3A; } body { background: #4778b7; /* fallback for old browsers */ background: -webkit-linear-gradient(right, #4778b7, #4778b7); background: -moz-linear-gradient(right, #4778b7, #4778b7); background: -o-linear-gradient(right, #4778b7, #4778b7); background: linear-gradient(to left, #4778b7, #4778b7); font-family: "Roboto", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } 

 <html> <head> <meta http-equiv='X-UA-Compatible' content='IE=edge' /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-xx-bindingSyntax="complex" data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_bluecrystal"> </script> </head> <body class='sapUiBody'> <div id='content'></div> <div id="grid" class="container-fluid"> <div class="row no-gutter"> <div class="col-md-2"> <div id="column_1"> <div class="list-group"></div> <div class='col-md-auto'> <button type='button' id=1 class='list-group-item'>test</button> </div> </div> </div> <div class="col-md-2 "> <div id="column_2"> <div class="list-group"></div> </div> </div> <div class="col-md-2 "> <div id="column_3"> <div class="list-group"></div> </div> </div> <div class="col-md-2 "> <div id="column_4"> <div class="list-group"></div> </div> </div> <div class="col-md-2"> <div id="column_5"> <div class="list-group"></div> </div> </div> </div> </div> </body> </html> 

Answer 1

Normally you don't need the following code in your HTML, because they are duplicated

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

And where did you place the js code? The $(document).ready(function(){ one. It must be place after the all of the js library.

Answer 2

it was sap-ui-core.js causing problem; using jQuery noConflict.

$.noConflict();
$(document).ready(function() {
      ...
});