title: Uncaught ReferenceError: jQuery is not defined (Thymeleaf)
body: <p>Hi so i have a school project the only problem i have left is the &quot;jquery not found&quot; 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: <a href="https://github.com/caprica/jquery-orgchart" rel="nofollow noreferrer">https://github.com/caprica/jquery-orgchart</a> ) :</p>
  <pre><code>&lt;!DOCTYPE html&gt;
      &lt;!--suppress ALL --&gt;
      &lt;html lang=&quot;en&quot; xmlns:th=&quot;https://www.thymeleaf.org&quot;&gt;
      &lt;head&gt;
          &lt;meta charset=&quot;UTF-8&quot;&gt;
          &lt;title&gt;Service Chart&lt;/title&gt;
      
          &lt;link href=&quot;/static/css/jquerysctipttop.css&quot; th:href=&quot;@{/css/jquerysctipttop.css}&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;
          &lt;link type=&quot;text/css&quot; href=&quot;/static/css/jquery.orgchart.css&quot; media=&quot;all&quot; rel=&quot;stylesheet&quot; th:href=&quot;@{/css/jquery.orgchart.css}&quot; /&gt;
          &lt;Style type=&quot;text/css&quot;&gt;
              body{
                  background: rgb(52, 73, 94);
                  font-family: &quot;Alegreya Sans &quot;, 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;
              }
      
          &lt;/style&gt;
      
          &lt;script type=&quot;text/javascript&quot; th:src=&quot;@{http://code.jquery.com/jquery-3.5.1.min.js}&quot;&gt;&lt;/script&gt;
          &lt;script type=&quot;text/javascript&quot; th:src=&quot;@{/js/jquery.min.js}&quot;&gt; &lt;/script&gt;
      
      &lt;/head&gt;
      
      &lt;body&gt;
          &lt;h1 style=&quot;margin-top:50px&quot;&gt;Fill the chart according to the characteristics
              &lt;br&gt; of your new service:&lt;/h1&gt;
      
          &lt;a href=&quot;AdminMenu.html&quot; th:href=&quot;@{/AdminMenu}&quot;&gt;
              &lt;button name=&quot;return&quot;&gt;Return&lt;/button&gt;
          &lt;/a&gt;
      
          &lt;form class=&quot;box&quot; action=&quot;#&quot; method=&quot;post&quot; th:action=&quot;@{/ModServiceForm}&quot;&gt;
              &lt;div id=&quot;orgChartContainer&quot;&gt;
                  &lt;button type=&quot;submit&quot; onclick=&quot;alert('Tree saved.')&quot; name=&quot;finish&quot;&gt;Save Tree&lt;/button&gt;
                  &lt;div id=&quot;orgChart&quot;&gt;Here&lt;/div&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      
          &lt;div id=&quot;consoleOutput&quot;&gt;
          &lt;/div&gt;
      
          &lt;script type=&quot;text/javascript&quot; th:src=&quot;@{/js/jquery.orgchart.js}&quot;&gt;&lt;/script&gt;
          &lt;script type=&quot;text/javascript&quot;&gt;
              console.log(&quot;I'm inside js.&quot;);
              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(&quot;I'm inside the function.&quot;);
                  let org_chart = $(&quot;#orgChart&quot;).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: &quot;POST&quot;,
                              url: &quot;#&quot;,
                              data: 'dataout=' + dataout,
                              dataType: &quot;json&quot;
                          });
      
      
                          console.log('Heres the data so far: (id,name, nomResp, prenomResp,' +
                              'contact, email, cible, datain, dataout, priorite,' +
                              'bdd)\n');
      
                          for (let i = 0; i &lt; dataout.length; i++) {
                              let string = &quot;\n&quot; + dataout[i].id + &quot;, &quot; + dataout[i].name + &quot;, &quot; +
                                  dataout[i].nomResp + &quot;, &quot; + dataout[i].prenomResp
                                  + &quot;, &quot; + dataout[i].emailResp + &quot;, &quot; + dataout[i].contactResp
                                  + &quot;, &quot; + dataout[i].cible + &quot;, &quot; + dataout[i].datain + &quot;, &quot; +
                                  dataout[i].dataout + &quot;, &quot; + dataout[i].priorite
                                  + &quot;, &quot; + dataout[i].bdd + &quot;, &quot; + dataout[i].parent + &quot;\n&quot;;
      
                              console.log(i + &quot;--&gt;&quot; + string + &quot;\n&quot;);
                          }
                      }
                  });
                  console.log(&quot;I left the function.&quot;);
              } );
      
      
          &lt;/script&gt;
      
      
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  <p>I put the .min script in the head like some tutorials recommended. I also used <em>$(document).ready</em> to make sure it loads correctly and there was even a chinese tutorial that recommended using <em>var $jq = jQuery.noConflict(true )</em>
  This is the error that i keep guetting:
  <strong><code>ModServiceForm:92 Uncaught ReferenceError: jQuery is not defined at ModServiceForm:92</code></strong>
  And when i delete that line <em>(92: var $jq=jquery.noConflict(true))</em> i get another error saying <strong><code>Uncaught ReferenceError: $ is not defined at ModServiceForm:99</code></strong> (the line with $ document.ready(function)))</p>
  <p>I'm new to this stuff and i really don't know what to do. I'm using <strong>IntelliJ IDEA 2021.1.2 (Ultimate Edition)</strong></p>
  <p>idk if this will also be needed but here's jquery.orgchart.js file:</p>
  <pre><code>(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 &quot;add button&quot; 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 = $('&lt;input class=&quot;org-input&quot; placeholder=&quot;Name&quot; type=&quot;text&quot; value=&quot;'+nodes[id].data.name+'&quot;/&gt;' );
              let inputNomResp = $('&lt;input class=&quot;org-input&quot; placeholder=&quot;Nom Responsable&quot; type=&quot;text&quot; value=&quot;'+nodes[id].data.nomResp+'&quot;/&gt;' );
              let inputPrenomResp = $('&lt;input class=&quot;org-input&quot; placeholder=&quot;Prenom Responsable&quot; type=&quot;text&quot; value=&quot;'+nodes[id].data.prenomResp+'&quot;/&gt;' );
              let inputEmailResp = $('&lt;input class=&quot;org-input&quot; placeholder=&quot;Email Responsable&quot; type=&quot;email&quot; value=&quot;'+nodes[id].data.emailResp+'&quot;/&gt;' );
              let inputContactResp = $('&lt;input class=&quot;org-input&quot; placeholder=&quot;Contact Responsable&quot; type=&quot;text&quot; value=&quot;'+nodes[id].data.contactResp+'&quot;/&gt;' );
              let inputCible = $('&lt;input class=&quot;org-input&quot; placeholder=&quot;Cible&quot; type=&quot;text&quot; value=&quot;'+nodes[id].data.cible+'&quot;/&gt;' );
              let inputDatain = $('&lt;input class=&quot;org-input&quot; placeholder=&quot;Data in&quot; type=&quot;text&quot; value=&quot;'+nodes[id].data.datain+'&quot;/&gt;' );
              let inputDataout = $('&lt;input class=&quot;org-input&quot; placeholder=&quot;Data out&quot; type=&quot;text&quot; value=&quot;'+nodes[id].data.dataout+'&quot;/&gt;' );
              let inputPriorite = $('&lt;input class=&quot;org-input&quot; placeholder=&quot;Priorité&quot; type=&quot;text&quot; value=&quot;'+nodes[id].data.priorite+'&quot;/&gt;' );
              let inputBDD = $('&lt;input class=&quot;org-input&quot; placeholder=&quot;BDD&quot; type=&quot;text&quot; value=&quot;'+nodes[id].data.bdd+'&quot;/&gt;' );
  
              $container.find('div[node-id='+id+'] h2[id=&quot;name&quot;]').replaceWith(inputElement);
              $container.find('div[node-id='+id+'] h2[id=&quot;nomResp&quot;]').replaceWith(inputNomResp);
              $container.find('div[node-id='+id+'] h2[id=&quot;prenomResp&quot;]').replaceWith(inputPrenomResp);
              $container.find('div[node-id='+id+'] h2[id=&quot;email&quot;]').replaceWith(inputEmailResp);
              $container.find('div[node-id='+id+'] h2[id=&quot;contact&quot;]').replaceWith(inputContactResp);
              $container.find('div[node-id='+id+'] h2[id=&quot;cible&quot;]').replaceWith(inputCible);
              $container.find('div[node-id='+id+'] h2[id=&quot;datain&quot;]').replaceWith(inputDatain);
              $container.find('div[node-id='+id+'] h2[id=&quot;dataout&quot;]').replaceWith(inputDataout);
              $container.find('div[node-id='+id+'] h2[id=&quot;priorite&quot;]').replaceWith(inputPriorite);
              $container.find('div[node-id='+id+'] h2[id=&quot;bdd&quot;]').replaceWith(inputBDD);
  
              let commitChange = function(){
                  let h2Element = $('&lt;h2 id=&quot;name&quot;&gt;'+nodes[id].data.name+'&lt;/h2&gt;');
                  let h2ElementnomResp= $('&lt;h2 id=&quot;nomResp&quot;&gt;'+nodes[id].data.nomResp+'&lt;/h&gt;');
                  let h2ElementprenomResp= $('&lt;h2 id=&quot;prenomResp&quot;&gt;'+nodes[id].data.prenomResp+'&lt;/h2&gt;');
                  let h2ElementcontactResp= $('&lt;h2 id=&quot;contact&quot;&gt;'+nodes[id].data.contactResp+'&lt;/h2&gt;');
                  let h2ElementemailResp= $('&lt;h2 id=&quot;email&quot;&gt;'+nodes[id].data.emailResp+'&lt;/h2&gt;');
                  let h2Elementcible= $('&lt;h2 id=&quot;cible&quot;&gt;'+nodes[id].data.cible+'&lt;/h2&gt;');
                  let h2Elementdatain= $('&lt;h2 id=&quot;datain&quot;&gt;'+nodes[id].data.datain+'&lt;/h2&gt;');
                  let h2Elementdataout= $('&lt;h2 id=&quot;dataout&quot;&gt;'+nodes[id].data.dataout+'&lt;/h2&gt;');
                  let h2Elementpriorite= $('&lt;h2 id=&quot;priorite&quot;&gt;'+nodes[id].data.priorite+'&lt;/h2&gt;');
                  let h2Elementbdd= $('&lt;h2 id=&quot;bdd&quot;&gt;'+nodes[id].data.bdd+'&lt;/h2&gt;');
  
                  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&lt;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&lt;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 = &quot;&lt;table cellpadding='0' cellspacing='0' border='0'&gt;&quot;;
              let nodeColspan = childLength&gt;0?2*childLength:2;
              mainTable += &quot;&lt;tr&gt;&lt;td colspan='&quot;+nodeColspan+&quot;'&gt;&quot;+self.formatNode(opts)+&quot;&lt;/td&gt;&lt;/tr&gt;&quot;;
  
              if(childLength &gt; 0){
                  let downLineTable = &quot;&lt;table cellpadding='0' cellspacing='0' border='0'&gt;&lt;tr class='lines x'&gt;&lt;td class='line left half'&gt;&lt;/td&gt;&lt;td class='line right half'&gt;&lt;/td&gt;&lt;/table&gt;&quot;;
                  mainTable += &quot;&lt;tr class='lines'&gt;&lt;td colspan='&quot;+childLength*2+&quot;'&gt;&quot;+downLineTable+'&lt;/td&gt;&lt;/tr&gt;';
  
                  let linesCols = '';
                  for(let i=0;i&lt;childLength;i++){
                      if(childLength===1){
                          linesCols += &quot;&lt;td class='line left half'&gt;&lt;/td&gt;&quot;;    // keep vertical lines aligned if there's only 1 child
                      }
                      else if(i===0){
                          linesCols += &quot;&lt;td class='line left'&gt;&lt;/td&gt;&quot;;     // the first cell doesn't have a line in the top
                      }
                      else{
                          linesCols += &quot;&lt;td class='line left top'&gt;&lt;/td&gt;&quot;;
                      }
  
                      if(childLength===1){
                          linesCols += &quot;&lt;td class='line right half'&gt;&lt;/td&gt;&quot;;
                      }
                      else if(i===childLength-1){
                          linesCols += &quot;&lt;td class='line right'&gt;&lt;/td&gt;&quot;;
                      }
                      else{
                          linesCols += &quot;&lt;td class='line right top'&gt;&lt;/td&gt;&quot;;
                      }
                  }
                  mainTable += &quot;&lt;tr class='lines v'&gt;&quot;+linesCols+&quot;&lt;/tr&gt;&quot;;
  
                  mainTable += &quot;&lt;tr&gt;&quot;;
                  for(let i in self.children){
                      mainTable += &quot;&lt;td colspan='2'&gt;&quot;+self.children[i].render(opts)+&quot;&lt;/td&gt;&quot;;
                  }
                  mainTable += &quot;&lt;/tr&gt;&quot;;
              }
              mainTable += '&lt;/table&gt;';
              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 = '&lt;h2 id=&quot;name&quot;&gt;'+self.data.name+'&lt;/h2&gt;';
              }
              if(typeof data.nomResp !== 'undefined'){
                  nomRespString = '&lt;h2 id=&quot;nomResp&quot;&gt;'+self.data.nomResp+'&lt;/h&gt;';
              }
              if(typeof data.prenomResp !== 'undefined'){
                  prenomRespString = '&lt;h2 id=&quot;prenomResp&quot;&gt;'+self.data.prenomResp+'&lt;/h2&gt;';
              }
              if(typeof data.emailResp !== 'undefined'){
                  emailString = '&lt;h2 id=&quot;email&quot;&gt;'+self.data.emailResp+'&lt;/h2&gt;';
              }
              if(typeof data.contactResp !== 'undefined'){
                  contactString = '&lt;h2 id=&quot;contact&quot;&gt;'+self.data.contactResp+'&lt;/h2&gt;';
              }
              if(typeof data.cible !== 'undefined'){
                  cibleString = '&lt;h2 id=&quot;cible&quot;&gt;'+self.data.cible+'&lt;/h2&gt;';
              }
              if(typeof data.datain !== 'undefined'){
                  datainString = '&lt;h2 id=&quot;datain&quot;&gt;'+self.data.datain+'&lt;/h2&gt;';
              }
              if(typeof data.dataout !== 'undefined'){
                  dataoutString = '&lt;h2 id=&quot;dataout&quot;&gt;'+self.data.dataout+'&lt;/h2&gt;';
              }
              if(typeof data.priorite !== 'undefined'){
                  priorteString = '&lt;h2  id=&quot;priorite&quot;&gt;'+self.data.priorite+'&lt;/h2&gt;';
              }
              if(typeof data.bdd !== 'undefined'){
                  bddString = '&lt;h2 id=&quot;bdd&quot;&gt;'+self.data.bdd+'&lt;/h2&gt;';
              }
              if(typeof data.description !== 'undefined'){
                  descString = '&lt;p&gt;'+self.data.description+'&lt;/p&gt;';
              }
              if(opts.showControls){
                  buttonsHtml = &quot;&lt;div class='org-add-button'&gt;&quot;+opts.newNodeText+&quot;&lt;/div&gt;&lt;div class='org-del-button'&gt;&lt;/div&gt;&quot;;
              }
              else{
                  buttonsHtml = '';
              }
              return &quot;&lt;div class='node' node-id='&quot;+this.data.id+&quot;'&gt;&quot;+nameString+nomRespString
                  +prenomRespString+contactString+emailString+cibleString+datainString
                  +dataoutString+priorteString+bddString+descString+ buttonsHtml+&quot;&lt;/div&gt;&quot;;
          }
      }
  
  })(jQuery);
  </code></pre>