Thymeleaf не отправляет объект в контроллер из HTML, где HTML-элемент создается динамически?

Question

У меня есть элемент HTML, который создается с помощью JavaScript.Я ввел объект Thymeleaf в тот же элемент HTML.Вот мой код js: -

$("#subcategoryNameDiv").append(''+
                         '<div class="form-group margindate">'+
                        '<label class="control-label col-sm-3 datesubscription nowrap">Category Name:</label>'+
                         '<div class="col-sm-9 ">'+
                             '<select id="categorySelect" th:field="${category}" class="date_dropdown date_input form-control" onchange="loadSubcategories()">'+
                             '</select>'+
                        '</div>'+
                     '</div>'+
                       '<div class="form-group margindate" >'+
                        '<label class="control-label col-sm-3 datesubscription nowrap">Subcategory Name:</label>'+
                         '<div class="col-sm-9 ">'+
                            '<select id="subcategorySelect" th:field="*{subcategory}" class="date_dropdown date_input form-control" required>'+
                             '</select>'+
                        '</div>'+
                     '</div>');

Thymeleaf работает правильно при создании обычного HTML-элемента и отправке объекта в контроллер, но согласно требованию нашего проекта этот элемент генерируется при выборе определенной опции.

ПРИМЕЧАНИЕ. - Здесь функция loadSubcategories () работает правильно и добавляет значения в HTML-элемент id = "subcategorySelect".Но после отправки значения "catgory" и "Subcategory" в Spring Boot Controller становятся пустыми.

Answer 1

Вам нужно обработать этот html на стороне сервера, а затем добавить с помощью jquery.

URL для получения данных с использованием ajax

@RequestMapping(value = "/abc", method = RequestMethod.GET, produces = "application/json")
private ResponseBody test( HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse )
{
    Response response = new Response<String>();
    WebContext webContext = new WebContext( httpServletRequest, httpServletResponse, servletContext );



    response.setData( generateTemplate( webContext, viewResolver, "pathTohtmlSection") );
    response.setMessage( "Success" );
    response.setStatus(SUCCESS );

    return response;

}

Создать html в виде строки

  public static String generateTemplate( WebContext ctx, ViewResolver viewResolver, String baseTemplate)
{

    TemplateEngine engine = ( ( ThymeleafViewResolver ) viewResolver ).getTemplateEngine();

    String renderedHtml = engine.process( baseTemplate, ctx );
    return renderedHtml;

}

Теперь используйте jquery следующим образом.

 $.ajax({
  dataType: "json",
  url: "abc",
  data: data,
  success: function(response){
   $("#subcategoryNameDiv").html(response.data);
  };
});