How to submit selected items only from jQuery-ui selectable to java spring controller

882 views Asked by At

I have working controller and jsp with form which submits all elements of some list back to controller.

I would like to submit only selected items of jQuery-ui selectable to spring controller.

My .jsp looks like this:

<html>
  <head>
    ...
    <!-- jQuery rference -->
    <script src="<c:url value="/resources/jquery-2.1.1.js" />"></script>
    <!-- jQuery-ui reference -->
    <script src="<c:url value="/resources/jquery-ui-1.11.2.custom/jquery-ui.js" />"></script>
    <script>
      $(function() {$("#selectable").selectable();});       
    </script>
  </head>
  <body>
    ...
    <!-- context path -->
    <c:set var="contextPath" value="${pageContext.request.contextPath}" />

    <form:from action="${contextPath}/user/categories/delete" method="POST" modelAttribute="categoryList">
      <input type="submit" value="Delete Selected" />
      <ol id="selectable">
        <c:forEach items="${categoryList.catList}" var="category" varStatus="status">
          <li class="ui-widget-content" value="${category}">${category.name}</li>
          <input type="hidden" name="catList[${status.index}].id" value="${category.id}" />
          <input type="hidden" name="catList[${status.index}].name" value="${category.name}" />
        </c:forEach>
      </ol>
    </form:form>
  </body>
</html>

And here is controller:

@Controller
public class CategoriesController {

 @Autowired
 private CategoryDetailService categoryDetailService;

 @RequestMapping("user/categories/delete")
public String deleteCategory(@ModelAttribute("categoryList") CategoryList categoryList) {
    //do something
    return "redirect:/user/categories";
}

Is there a way to submit only selected items back to controller?

2

There are 2 answers

0
Miljac On BEST ANSWER

After reading a lot about jQuery and JSTL best thing I came up with is adding jQuery function which clears unselected dom elements. I have used empty function, but .remove() also does the trick.

$(function() {
    $("#categorySubmit").button().click(function(event) {
        $(function() {
            $("#selectable li:not(.ui-selected)", this).each(function() {
                $(this).empty();
            });
        });
    });
});

where "#categorySubmit" is id given to submit button with name "Delete category"

You have to be careful tough, because only elements with index greater than last selected element are removed, elements with lower index which are not selected have property values set to null (or 0), for both .empty() and .remove().

0
srikanth arroju On

Add a hidden variable in Ui and append selected values to that hidden variable and in your controller read the value of hidden variable after submit.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Selectable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">

  <style>
    #feedback { font-size: 1.4em; }
    #selectable .ui-selecting { background: #FECA40; }
    #selectable .ui-selected { background: #F39814; color: white; }
    #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
  </style>

  <script>

  $(function() {
      $( "#selectable" ).selectable({
         selected: function() {
            $( ".ui-selected", this ).each(function() {
                var hdnValue = $('#hdnFieldName').val();
                var selectedValue=$(this).text() ;
                if(hdnValue!='') {
                    $('#hdnFieldName').val(hdnValue +','+selectedValue);
                }
                alert(hdnValue);
            });
         }
      });
   });
  </script>

</head>
<body>
    <form action="${contextPath}/user/categories/delete" method="POST" >
      <input type="submit" value="Delete Selected" />

      <ol id="selectable">
        <li class="ui-widget-content">Item 1</li>
        <li class="ui-widget-content">Item 2</li>
        <li class="ui-widget-content">Item 3</li>
        <li class="ui-widget-content">Item 4</li>
        <li class="ui-widget-content">Item 5</li>
        <li class="ui-widget-content">Item 6</li>
        <li class="ui-widget-content">Item 7</li>
      </ol>

      <input type="hidden" id="hdnFieldName"/>
  </form>
</body>
</html>