mardi 6 décembre 2016

How to create checkboxes in Spring MVC? Help check my code?

New to coding here. I'm creating a shopping list web app using Java, HTML, CSS, JS and Spring and have been having major trouble with creating my checkboxes. I've tried everything from simple tutorials that used only HTML and JavaScript to using Java and Spring. I've spent four days on this and so far I've had no luck. I'm having errors in my latest code from a tutorial found here that appears like it should work if I had some stuff right and no errors. Could someone please tell me what I'm doing wrong?

I'll try to answer as many questions as possible.

Checkbox.java:

import org.hibernate.validator.constraints.NotEmpty;

@NotEmpty
private List listOfLists;


public List getListOfLists() {
    return listOfLists;
}

public void setListOfLists(List listOfLists) {
    this.listOfLists = listOfLists;
}

CheckboxController:

import java.awt.Checkbox;
import java.awt.List;
import java.util.ArrayList;
import java.util.Map;

import javax.validation.Valid;

import org.springframework.stereotype.Controller;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class CheckboxController {

    ModelAndView mav = null;
    @SuppressWarnings("unchecked")
    @ModelAttribute("listOfLists")
    public List getListOfLists()
    {
        ArrayList listOfLists = new ArrayList();
        listOfLists.add("Football");
        return listOfLists;
    }

    @SuppressWarnings("unchecked")
    @RequestMapping("/ListOfLists/")
    public String initializeForm(Map model)
    {
        Checkbox cb = new Checkbox();
        model.put("cb",cb);
        return "/ListOfLists";

    }
    @RequestMapping("/ListOfLists/")
    public String processForm(@Valid @ModelAttribute("cb") Checkbox cb,BindingResult result)
    {
        if(result.hasErrors())
        {
            return "/ListOfLists";
        }
        else
        {

            return "/ListOfLists";
        }

ListOfList.html:

<!DOCTYPE HTML>
<html xmlns:th="http://ift.tt/wfNV60"
        xmlns:layout="http://ift.tt/1nWSSl4"
        layout:decorator="layouts/basic">
<link rel="stylesheet" th:href="@{/http://ift.tt/2ggU5Ud}" />
<head>
<title>Shopping Lists</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
{
        border: 1px solid black;
        border-collapse: collapse;
        padding: 15px;
}

.strikethrough:checked+.strikeThis {
        text-decoration: line-through
} 

#list{
  margin: 10px 5px;
}

#list div{
  margin-bottom: 5px;
}

#list button{
  margin-top: 5px;
}

input[type=text] {
  padding: .5em .6em;
  display: inline-block;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 3px #ddd;
  border-radius: 4px;
}

</style>
<script th:inline="javascript">
/*<![CDATA[*/
        
$(function (){
    if($('#strikethrough').val()== "true"){           
         $("input:checkbox").prop('checked',true);
    }else{
        $("input:checkbox").prop('checked', false);
    }
});

});
        
        /*]]>*/
</script>

</head>
<body layout:fragment="content">
        <div id="checkbox-container">
                <h1>Shopping Lists</h1>
                <!-- a simple button for later to add shopping lists -->
                <!-- <button type="button" class="btn btn-danger" /><a href="/" th:href="@{|/ListsofLists/add|}"></a></button> -->
                <a href="/" th:href="@{|/ListsofLists/add|}"><button type="button" class="btn btn-success">Add List</button></a>
                
                <form:form method="post" action="processCheckbox" commandName="cb">
                <form:errors path="*" element="div" cssClass="commonerrorblock"/>
                
                <table class="table table-striped">
                        <thead>
                                <tr>
                                        <th>Name</th>
                                        <th>&nbsp;</th>
                                        <th>&nbsp;</th>
                                </tr>
                        </thead>
                        <tbody>
                                <tr th:each="list : ${lists}">
                                        <td>
                                        
                                        <form:checkboxes items="${Lists}" path="listoflists"/>
                                        
                                        <!-- <input type="checkbox" name="checkbox" id="strikethrough"/> <label for="check" class="strikeThis"
                                                th:text="${list.name}"> </label> -->
                                        </td>
                                        <!--         <td th:text="${list.name}"></td> -->

                                        <td><a href="/" th:href="@{|/ListsofLists/${id}|}">Show</a></td>

                                        <td><button type="button" class="btn btn-info" href="/" th:href="@{|/ListsofLists/${list.id}|}">Show</button></td>

                                        <!-- Delete button -->
                                        <td><a href="/" th:href="@{|/ListsofLists/${list.id}|}"><button type="button" class="btn btn-info">Show</button></a></td>
                                        <td><form method="POST">
                                                        <input type="hidden" name="listId" th:value="${list.id}" />
                                                        <button type="submit">Delete</button>
                                                </form></td>
                                </tr>
                        </tbody>

                </table>
 </form:form>
                
        </div>

</body>
</html>

Aucun commentaire:

Enregistrer un commentaire