Spring MVC / jquery+bootstrap / controller

Spring MVC / jquery+bootstrap / controller
J1
  • Rejestracja:około 6 lat
  • Ostatnio:ponad 4 lata
  • Postów:30
0

Cześć, pogubiłem się. Sprawa wygląda tak:

Formularz ludzi (wyświetla dane), możliwe akcje: usuń (wyrzuca prompt czy aby na pewno chcę usunąć) - i edycja danych.
Problem następujący --> działa jak należy gdy mam samo (localhost:9999/all-customers) ale jak dodam do ścieżki (localhost:9999/test/all-customers) to zwraca tylko JSONa w przypadku Edycji, w przypadku Delete usuwa po ID ale nie wyrzuca prompt czyli nie działa "łączenie" warstw
Wychodzi na to, że model nie konsumuje mojego uri (źle odnoszę się do kodu javy w js'ie?)

kod JS wygląda tak: //

Kopiuj
$(document).ready(function () {

    $('.nBtn, .table .eBtn').on('click', function (event) {

        event.preventDefault();
        var href = $(this).attr('href');
        var text = $(this).text();

        if (text === 'Edit') {
            $.get(href, function (customer, status) {
                $('.myForm #id').val(customer.id);
                $('.myForm #firstName').val(customer.firstName);
                $('.myForm #lastName').val(customer.lastName);
                $('.myForm #age').val(customer.age);
            });
            $('.myForm #exampleModal').modal();
        } else {
            $('.myForm #id').val('');
            $('.myForm #firstName').val('');
            $('.myForm #lastName').val('');
            $('.myForm #age').val('');
            $('.myForm #exampleModal').modal();
        }
    });

    $('.table .deleteBtn').on('click', function (event) {
        event.preventDefault();
        var href = $(this).attr('href');
        $('#exampleModalLong #delRef').attr('href', href);
        $('#exampleModalLong').modal();
    });
});
Kopiuj
@Controller
public class CustomerController {

    private CustomerRepository customerRepository;

    public CustomerController(CustomerRepository customerRepository) {
        this.customerRepository = customerRepository;
    }

    @GetMapping("/test/all-customers")
    public String showPage(Model model, @RequestParam(defaultValue = "0") int page) {
        model.addAttribute("data", customerRepository.findAll(PageRequest.of(page, 10, Sort.unsorted())));
        model.addAttribute("currentPage", page);
        return "index";
    }

    @PostMapping("/save")
    public String save(Customer customer) {
        customerRepository.save(customer);
        return "redirect:/test/all-customers";
    }

    @GetMapping("/test/delete")
    public String deleteCustomer(Long id) {
        customerRepository.deleteById(id);
        return "redirect:/test/all-customers";
    }

    @GetMapping("/test/findOne")
    @ResponseBody
    public Customer findOne(Long id) {
        return customerRepository.findById(id).get();
    }
}

+html odpowiedzialny za te dwa przyciski

Kopiuj
        <a th:href="@{findOne/(id=${customer.id})}" class="btn btn-primary eBtn">Edit</a>
<a th:href="@{delete/(id=${customer.id})}" class="btn btn-danger deleteBtn">Delete</a>

Pomóżcie proszę:D
i raz jeszcze, jak nie ma "test" w adresach URL to działa

edytowany 2x, ostatnio: Johny123
Shalom
  • Rejestracja:około 21 lat
  • Ostatnio:około 3 lata
  • Lokalizacja:Space: the final frontier
  • Postów:26433
0

Ja chyba nie bardzo rozumiem co ty robisz. Bo z jednej strony masz JS który wygląda że niby backend-as-a-service, czyli backend tylko zwraca jsony, a frontend sam ogarnia resztę. Ale z drugiej strony masz jakieś

Kopiuj
    @GetMapping("/test/all-customers")
    public String showPage(Model model, @RequestParam(defaultValue = "0") int page) {
        model.addAttribute("data", customerRepository.findAll(PageRequest.of(page, 10, Sort.unsorted())));
        model.addAttribute("currentPage", page);
        return "index";
    }

A to jest przecież oldschoolowe zwracanie htmli z kontrolera. Zwracasz tu szablon index z jakimiśtam danymi, a nie JSONa.

Więc co właściwie chcesz osiągnąć? Opisz to po ludzku w postaci co robie, czego oczekuje, co się faktycznie dzieje.

i raz jeszcze, jak nie ma "test" w adresach URL to działa

? Jak nie ma test to masz przecież zupełnie inne endpointy, więc co ci niby tam "działa"?


"Nie brookliński most, ale przemienić w jasny, nowy dzień najsmutniejszą noc - to jest dopiero coś!"
edytowany 1x, ostatnio: Shalom
J1
  • Rejestracja:około 6 lat
  • Ostatnio:ponad 4 lata
  • Postów:30
0

Działa to co mam zamierzone, wyrzuca mi prompt ("czy chcesz usunąć...") przy usuwaniu / oraz zwraca modal z bootstrapa do edycji (okienko do edycji danych nt. osoby). Jak dodam "test" do adresu to nie działa i to jest mój problem, tak jakby JS nie konsumował tego adresu po dodaniu tego "test" (a muszę dodać go bo mam panel administratora i wygląda on następująco 'admin/all-products' - gdybym usunął 'admin' to jest OK ale mam spring security ustawiony na 'admin**' )
Co chce osiągnąć? Mam panel administratora, który wyświetla produkty, administrator może usuwać/modyfikować/dodawać produkty. Do tej pory robiłem wszystko poprzez właśnie zwracanie htmli z kontrolera ale chcę aby to lepiej wyglądało więc chcę sobie dodać Modale z Bootstrapa abym miał wyskakujące okienko np. 'modyfikacja produktu'

Nie rozumiem dlaczego zmiana na inny end-point (dodanie tego "test" wewnątrz adresu nie działa)

Zgadza się. W ogóle nie wypisuje mi end-pointa jak klikam na przycisk więc muszę coś zmienić w kodzie z JS'em

edytowany 5x, ostatnio: Johny123
Shalom
  • Rejestracja:około 21 lat
  • Ostatnio:około 3 lata
  • Lokalizacja:Space: the final frontier
  • Postów:26433
1

A zobacz może w przeglądarce w developer tools w network jakie requesty realnie są wysyłane.


"Nie brookliński most, ale przemienić w jasny, nowy dzień najsmutniejszą noc - to jest dopiero coś!"
J1
  • Rejestracja:około 6 lat
  • Ostatnio:ponad 4 lata
  • Postów:30
0

Zabrakło jednego slasha / przy dodawaniu skryptu z plikiem JS'a jak zmieniałem URI. Teraz działa tak jak chciałem, kek

K5
Z ciekawości, dlaczego taki dobór technologii?
J1
@kixe52 Projekt zaliczeniowy w stacku: MVC / thymeleaf / bootstrap aczkolwiek chciałem nieco polepszyć wygląd dlatego zacząłem się bawić jquery/bootstrap modal'ami bo 'współcześniej/ładniej' to wygląda niż takie przeskakiwanie ze strony na stronę aby coś zeedytować itp. Ten kod co wrzuciłem tutaj zrobiłem raz jeszcze na świeżo bo nie mogłem znaleźć rozwiązania dlaczego mi to nie działało, chciałem prześledzić od nowa krok po kroku dlatego nie dbałem zbytnio o nazewnictwo, chciałem jedynie przedstawić logikę działania programu aby znaleźć rozwiązanie.
J1
W innym przypadku zrobiłbym z podziałem na 3 warstwy, front w react'ie

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.