0
Ich konstruiere eine Baumansicht, die aufgrund der Schaltflächen, die der Benutzer in der vorherigen Spalte klickt, herausgleitet. Ich bekomme diesen Fehler, wenn ich auf die erste Spalte der Tasten klicke:jQuery-Animation funktioniert nicht mit SAPUI5
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)
Wie kann ich es beheben? Diese Funktionen funktionierten, wenn ich Vanilla-JavaScript verwendete und ohne dass SAPUI5 importiert wurde, aber die Verwendung von jQuery führt nun zu Problemen. Ich muss SAPUI5 mit jQuery verwenden. Außerdem funktioniert das Snippet aufgrund des Hinzufügens von SAPUI5 nicht.
$(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>