Реализация формы на модале с помощью JavaScript - PullRequest
Новая
       17

Реализация формы на модале с помощью JavaScript

0 голосов
/ 08 ноября 2018

Итак, у меня есть два htmls, одна из которых представляет собой простую форму, которая создает и редактирует регистры с описанием и идентификатором, а другая - для перечисления всех регистров в моей базе данных.

Моя проблема в том, что я пытаюсь поместить обе страницы на одну страницу, помещая мою форму в модель, но контроллер для этого класса перенаправляет URL-адрес, когда используются методы де-формы (сохранение и редактирование).

Мне сказали, что использование JavaScript может решить мою проблему, но я действительно начинаю с этого, я не знаю, как это реализовать. Я пытаюсь использовать тимелист, это актуально.

Если кто-то может помочь, я ценю.

P.S. Английский не мой родной язык, извините, если есть опечатка или если ее трудно понять

Форма: 

<form  method="post" th:action="${marca.id == null} ? @{/marcas/salvar} : @{/marcas/editar} " th:object="${marca}">
            <div class="form-row col-md-6">
                <!--<label for="id">Codigo</label>-->

                <label for="descricao">Descricao</label>
                <input type="text" class="form-control" id="descricao" autofocus="autofocus"  placeholder="Marca"
                       th:field="*{descricao}" th:classappend="${#fields.hasErrors('descricao')} ? 'is-invalid'"/>

                <div class="invalid-feedback" >
                    <span th:errors="*{descricao}"></span>
                </div>
                <br/>
            </div>
            <input type="hidden" id="id" th:field="*{id}"/>
            <br/>
            <button type="submit" class="btn btn-primary btn-sm">Salvar</button>

        </form>

Список: 

<div class="container" id="listagem">
        <div th:replace="fragments/alert"></div>
        <div class="table-responsive">
            <table class="table table-striped table-hover table-sm">
                <thead>
                <tr>
                    <th>Cod.</th>
                    <th>Descricao</th>
                    <th>Acao</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="m : ${marcas}">
                    <td th:text="${m.id}"></td>
                    <td th:text="${m.descricao}"></td>
                    <td><a class="btn btn-info btn-sm" th:href="@{/marcas/editar/{id} (id=${m.id})}" role="button">
                        <span class="oi oi-pencil" title="Editar" aria-hidden="true"></span>
                        </a>
                        <a class="btn btn-danger btn-sm" th:href="@{/marcas/excluir/{id} (id=${m.id})}" role="button" >
                            <span class="oi oi-circle-x" title="Excluir"></span>
                        </a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

Контроллер (В случае необходимости) 

@Controller
@RequestMapping("/marcas")
public class MarcaController {
    @Autowired
    private MarcaService service;
    @GetMapping("/cadastrar")
    public String cadastrar(ModelMap model){
        model.addAttribute("marca", new Marca());
        return "/marca/form";
    }
    @GetMapping("/listar")
    public String listar(ModelMap model){
        model.addAttribute("marcas", service.buscarTodos());
        return "/marca/list";
    }
    @PostMapping("/salvar")
    public String salvar(@Valid Marca marca, BindingResult result, RedirectAttributes attr) {
        if (result.hasErrors()){
            return "/marca/form";
        }
        service.salvar(marca);
        attr.addFlashAttribute("success", "Marca inserida com sucesso!");
        return "redirect:/marcas/listar";
    }
    @GetMapping("/editar/{id}")
    public String preEditar(@PathVariable("id") Long id, ModelMap model) {
        model.addAttribute("marca", service.buscarPorId(id));
        return "/marca/form";
    }
    @PostMapping("/editar")
    public String editar(@Valid Marca marca, BindingResult result, RedirectAttributes attr) {
        if (result.hasErrors()){
            return "/marca/form";
        }
        service.editar(marca);
        attr.addFlashAttribute("success", "Marca editada com sucesso!");
        return "redirect:/marcas/listar";
    }
    @GetMapping("/excluir/{id}")
    public String excluir(@PathVariable("id") Long id, RedirectAttributes attr) {
            service.excluir(id);
            attr.addFlashAttribute("success", "Marca excluida com sucesso");
            return "redirect:/marcas/listar";
    }


}

1 Ответ

0 голосов
/ 08 ноября 2018

Поскольку вы используете Bootstrap , этого довольно легко достичь. Все, что вам нужно сделать, это установить некоторые теги для ваших кнопок и ваших модов. Вот что ты должен сделать. Измените правку <a> для следующей кнопки. 

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" th:attr="data-target=${m.id}">Editar</button>

То, что мы делаем в последней строке кода, - это динамическая установка data-target с использованием динамических атрибутов Thymeleaf.

Теперь все, что вам нужно сделать, это добавить свою форму внутрь следующего <div>. Это <div> необходимо создать для каждого поста, и каждый из них должен иметь различный id , поэтому мы устанавливаем их динамически, используя Thymeleaf с th:id. 

<div class="modal fade" th:id="${m.id}" role="dialog">
    <form  method="post" th:action="@{/marcas/editar}" th:object="${marca}">
     ...
    </form>
 </div>
...