Spring MVC / jquery+bootstrap / controller

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: //

$(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();
    });
});
@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

        <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

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ś

    @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"?

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

1

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

0

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

1 użytkowników online, w tym zalogowanych: 0, gości: 1