2015-08-24 3 views
1

Я разрабатываю веб-приложение с использованием Spring Framework и Thymeleaf.Динамическая страница html в тимелеафе + Весна на основе выбранной опции в выпадающем меню

Я создал раскрывающееся меню, но я хочу, чтобы на странице появилось что-то еще, когда выбран какой-либо параметр в выпадающем меню. По выбранному я имею в виду, когда нажата кнопка в меню, и ничего больше. Я не имею в виду полную подачу формы.

Я прочитал документы, но не нашел решения.

Любые идеи?

Благодаря

+0

Как я понимаю, что вы хотите сделать это на стороне клиента. Так почему бы вам не попробовать jQuery? [Это] (http://stackoverflow.com/questions/7019096/jquery-dropdown-hide-show-div-based-on-value) может вам помочь. – nmy

+0

О, так мне нужно использовать javascript? У Spring нет такой функции? – Kingamere

ответ

0

Вы ча использовать JS с помощью th:inline как это объяснение на комментарий

JS кода кода

<script th:inline="javascript"> 
    //Declare the URL of RequestMapping to use 
    //Do no change format 

    /*[+ 
    var urlToload = [[@{/path/spring}]]; 
    var anotherUrlToUse = [[@{/another/url?param=}]]; 
    +]*/ 

    //Handle you jquery event    
    $('body').on('click', '.dropdown-menu', function (e) { 
     var t = $(this); 
     //Sending your ajax request 
     $.ajax({ 
      url: urlToload, 
      method: 'POST', 
      data: { 
       optionSelected: t.val() 
      } 
     }) 
     /** 
     * Execute when your request is done 
     * @param {type} data : the page result of your Request     * 
     */ 
     .done(function (data) { 
      $("#receiver").html(data); 
     }) 
     //Execute on fail 
     .fail(function (xhr, ajaxOptions, thrownError) { 
      console.log("ERROR"); 
      //Use anotherUrlToUse with GET METHOD to redirect 
      window.location.replace(anotherUrlToUse+404); 
     }); 
    }); 
</script> 

Контроллер

@RequestMapping(value = "/path/spring", method = RequestMethod.POST) 
public String controllerMethod(Model model, @RequestParam("optionSelected") String optionSelected) { 
    /** 
    * Do your job 
    * Your code 
    */ 
    return "page/result"; 
} 
Смежные вопросы