CODEWITHSUNDEEP
jqueryspringthymeleaf
Yedek Hesap
Yedek Hesap

Reputation: 21

How to populate dropdown list by previous selection Spring thymeleaf

I need to create a second dropdown list based on previous selection. Basically user needs to select the screening and other dropdownlist has to show the seats for the selected screeing.

My Controller

@RequestMapping("/movieDetail")
public String movieDetail(
        @PathParam("id") Long id, Model model, Principal principal
        ) {
    if(principal != null) {
        String username = principal.getName();
        User user = userService.findByUsername(username);
        model.addAttribute("user", user);
    }

    Movie movie = movieService.findOne(id);
    List<ShowTime>showTimeList=movie.getShowTimeList();

    model.addAttribute("movie", movie);
    model.addAttribute("showTimeList",showTimeList);


    return "movieDetail";
}

So i get the show times but i cant figure out how to get every other show time's seats in controller and pass the selected id to the second dropdown

Thymeleaf

<select name="showTime">
<option th:each="showTime : ${showTimeList}" 
th:value="${showTime.id}"th:text="${showTime.date} +' '+ ${showTime.time}">
</option>
</select>

My ShowTime entity

@Entity
public class ShowTime {
@Id
@GeneratedValue(strategy = GenerationType.AUTO)
private Long id;

@ManyToOne
@JoinColumn(name="movie_id")
private Movie movie;

@ManyToOne
@JoinColumn(name="saloon_id")
private Saloon saloon;

@Temporal(TemporalType.DATE)
private Date date;

@Temporal(TemporalType.TIME)
private Date time;

@OneToMany(cascade=CascadeType.ALL,mappedBy = "showTime")
@JsonIgnore
private List<Seating> SeatingList;

My Seating Entity

@Entity
public class Seating {

@Id
@GeneratedValue(strategy = GenerationType.AUTO)
private Long id;

@ManyToOne
@JoinColumn(name="showtime_id")
private ShowTime showTime;

private int seatNo;

I think i need use jquery ajax but don't know how to use them properly.

Upvotes: 2

Views: 2421

Answers (1)

Neptunus
Neptunus

Reputation: 71

I use something similar on my project. You will need to use jQuery to change the content of the second select box. Let's assume that the second select box is called 'secondBox'.

You can trigger the jQuery function from the first select box like that

<select id="showTime" name="showTime" onclick="onShowtimeChanged()">
   <option th:each="showTime : ${showTimeList}" 
       th:value="${showTime.id}"th:text="${showTime.date} +' '+ ${showTime.time}">
   </option>
</select>

Notice the onclick property onclick="onShowtimeChanged()", this will call the jQuery function every time you change the selected item.

Then, you will need to pass the ShowTimeList to a javascript variable, so you can use it later on. You can do that by placing the following code at the end of your page (where you have your script section).

<script  th:inline="javascript">
    var showTimeList = /*[[${showTimeList}]]*/ 'showTimeList';
</script>

The jQuery function will be

function onShowtimeChanged() {
    var chosenShowtime = $("showTime").val();
    for (i=0;i<showTimeList.length;i++) {
        if (showTimeList[i].id == chosenShowTime) {
            $('#secondBox option').remove();
            seats = showTimeList[i].SeatingList;
            for (n=0;m<seats.length;n++) {
                $('#secondBox').append($('<option>', {
                    value: seats[n].id,
                    text: seats[n].seatNo
                }));
            }
            $("#secondBox").trigger("chosen:updated");
        }
    }
}

I hope this helps

Upvotes: 3

Related Questions