title: ajax in Thymeleaf SpringMVC?
body: <p>How to get fragment in main page using  AJAX in Thymeleaf SpringMVC?</p>
  <p>I am having Spring MVC  and Thymeleaf templating engine. I'm a beginner in Thymeleaf.</p>
  <p>I was wondering how can i use ajax to get part of website on how to do simple Ajax request to controller and in result rendering only a part of a template (fragment).</p>
  <p>I was trying to return the fragment job.html into home.html</p>
  <p>I don't want to use jquery I want to use plain vanilla javascript.</p>
  <p>I think i need to use First clone the desired div Second empty the main div Third append the clone into the main div</p>
  <p>Here is how  my controller look like</p>
  <pre><code>   @GetMapping(&quot;/generalization&quot;)
      public String selectSection(Model model) {
          List&lt;DateasDto&gt; section = generalizationService.getSection();
          model.addAttribute(&quot;section&quot;, section);
          return &quot;home&quot;;
      }
  
      @GetMapping(&quot;/organisations/{id}/general&quot;)
      public String getGeneralSuccess(@PathVariable String id , Model model){
          List&lt;AssessmentDto&gt; gen = generalizationService.getGeneral(id);
          model.addAttribute(&quot;gen&quot; , gen);
          return &quot;Job&quot;;
      }
  </code></pre>
  <p>Here is how my html <strong>home.html</strong> look like</p>
  <pre><code>&lt;body&gt;
  &lt;script type=&quot;text/javascript&quot; th:src=&quot;@{/js/working.js}&quot;&gt;&lt;/script&gt;
  
  &lt;form onsubmit=&quot;getGen(event)&quot; &gt;
  
      &lt;div class=&quot;form-group&quot; &gt;
          &lt;label for=&quot;SelectSection&quot;&gt;Select Section&lt;/label&gt;
          &lt;select  class=&quot;form-control&quot; id=&quot;SelectSection&quot; onchange=&quot;sectionChangeSelected()&quot;&gt;
          &lt;option value=&quot;&quot;&gt;Select section&lt;/option&gt;
          &lt;option th:each=&quot;section: ${section}&quot;
                  th:text=&quot;${section.name}&quot;
                  th:value=&quot;${section.id}&quot;
          &gt;&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
      &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  
  &lt;div id = &quot;table&quot; &gt;&lt;/div&gt;
  
  &lt;div th:replace = &quot;Job.html :: myTable &quot; &gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  <p>here js look like</p>
  <pre><code>    const getGen= (event) =&gt; {
          event.preventDefault()
          console.log(&quot;get assessment called&quot;)
          let id= document.getElementById(&quot;SelectSection&quot;).value;
          console.log(id)
          let url = `/org/subjects/${id}/assessments`
          fetch(url) 
          .then(function() {
              
          })
          .catch(function() {
              
          });
      }
  </code></pre>
  <p>here is how my <strong>Job.html</strong> look like</p>
  <pre><code>&lt;body&gt;
  
  &lt;div th:fragment = &quot;myTable&quot; &gt;
      &lt;table&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;td &gt;Name&lt;/td&gt;
                      &lt;td &gt;Date&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  &lt;tr th:each=&quot;gen : ${gen}&quot;&gt;
                      &lt;td th:text=&quot;${gen.Name}&quot;&gt;&lt;/td&gt;
                      &lt;td th:text=&quot;${gen.Date}&quot;&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  
  </code></pre>