0

I am having an issue with an XHR and PHP. I have an html page that dynamically changes based on user input, once they like their changes they push save which javascript sends an XHR to a PHP file to handle the data and put it in the database. Javascript also GETS data from the DB when the page loads. My code works perfect on my localhost (WAMP server) but when I upload it to a live server I'm only receiving the PHP echo statement in my PHP file. I get no errors thrown anywhere. Here's my javascript code:

function displayCards() {
    const xhr = new XMLHttpRequest();
    const url = 'https://full-link-to-my.php';
    xhr.onreadystatechange = () => {
        if(xhr.readyState === XMLHttpRequest.DONE) {
            document.getElementById('testWall').innerHTML = xhr.response;
        }
    }
    xhr.open('GET', url);
    xhr.send();
}

and here's my PHP:

$con = db_connect();
if ($con->connect_error) echo "Gremlins have eaten the database because " . $con->connect_error;
$query = "SELECT * FROM cards";
$result = $con->query($query);
if (!$result) echo "Could not gather the cards because " . $con->error;
echo "<div class='row'>";
$i=1;
while($row = $result->fetch_assoc()) {
    if($i<=3) {
        //draw a colum
        echo "<div class='col-sm-4'>
                    <div class='card shadow' style='background-color:".$row['cardBg'].";color:".$row['cardText'].";'>
                        <div class='card-header'>
                            <h4 class='card-title'>Happy Birthday, " . $row['cardTo'] . "!!</h4>
                        </div>
                        <div class='card-body'>
                            <img src='images/".$row['cardImg'].".png' class='img-fluid' alt='Note' />
                        </div>
                        <div class='card-footer'>
                            <p>" . $row['cardMsg'] . "</p>
                            <p class='text-right'>--" . $row['cardFrom'] . "</p>
                        </div>
                    </div>
                </div>";
        //Add 1 to $i
        $i++;
    } else {
        //Reset $i to 1 otherwise this is 4
        $i=1;
        //End the row
        echo "</div>";
        //Start a new row
        echo "<div class='row pt-3'>";
        //draw a column and card
        echo "<div class='col-sm-4'>
                    <div class='card shadow' style='background-color:".$row['cardBg'].";color:".$row['cardText'].";'>
                        <div class='card-header'>
                            <h4 class='card-title'>Happy Birthday, " . $row['cardTo'] . "!!</h4>
                        </div>
                        <div class='card-body'>
                            <img src='images/".$row['cardImg'].".png' class='img-fluid' alt='Note' />
                        </div>
                        <div class='card-footer'>
                            <p>" . $row['cardMsg'] . "</p>
                            <p class='text-right'>--" . $row['cardFrom'] . "</p>
                        </div>
                    </div>
                </div>";
        //Add 1 to $i to keep the count to 3 correct
        $i++;
    }
}
echo $data;
mysqli_close($con);

The only thing in the PHP that gets sent back to javascript is the echo before the while loop starts. Any ideas why this isn't working? Thank You

AngelaW105
  • 1
  • 1
  • Is card table empty? – glinda93 Apr 06 '20 at 12:49
  • It was but I manually added one to the DB (MySQL) and it worked the first time. Now I keep getting an "500 Internal Server Error" for GET and POST – AngelaW105 Apr 06 '20 at 13:51
  • Enable PHP error log and upload here what errors you get. See https://stackoverflow.com/questions/1053424/how-do-i-get-php-errors-to-display – glinda93 Apr 06 '20 at 13:53
  • I figured it out. I have all my php code in one file and was using if(isset($_GET)) to check if the GET or POST code should run. I had to change it to if ($_SERVER['REQUEST_METHOD'] === 'POST' in there too. Thank you for your help! – AngelaW105 Apr 06 '20 at 14:02

0 Answers0