Search code examples
javaspringthymeleaf

Problem with updating "movie" data using Thymeleaf and spring


Hey I've got a problem with updating my object. I've got a table of movies where can i delete it or go to details. In details i wanted to have my "update" option. Im giving whole object to movieDetailPage, it shows object details in input fields but i cant update it. My "updateMovie" method doesnt see what i typed in input. For example im changing name from "Movie1" to "Movie2" and method still see "Movie1"

Here's my movieDetailsPage.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

    <form  th:object="${movieToUpdate}" method=post >
        <p>Movie name: <input type="text" th:field="*{name}"></p>
        <p>Movie description: <input type="text" th:field="*{description}"></p>
        <img th:src="${movieToUpdate.getImageUrl()}" th:width="300" th:height="300"><br>
        <p>Nowy image url: <input type="text" th:field="*{imageUrl}" class="cloudinary-fileupload"></p>

        <a th:href="${'/movie/update/'+movieToUpdate.getId()}">Update</a><br>
    </form>

</body>
</html>

and my controller class

package pl.fsaaa.filmapp.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import pl.fsaaa.filmapp.model.Movie;
import pl.fsaaa.filmapp.service.CloudinaryImageUploader;
import pl.fsaaa.filmapp.service.MovieService;

import java.io.IOException;
import java.util.List;

@Controller
public class MovieController {

    private CloudinaryImageUploader cloudinaryImageUploader;
    private MovieService movieService;

    @Autowired
    public MovieController(MovieService movieService, CloudinaryImageUploader cloudinaryImageUploader) {
        this.movieService = movieService;
        this.cloudinaryImageUploader = cloudinaryImageUploader;
    }

    @GetMapping("/addmovie")
    public String getNewMovie(Model model) {
        model.addAttribute("newMovie",new Movie());
//        model.addAttribute("newImage",new File(""));
        return "addMoviePage";
    }

    @PostMapping("/add-movie")
    public String addMovie(@ModelAttribute Movie movie) throws IOException {
        cloudinaryImageUploader.saveImageToCloudinary(movie.getImageUrl());
        movie.setImageUrl(cloudinaryImageUploader.getCloudinaryImageUrl());
        movieService.addMovie(movie);
        return "redirect:/addmovie";
    }

    @GetMapping("/movies")
    public String getAllMovies(Model model) {
        List<Movie> movieList = movieService.getAllMovies();
        model.addAttribute("allMovies",movieList);
        return "moviesPage";
    }

    @GetMapping("/movie/{id}")
    public String getMovieDetail(Model model, @PathVariable Long id) {
        Movie movieToUpdate = movieService.getMovieById(id);
        System.out.println(movieToUpdate);
        model.addAttribute("movieToUpdate", movieToUpdate);
        return "movieDetailsPage";
    }

    @RequestMapping(value = "/movie/update/{id}", method = {RequestMethod.GET,RequestMethod.PUT})
//    @PutMapping("movie/update/{id}")
    public String updateMovie(@PathVariable Long id, @ModelAttribute Movie movieToUpdate){
//        movieToUpdate = movieService.getMovieById(id);
//        System.out.println(movieToUpdate);
        movieService.addMovie(movieToUpdate);
        return "redirect:/movies";
    }

    @RequestMapping(value = "/movie/delete/{id}", method = {RequestMethod.DELETE,RequestMethod.GET})
    public String deleteMovie(@PathVariable Long id){
        movieService.deleteMovie(id);
        return "redirect:/movies";
    }

}

Solution

  • Problem solved. I've added submit button to details page instead of link:

      <form th:action="'/movies/update/'+*{id}" th:object="${movieToUpdate}" method=put >
            <p>Movie name: <input type="text" th:field="*{name}"></p>
            <p>Movie description: <input type="text" th:field="*{description}"></p>
            <img th:src="${movieToUpdate.getImageUrl()}" th:width="300" th:height="300"><br>
            <p>New image url: <input type="text" th:field="*{imageUrl}" class="cloudinary-fileupload"></p>
            <p><input type="submit" value="Update"></p>
        </form>
    

    and changed update edited "movie" method a little bit, because previous one wasn't uploading changed image to cloudinary.

        @RequestMapping(value = "/update/{id}", method = {RequestMethod.GET,RequestMethod.PUT})
        public String updateMovie(@PathVariable Long id, @ModelAttribute Movie movieToUpdate) throws IOException {
            movieToUpdate.setId(id);
            cloudinaryImageUploader.saveImageToCloudinary(movieToUpdate.getImageUrl());
            movieToUpdate.setImageUrl(cloudinaryImageUploader.getCloudinaryImageUrl());
            movieService.addMovie(movieToUpdate);
            return "redirect:/movies/all";
        }