Not loading the page

Question

When I click a button I'm supposed to go to eventpage (yes I have a template for eventpage in my templates folder). Why is it not loading?

Below are snippets of my code.

$('.events').on("click", function() {
    var eventName = $(this).val();
    $.ajax({
        type: 'POST',
        url : '/eventpage',
        data : {'eventName' : eventName},
        success : function(data) {

        }
    });
});


@RequestMapping(value = "/eventpage")
public String eventPage(@RequestParam("eventName") String eventName, Model model) {
    for(Event e : EventRegistrationSystemApplication.events) {
        if(e.getName().equals(eventName)) {
            model.addAttribute("event", e);
            break;
        }
    }

    return "eventpage";
}

What's happening is the page that I'm supposed to go to is being loaded here: image

from what I suspect, are you passing the 'header' & 'token' for ajax calls? To confirm, go to the your console and click on the 'eventPage' and see the 'headers' , 'preview' & 'response'. Please check and confirm. Thanks. — Digvijay, Jan 28 '19 at 21:13
I think you're confusing the behavior of a synchronous request with that of an asynchronous request. This can helps you https://stackoverflow.com/a/33969543/4796021 — David Pérez Cabrera, Jan 28 '19 at 21:16
@Digvijay Sorry I'm new to this technology. Could you clarify to me what should I see at headers? Preview is blank. Response is the html code for eventpage. — Kyle Oliva, Jan 28 '19 at 21:24
@KyleOliva open the same state as your screenshot (go to network -> click on 'eventPage') see this example -> https://ibb.co/4f7CX5w — Digvijay, Jan 28 '19 at 21:29
@KyleOliva header and token are missing. I will post an answer (this might help... or something else is also missing) — Digvijay, Jan 28 '19 at 21:38

DaviesTobi alex · Answer 1 · 2019-01-28T21:21:31.177

0

The Ajax request you are using is actually posting a request to that url and not loading the webpage. If you wish to load the web page, use window.location.href="/eventpage?eventName=" + eventName in your JavaScript.

edited Jan 28 '19 at 21:21

answered Jan 28 '19 at 21:16

DaviesTobi alex

610
1
9
34

1

This isn't quite right. `window.location.href="/eventpage?eventName=" + eventName` – David Pérez Cabrera Jan 28 '19 at 21:18

score 0 · Answer 2 · answered Jan 28 '19 at 21:43

I believe you may have confused the asynchronous vs synchronous request, you could look at this post to learn more. You should also use GET request to load the page (Not a POST). A Post request is usually for sending form data to the backend, while the GET request fetches data (like from an API) or loading pages (unless it's a web app).

You can do a page change as Alex Davies suggested with Javascript (not with Ajax). You can also change the @RequestMapping to @GetMapping("/eventpage") to use a more direct approach with Spring.

score 0 · Answer 3 · answered Jan 28 '19 at 21:45

Based on the screenshot (ibb.co/ZSXDBpG ), header and token are missing from the post call.

$('.events').on("click", function() {
    var token = $("meta[name='_csrf']").attr("content");
    var header = $("meta[name='_csrf_header']").attr("content");
    var eventName = $(this).val();
    $.ajax({
        type: 'POST',
        url : '/eventpage',
        data : {'eventName' : eventName},
        beforeSend: function(xhr) {
            xhr.setRequestHeader(header, token);
        },
        success : function(data) {
            console.log(data);
        }
    });
});

After the change, please check your console. Also check 'preview' and 'response'. Hope this helps!!

Not loading the page

3 Answers3