Hi so i have a school project due the day after tomorrow and i the only problem i have left is the "jquery not found" error. I've being struggling with it for 5 days now and i don't know how the heck to solve it. I'm using srping boot, thymeleaf, html/css/js and jquery for the first time for this project. The code is supposed to show a dynamic service chart and the user is supposed to fill it (you test the html to see it). Here's my code (i copy pasted it from github: https://github.com/caprica/jquery-orgchart ) :
<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Service Chart</title>
<link href="/static/css/jquerysctipttop.css" th:href="@{/css/jquerysctipttop.css}" rel="stylesheet" type="text/css">
<link type="text/css" href="/static/css/jquery.orgchart.css" media="all" rel="stylesheet" th:href="@{/css/jquery.orgchart.css}" />
<Style type="text/css">
body{
background: rgb(52, 73, 94);
font-family: "Alegreya Sans ", sans-serif;
text-align-all: center;
}
h1{
color: white;
text-align: center;
text-transform: uppercase;
font-size: 40px;
}
#orgChart{
width: auto;
height: auto;
}
#orgChartContainer{
/* width: 1500px;
/* height: 500px;*/
overflow: auto;
background: #aef0e1;
}
button{
background: #93cdaa;
margin: 20px auto 20px 40px;
text-align: center;
font-size: 20px;
padding: 10px 10px;
border: 2px solid #143b22;
outline: none;
color: #212d3a;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
button[name='return']{
background: rgba(176, 2, 17, 0.63);
color: white;
}
button:hover{
border-color: #aef0ca;
background: #426a54;
color: white;
margin-bottom: 20px;
}
button[name= 'return']:hover{
border-color: rgb(22, 35, 52);
background: rgba(176, 2, 17, 0.95);
margin-bottom: 20px;
}
</style>
<script type="text/javascript" th:src="@{http://code.jquery.com/jquery-3.5.1.min.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery.min.js}"> </script>
</head>
<body>
<h1 style="margin-top:50px">Fill the chart according to the characteristics
<br> of your new service:</h1>
<a href="AdminMenu.html" th:href="@{/AdminMenu}">
<button name="return">Return</button>
</a>
<form class="box" action="#" method="post" th:action="@{/ModServiceForm}">
<div id="orgChartContainer">
<button type="submit" onclick="alert('Tree saved.')" name="finish">Save Tree</button>
<div id="orgChart">Here</div>
</div>
</form>
<div id="consoleOutput">
</div>
<script type="text/javascript" th:src="@{/js/jquery.orgchart.js}"></script>
<script type="text/javascript">
console.log("I'm inside js.");
var $jq = jQuery.noConflict(true );
let testData = [
{id: 1, name: 'My service',nomResp:'#',prenomResp:'#',contactResp:'#'
,emailResp:'#',cible: '#',datain:'#',dataout:'#',priorite:'#',bdd:'#'
, parent: 0}];
$(document).ready(function(){
console.log("I'm inside the function.");
let org_chart = $("#orgChart").orgChart({
data: testData,
showControls: true,
allowEdit: true,
onAddNode: function (node) {
console.log('Created new node on node ' + node.data.id);
org_chart.newNode(node.data.id);
},
onDeleteNode: function (node) {
console.log('Deleted node ' + node.data.id);
org_chart.deleteNode(node.data.id);
},
onClickNode: function (node) {
console.log('Clicked node ' + node.data.id);
let dataout = org_chart.getData();
$.ajax({
type: "POST",
url: "#",
data: 'dataout=' + dataout,
dataType: "json"
});
console.log('Heres the data so far: (id,name, nomResp, prenomResp,' +
'contact, email, cible, datain, dataout, priorite,' +
'bdd)\n');
for (let i = 0; i < dataout.length; i++) {
let string = "\n" + dataout[i].id + ", " + dataout[i].name + ", " +
dataout[i].nomResp + ", " + dataout[i].prenomResp
+ ", " + dataout[i].emailResp + ", " + dataout[i].contactResp
+ ", " + dataout[i].cible + ", " + dataout[i].datain + ", " +
dataout[i].dataout + ", " + dataout[i].priorite
+ ", " + dataout[i].bdd + ", " + dataout[i].parent + "\n";
console.log(i + "-->" + string + "\n");
}
}
});
console.log("I left the function.");
} );
</script>
</body>
</html>
I put the .min script in the head like some tutorials recommended. I also used $(document).ready to make sure it loads correctly and there was even a chinese tutorial that recommended using var $jq = jQuery.noConflict(true ) This is the error that i keep guetting: ModServiceForm:92 Uncaught ReferenceError: jQuery is not defined at ModServiceForm:92 And when i delete that line (92: var $jq=jquery.noConflict(true)) i get another error saying Uncaught ReferenceError: $ is not defined at ModServiceForm:99 (the line with $ document.ready(function)))
I'm new to this stuff and i really don't know what to do. I'm using IntelliJ IDEA 2021.1.2 (Ultimate Edition)
idk if this will also be needed but here's jquery.orgchart.js file:
(function($) {
$.fn.orgChart = function(options) {
let opts = $.extend({}, $.fn.orgChart.defaults, options);
return new OrgChart($(this), opts);
}
$.fn.orgChart.defaults = {
data: [{id:1, name:'Root',nomResp:'nomResp',prenomResp:'prenomResp',contactResp:'contactResp',emailResp:'emailResp',cible: 'cible',datain:'datain',dataout:'dataout',priorite:'priorite',bdd:'bdd'
, parent: 0}],
showControls: false,
allowEdit: false,
onAddNode: null,
onDeleteNode: null,
onClickNode: null,
newNodeText: 'Add Child'
};
function OrgChart($container, opts){
let data = opts.data;
let nodes = {};
let rootNodes = [];
this.opts = opts;
// this.$container = $container;
let self = this;
this.draw = function(){
$container.empty().append(rootNodes[0].render(opts));
$container.find('.node').click(function(){
if(self.opts.onClickNode !== null){
self.opts.onClickNode(nodes[$(this).attr('node-id')]);
}
});
if(opts.allowEdit){
$container.find('.node h2').click(function(e){
let thisId = $(this).parent().attr('node-id');
self.startEdit(thisId);
e.stopPropagation();
});
}
// add "add button" listener
$container.find('.org-add-button').click(function(e){
let thisId = $(this).parent().attr('node-id');
if(self.opts.onAddNode !== null){
self.opts.onAddNode(nodes[thisId]);
}
else{
self.newNode(thisId);
}
e.stopPropagation();
});
$container.find('.org-del-button').click(function(e){
let thisId = $(this).parent().attr('node-id');
if(self.opts.onDeleteNode !== null){
self.opts.onDeleteNode(nodes[thisId]);
}
else{
self.deleteNode(thisId);
}
e.stopPropagation();
});
}
this.startEdit = function(id){
let inputElement = $('<input class="org-input" placeholder="Name" type="text" value="'+nodes[id].data.name+'"/>' );
let inputNomResp = $('<input class="org-input" placeholder="Nom Responsable" type="text" value="'+nodes[id].data.nomResp+'"/>' );
let inputPrenomResp = $('<input class="org-input" placeholder="Prenom Responsable" type="text" value="'+nodes[id].data.prenomResp+'"/>' );
let inputEmailResp = $('<input class="org-input" placeholder="Email Responsable" type="email" value="'+nodes[id].data.emailResp+'"/>' );
let inputContactResp = $('<input class="org-input" placeholder="Contact Responsable" type="text" value="'+nodes[id].data.contactResp+'"/>' );
let inputCible = $('<input class="org-input" placeholder="Cible" type="text" value="'+nodes[id].data.cible+'"/>' );
let inputDatain = $('<input class="org-input" placeholder="Data in" type="text" value="'+nodes[id].data.datain+'"/>' );
let inputDataout = $('<input class="org-input" placeholder="Data out" type="text" value="'+nodes[id].data.dataout+'"/>' );
let inputPriorite = $('<input class="org-input" placeholder="Priorité" type="text" value="'+nodes[id].data.priorite+'"/>' );
let inputBDD = $('<input class="org-input" placeholder="BDD" type="text" value="'+nodes[id].data.bdd+'"/>' );
$container.find('div[node-id='+id+'] h2[id="name"]').replaceWith(inputElement);
$container.find('div[node-id='+id+'] h2[id="nomResp"]').replaceWith(inputNomResp);
$container.find('div[node-id='+id+'] h2[id="prenomResp"]').replaceWith(inputPrenomResp);
$container.find('div[node-id='+id+'] h2[id="email"]').replaceWith(inputEmailResp);
$container.find('div[node-id='+id+'] h2[id="contact"]').replaceWith(inputContactResp);
$container.find('div[node-id='+id+'] h2[id="cible"]').replaceWith(inputCible);
$container.find('div[node-id='+id+'] h2[id="datain"]').replaceWith(inputDatain);
$container.find('div[node-id='+id+'] h2[id="dataout"]').replaceWith(inputDataout);
$container.find('div[node-id='+id+'] h2[id="priorite"]').replaceWith(inputPriorite);
$container.find('div[node-id='+id+'] h2[id="bdd"]').replaceWith(inputBDD);
let commitChange = function(){
let h2Element = $('<h2 id="name">'+nodes[id].data.name+'</h2>');
let h2ElementnomResp= $('<h2 id="nomResp">'+nodes[id].data.nomResp+'</h>');
let h2ElementprenomResp= $('<h2 id="prenomResp">'+nodes[id].data.prenomResp+'</h2>');
let h2ElementcontactResp= $('<h2 id="contact">'+nodes[id].data.contactResp+'</h2>');
let h2ElementemailResp= $('<h2 id="email">'+nodes[id].data.emailResp+'</h2>');
let h2Elementcible= $('<h2 id="cible">'+nodes[id].data.cible+'</h2>');
let h2Elementdatain= $('<h2 id="datain">'+nodes[id].data.datain+'</h2>');
let h2Elementdataout= $('<h2 id="dataout">'+nodes[id].data.dataout+'</h2>');
let h2Elementpriorite= $('<h2 id="priorite">'+nodes[id].data.priorite+'</h2>');
let h2Elementbdd= $('<h2 id="bdd">'+nodes[id].data.bdd+'</h2>');
if(opts.allowEdit){
h2Element.click(function(){
self.startEdit(id);
})
h2ElementnomResp.click(function(){
self.startEdit(id);
})
h2ElementprenomResp.click(function(){
self.startEdit(id);
})
h2ElementemailResp.click(function(){
self.startEdit(id);
})
h2ElementcontactResp.click(function(){
self.startEdit(id);
})
h2Elementcible.click(function(){
self.startEdit(id);
})
h2Elementdatain.click(function(){
self.startEdit(id);
})
h2Elementdataout.click(function(){
self.startEdit(id);
})
h2Elementpriorite.click(function(){
self.startEdit(id);
})
h2Elementbdd.click(function(){
self.startEdit(id);
})
}
inputElement.replaceWith(h2Element);
inputNomResp.replaceWith(h2ElementnomResp);
inputPrenomResp.replaceWith(h2ElementprenomResp);
inputContactResp.replaceWith(h2ElementcontactResp);
inputEmailResp.replaceWith(h2ElementemailResp);
inputCible.replaceWith(h2Elementcible);
inputDatain.replaceWith(h2Elementdatain);
inputDataout.replaceWith(h2Elementdataout);
inputPriorite.replaceWith(h2Elementpriorite);
inputBDD.replaceWith(h2Elementbdd);
}
/*inputElement.focus();
inputNomResp.focus();
inputPrenomResp.focus();
inputContactResp.focus();
inputEmailResp.focus();
inputCible.focus();
inputDatain.focus();
inputDataout.focus();
inputPriorite.focus();
inputBDD.focus();*/
inputElement.keyup(function(event){
if(event.which === 13){
commitChange();
}
else{
nodes[id].data.name = inputElement.val();
}
});
inputElement.blur(function(){
commitChange();
})
inputNomResp.keyup(function(event){
if(event.which === 13){
commitChange();
}
else{
nodes[id].data.nomResp = inputNomResp.val();
}
});
inputNomResp.blur(function(){
commitChange();
})
inputPrenomResp.keyup(function(event){
if(event.which === 13){
commitChange();
}
else{
nodes[id].data.prenomResp = inputPrenomResp.val();
}
});
inputPrenomResp.blur(function(){
commitChange();
})
inputContactResp.keyup(function(event){
if(event.which === 13){
commitChange();
}
else{
nodes[id].data.contactResp = inputContactResp.val();
}
});
inputContactResp.blur(function(){
commitChange();
})
inputEmailResp.keyup(function(event){
if(event.which === 13){
commitChange();
}
else{
nodes[id].data.emailResp = inputEmailResp.val();
}
});
inputEmailResp.blur(function(){
commitChange();
})
inputCible.keyup(function(event){
if(event.which === 13){
commitChange();
}
else{
nodes[id].data.cible = inputCible.val();
}
});
inputCible.blur(function(){
commitChange();
})
inputDatain.keyup(function(event){
if(event.which === 13){
commitChange();
}
else{
nodes[id].data.datain = inputDatain.val();
}
});
inputDatain.blur(function(){
commitChange();
})
inputDataout.keyup(function(event){
if(event.which === 13){
commitChange();
}
else{
nodes[id].data.dataout = inputDataout.val();
}
});
inputDataout.blur(function(){
commitChange();
})
inputPriorite.keyup(function(event){
if(event.which === 13){
commitChange();
}
else{
nodes[id].data.priorite = inputPriorite.val();
}
});
inputPriorite.blur(function(){
commitChange();
})
inputBDD.keyup(function(event){
if(event.which === 13){
commitChange();
}
else{
nodes[id].data.bdd = inputBDD.val();
}
});
inputBDD.blur(function(){
commitChange();
})
}
this.newNode = function(parentId){
let nextId = Object.keys(nodes).length;
while(nextId in nodes){
nextId++;
}
self.addNode({id: nextId, name: 'service x',nomResp:'',prenomResp:'',contactResp:'',emailResp:'',cible: '',datain:'',dataout:'',priorite:'',bdd:''
, parent: parentId});
}
this.addNode = function(data){
let newNode = new Node(data);
nodes[data.id] = newNode;
nodes[data.parent].addChild(newNode);
self.draw();
self.startEdit(data.id);
}
this.deleteNode = function(id){
for(let i=0;i<nodes[id].children.length;i++){
self.deleteNode(nodes[id].children[i].data.id);
}
nodes[nodes[id].data.parent].removeChild(id);
delete nodes[id];
self.draw();
}
this.getData = function(){
let outData = [];
for(let i in nodes){
outData.push(nodes[i].data);
}
return outData;
}
// constructor
for(let i in data){
nodes[data[i].id] = new Node(data[i]);
}
// generate parent child tree
for( let i in nodes){
if(nodes[i].data.parent === 0){
rootNodes.push(nodes[i]);
}
else{
nodes[nodes[i].data.parent].addChild(nodes[i]);
}
}
// draw org chart
$container.addClass('orgChart');
self.draw();
}
function Node(data){
this.data = data;
this.children = [];
let self = this;
this.addChild = function(childNode){
this.children.push(childNode);
}
this.removeChild = function(id){
for(let i=0;i<self.children.length;i++){
if(self.children[i].data.id === id){
self.children.splice(i,1);
return;
}
}
}
this.render = function(opts){
let childLength = self.children.length,
mainTable;
mainTable = "<table cellpadding='0' cellspacing='0' border='0'>";
let nodeColspan = childLength>0?2*childLength:2;
mainTable += "<tr><td colspan='"+nodeColspan+"'>"+self.formatNode(opts)+"</td></tr>";
if(childLength > 0){
let downLineTable = "<table cellpadding='0' cellspacing='0' border='0'><tr class='lines x'><td class='line left half'></td><td class='line right half'></td></table>";
mainTable += "<tr class='lines'><td colspan='"+childLength*2+"'>"+downLineTable+'</td></tr>';
let linesCols = '';
for(let i=0;i<childLength;i++){
if(childLength===1){
linesCols += "<td class='line left half'></td>"; // keep vertical lines aligned if there's only 1 child
}
else if(i===0){
linesCols += "<td class='line left'></td>"; // the first cell doesn't have a line in the top
}
else{
linesCols += "<td class='line left top'></td>";
}
if(childLength===1){
linesCols += "<td class='line right half'></td>";
}
else if(i===childLength-1){
linesCols += "<td class='line right'></td>";
}
else{
linesCols += "<td class='line right top'></td>";
}
}
mainTable += "<tr class='lines v'>"+linesCols+"</tr>";
mainTable += "<tr>";
for(let i in self.children){
mainTable += "<td colspan='2'>"+self.children[i].render(opts)+"</td>";
}
mainTable += "</tr>";
}
mainTable += '</table>';
return mainTable;
}
this.formatNode = function(opts){
let nameString = '',
nomRespString = '',
prenomRespString = '',
emailString = '',
contactString = '',
cibleString = '',
datainString = '',
dataoutString = '',
priorteString = '',
bddString = '',
descString = '';
let buttonsHtml;
if(typeof data.name !== 'undefined'){
nameString = '<h2 id="name">'+self.data.name+'</h2>';
}
if(typeof data.nomResp !== 'undefined'){
nomRespString = '<h2 id="nomResp">'+self.data.nomResp+'</h>';
}
if(typeof data.prenomResp !== 'undefined'){
prenomRespString = '<h2 id="prenomResp">'+self.data.prenomResp+'</h2>';
}
if(typeof data.emailResp !== 'undefined'){
emailString = '<h2 id="email">'+self.data.emailResp+'</h2>';
}
if(typeof data.contactResp !== 'undefined'){
contactString = '<h2 id="contact">'+self.data.contactResp+'</h2>';
}
if(typeof data.cible !== 'undefined'){
cibleString = '<h2 id="cible">'+self.data.cible+'</h2>';
}
if(typeof data.datain !== 'undefined'){
datainString = '<h2 id="datain">'+self.data.datain+'</h2>';
}
if(typeof data.dataout !== 'undefined'){
dataoutString = '<h2 id="dataout">'+self.data.dataout+'</h2>';
}
if(typeof data.priorite !== 'undefined'){
priorteString = '<h2 id="priorite">'+self.data.priorite+'</h2>';
}
if(typeof data.bdd !== 'undefined'){
bddString = '<h2 id="bdd">'+self.data.bdd+'</h2>';
}
if(typeof data.description !== 'undefined'){
descString = '<p>'+self.data.description+'</p>';
}
if(opts.showControls){
buttonsHtml = "<div class='org-add-button'>"+opts.newNodeText+"</div><div class='org-del-button'></div>";
}
else{
buttonsHtml = '';
}
return "<div class='node' node-id='"+this.data.id+"'>"+nameString+nomRespString
+prenomRespString+contactString+emailString+cibleString+datainString
+dataoutString+priorteString+bddString+descString+ buttonsHtml+"</div>";
}
}
})(jQuery);
I really am in a hurry this is the fifth day i just decided to post on stack and try out my luck
Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW
Comments
Post a Comment