title: jquery load function not invoking spring boot controller to replace thymeleaf template fragment
body: <p>I'm trying to load content into the following fragment. I've confirmed that this fragment works when I do a basic mapping to an html template.</p>
  
  <pre><code>&lt;div id="fbtresult" th:if="${not #lists.isEmpty(fbts)}" th:fragment="fbtList"&gt;
      &lt;h2&gt;Frequent Bought Together List&lt;/h2&gt;
      &lt;table class="table table-striped"&gt;
          &lt;tr&gt;
              &lt;th&gt;Id&lt;/th&gt;
              &lt;th&gt;Main Product Id&lt;/th&gt;
              &lt;th&gt;FBT 1 Product ID &lt;/th&gt;
              &lt;th&gt;FBT 2 Product ID&lt;/th&gt;
              &lt;th&gt;BSR&lt;/th&gt;
              &lt;th&gt;View&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr th:each="fbt : ${fbts}"&gt;
              &lt;td th:text="${fbt.id}"&gt;&lt;a href="/fbt/${fbt.id}"&gt;Id&lt;/a&gt;&lt;/td&gt;
              &lt;td th:text="${fbt?.mainProduct?.asin}"&gt;main product asin&lt;/td&gt;
              &lt;td th:text="${fbt.sproductFbt1 != null} ? ${fbt.sproductFbt1.asin} : ''"&gt;product fbt1 asin&lt;/span&gt;
              &lt;td th:text="${fbt.sproductFbt2 != null} ? ${fbt.sproductFbt2.asin} : ''"&gt;product fbt2 asin&lt;/span&gt;
              &lt;td th:text="${fbt.bsr}"&gt;bsr&lt;/td&gt;        
              &lt;td&gt;&lt;a th:href="${ '/fbt/' + fbt.id}"&gt;View&lt;/a&gt;&lt;/td&gt;
          &lt;/tr&gt;       
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However I'm attempting to use the following query load statement that is within a canvasjs click function. I've confirmed that jquery is loading and the console will log the url on click of the canvasjs chart.</p>
  
  <pre><code>                    click: function (e) {
                          var asin = /*[[${asin}]]*/ 'null';
                          var url = "/FBTChartfbtrequest?fbt=2&amp;asin=" + asin + "&amp;collectdate=" + e.dataPoint.x;
                          console.log(url);
                          $("#fbtresult").load(url);
                      },
  </code></pre>
  
  <p>However the following controller is not being executed by $("#fbtresult").load(url); which is clear from the log.</p>
  
  <pre><code>    @GetMapping(value = "/FBTChartfbtrequest")
          public String FBTChartfbtrequest(@RequestParam("fbt") String fbt,
                  @RequestParam("asin") String asin, @RequestParam("collectdate") String collectdate, Model model) {
              System.out.println("ZZZZ requestFBTCHar with asin " + asin + " and collectdate " + collectdate);
  
  ...
                      model.addAttribute("fbts", fbtService.findByASINInFBT1andDateRange(asin, convertUtilToSql(date), convertUtilToSql(date)));
  ....
              return "results :: fbtList";
          }
  </code></pre>
  
  <p>I've confirmed that I can load a new page with the /FBTChartfbtrequest?fbt=2&amp;asin=" + asin + "&amp;collectdate=" + e.dataPoint.x; url when doing a redirection using window.location.href = url;</p>
  
  <p>my pom.xml</p>
  
  <pre><code>&lt;dependencies&gt;
      &lt;dependency&gt;
          &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
          &lt;artifactId&gt;spring-boot-starter-data-jpa&lt;/artifactId&gt;
      &lt;/dependency&gt;
      &lt;dependency&gt;
          &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
          &lt;artifactId&gt;spring-boot-starter-data-rest&lt;/artifactId&gt;
      &lt;/dependency&gt;
      &lt;dependency&gt;
          &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
          &lt;artifactId&gt;spring-boot-starter-thymeleaf&lt;/artifactId&gt;
      &lt;/dependency&gt;
      &lt;dependency&gt;
          &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
          &lt;artifactId&gt;spring-boot-starter-web&lt;/artifactId&gt;
      &lt;/dependency&gt;
      &lt;dependency&gt;
          &lt;groupId&gt;org.webjars&lt;/groupId&gt;
          &lt;artifactId&gt;bootstrap&lt;/artifactId&gt;
          &lt;version&gt;3.3.4&lt;/version&gt;
      &lt;/dependency&gt;
      &lt;dependency&gt;
          &lt;groupId&gt;org.webjars&lt;/groupId&gt;
          &lt;artifactId&gt;jquery&lt;/artifactId&gt;
          &lt;version&gt;3.1.0&lt;/version&gt;
      &lt;/dependency&gt;
      &lt;dependency&gt;
          &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
          &lt;artifactId&gt;spring-boot-devtools&lt;/artifactId&gt;
          &lt;scope&gt;runtime&lt;/scope&gt;
      &lt;/dependency&gt;
      &lt;dependency&gt;
          &lt;groupId&gt;mysql&lt;/groupId&gt;
          &lt;artifactId&gt;mysql-connector-java&lt;/artifactId&gt;
          &lt;scope&gt;runtime&lt;/scope&gt;
      &lt;/dependency&gt;
      &lt;dependency&gt;
          &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
          &lt;artifactId&gt;spring-boot-starter-security&lt;/artifactId&gt;
      &lt;/dependency&gt;
  
      &lt;dependency&gt;
          &lt;groupId&gt;org.springframework.security&lt;/groupId&gt;
          &lt;artifactId&gt;spring-security-test&lt;/artifactId&gt;
          &lt;scope&gt;test&lt;/scope&gt;
      &lt;/dependency&gt;
  &lt;/dependencies&gt;
  </code></pre>
  
  <p>The <a href="http://localhost:8086/FBTMetricsRequest" rel="nofollow noreferrer">http://localhost:8086/FBTMetricsRequest</a> is visible in the network tab even before i click on the graph and clicking on the graph doesn't make a change in the network view. 
  <a href="https://i.stack.imgur.com/PWBuo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PWBuo.png" alt="Graph and network tab"></a></p>
  
  <p>Any ideas why the jquery load function is not invoking the controller function?</p>