CODEWITHSUNDEEP
javascriptphpajax
Adam McGurk
Adam McGurk

Reputation: 476

Get response from AJAX/PHP

While I am very new to AJAX, I really don't know why this wouldn't be working correctly. I have a table that is made editable through a click eventlistener, then there is another event listener listening for a keypress of the enter key and when that happens gets different variables and sends an AJAX post request to the server. But, when I press enter, nothing happens. By nothing happens, I mean I stay on the page I was on instead of the PHP functions on the server directing me elsewhere. What's odd is that after my ajax.send(vars), I console.logged out my ajax object and the response showed an HTML page being served, but:
1. It showed the response I would get if my ID, loc, or column values were empty (which, when I logged those variables out, they were not)
2. That page wasn't being served. The ajax object showed the response, but I (the end user) wasn't seeing that response.
Here is my JavaScript:

        index.addEventListener("keypress", function(e){
        var key = e.keyCode;
            if (key === 13) {
                var entry = e.path[0].innerText;
                var tabID = e.path[1].id;
                var table = tabID.charAt(0);
                if (table === 'o') {
                    table = "otheraccounts";
                } if (table === 'wh') {
                    table = "wheatstoneaccounts";
                } if (table === 'wo') {
                    table = "wideorbitaccounts";
                }
                var ID = tabID.charAt(1);
                var column = e.path[0].id;
                var loc = e.path[3].getElementsByTagName("input").location.value;
                var ajax = new XMLHttpRequest();
                ajax.open("post", "../other/index.php?action=updateTable", true);
                ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                ajax.send(entry, table, ID, column, loc);
            }
    }, false)

And here is the PHP:

case 'updateTable':
    $column = filter_input(INPUT_POST, 'column', FILTER_SANITIZE_STRING);
    $ID = filter_input(INPUT_POST, 'ID', FILTER_SANITIZE_NUMBER_INT);
    $table = filter_input(INPUT_POST, 'table', FILTER_SANITIZE_STRING);
    $entry = filter_input(INPUT_POST, 'entry', FILTER_SANITIZE_STRING);
    $location = filter_input(INPUT_POST, 'loc', FILTER_SANITIZE_STRING);
    if (empty($ID) || empty($column) || empty($table)){
        $message = "<p class='message'>Stop tampering with my IDs!!</p>";
        $_SESSION['message'] = $message;
        header("Location: /radiosite/other/index.php?action=$location");
        exit;
    }
    $result = updateEntry($column, $ID, $table, $entry);
    if ($result === 1) {
        $message = "<p class='message'>The entry was successfully updated in the database</p>";
        $_SESSION['message'] = $message;
        header("Location: /radiosite/other/index.php?action=$location");
        exit;
    } else {
        $message = "<p class='message'>Nothing was added to the database</p>";
        $_SESSION['message'] = $message;
        header("Location: /radiosite/other/index.php?action=$location");    
        exit;            
    }
break;

Upvotes: 0

Views: 51

Answers (1)

Barmar
Barmar

Reputation: 780723

AJAX won't redirect the browser when it gets a redirection header. That just tells it to go to that alternate URL to get the response data.

Change the PHP so it returns the new URL as a string. Change lines like:

header("Location: /radiosite/other/index.php?action=$location");

to:

echo "/radiosite/other/index.php?action=$location";

Then in the Javascript code you can read the response and assign it to window.location to perform the redirection.

You're also not sending the POST parameters properly. You need to construct the URL-encoded string.

var ajax = new XMLHttpRequest();
ajax.open("post", "../other/index.php?action=updateTable", true);
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajax.send('entry=' + encodeURIComponent(entry) + '&table=' + encodeURIComponent(table) + '&ID=' + encodeURIComponent(ID) + '&column=' + encodeURIComponent(column) + '&loc=' + encodeURIComponent(loc));
ajax.onload = function() {
    window.location = ajax.responseText.trim();
};

Upvotes: 1

Related Questions