CODEWITHSUNDEEP
javascripthtmldjangogoogle-chrome
Max
Max

Reputation: 1487

Chrome automatically refresh page after XMLHttpRequest

I have some strange problem with Google Chrome. I build a search field for my website. Therefor i have implemented some JS to get and process the results (see below). The problem is, when I first enter the page with chrome and using the search with "Enter-key", chrome does the following (request from my server):

[10/Nov/2017 10:00:56] "GET /app/student/home/ HTTP/1.1" 200 7372 (entering the page)
[10/Nov/2017 10:00:59] "GET /api/searchCourse/daf/ HTTP/1.1" 200 95 (search request)
[10/Nov/2017 10:00:59] "GET /app/student/home/? HTTP/1.1" 200 737 (reloading -but why?? )

One Firefox (also with "Enterkey") or Chrome using the "Search-button" it looks different, like that. 

[10/Nov/2017 10:00:59] "GET /api/searchCourse/daf/ HTTP/1.1" 200 95 (entering the page)
[10/Nov/2017 10:00:59] "GET /app/student/home/? HTTP/1.1" 200 737 (search request)

I also tried debugging this Problem with Chrome, but than it behaves like it should. Also I have to add, this happens only when I first enter the page after login. When I refresh the page it works good. Can some explain this behavior?

My JS-Code:

var btnSearch = document.querySelector('.search').addEventListener('click', searchCourse);
var txtFieldSearch = document.getElementById('searchField').addEventListener('keydown',                 
    function (e) {
        var key = e.which || e.keyCode;
        if (key === 13) {
            searchCourse();
        }
    }
);

function searchCourse() {
    document.querySelector('.my-node').style.display = 'none';
    var input = document.getElementById('searchField').value;
    var url = '/api/searchCourse/';

    if (input.length < 3) {
        showSearchWarining('Please enter more than 3 letters.');
        return;
    }

    var xhr = new XMLHttpRequest();
    xhr.open('GET', url + input, true);
    xhr.onload = function (e) {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                console.log(xhr.responseText);
                addResults(xhr.responseText);
            } else {
                console.error(xhr.statusText);
            }
        }
    };
    xhr.onerror = function (e) {
        console.error(xhr.statusText);
    };
    xhr.send(null);
}

Upvotes: 0

Views: 1091

Answers (1)

Joschi
Joschi

Reputation: 2974

It looks like Chrome is submitting the form - did you try event.preventDefault() in the click handler or a form submit handler to prevent further event handling from getting invoked?

Upvotes: 2

Related Questions