Can't call PHP function from JS

Question

I'm trying to run a PHP function within a JS Block in an HTML document. The function includes PHP, HTML and JS.

The function includes a loop that runs just fine until the last time, where it instead prints out this:

"; document.getElementById("code").innerHTML += sayThis;

The error message says: Uncaught SyntaxError: Unexpected identifier

The function is called load_offers, and it retrieves data from a database, and displays it in list objects.

It does what it's supposed to until I add this:

<script type="text/javascript">
var sayThis = "<?php load_offers(); ?>";
document.getElementById("code").innerHTML += sayThis;
</script>

The function needs to be called so it loads 6 more list objects when the user had scrolled down to the end of the page instead of loading everything at once. This is why I need JS to call the function.

Here is the function:

    function load_offers(){
//Gets variables needed to connect to mysql.
    global $servername;
    global $username;
    global $password;
    global $dbname;
    global $fetched;
    global $amount;

    $conn = new mysqli($servername, $username, $password, $dbname);

//Creates a query that loads a limited number of offers.
     $query = "SELECT ID, TITLE, IMAGELINK, DATE_ADDED, OLD_PRICE, NEW_PRICE, SAVE_PERCENT FROM erbjudanden WHERE APPROVED = 'Y' ORDER BY DATE_ADDED DESC 
    LIMIT $fetched, $amount";

    $result = $conn->query($query);

//Declares arrays.
    $all_offers = array();
    $titles = array();
    $imagelinks = array();
    $dates = array();
    $old_prices = array();
    $new_prices = array();
    $percents = array();
    $link = array();
    $i = 0;
    $bad_chars = array("'", "!", ",", "\"", "(", ")", "[", "]", "#", "&", "+", "=", "@", "$", "%", "|" );

//Gets data from row into arrays.
     while($row = $result->fetch_assoc()){
        $all_offers[$i] = $row['ID'];
        $titles[$i] = $row['TITLE'];
        $imagelinks[$i] = $row['IMAGELINK'];
        $dates[$i] = $row['DATE_ADDED'];
        $old_prices[$i] = $row['OLD_PRICE'];
        $new_prices[$i] = $row['NEW_PRICE'];
        $percents[$i] = $row['SAVE_PERCENT'];

//Creates a link with only numbers, lowercase letters and - instead of spaces.
        $link[$i] = $row['TITLE'];
        $link[$i] = strtolower($link[$i]);
        $link[$i] = str_replace(" ", "-", $link[$i]);
    foreach($bad_chars as $bad){
    $link[$i] = str_replace($bad, "", $link[$i]);
    }
    $link[$i] = str_replace("--", "-", $link[$i]);
    $link[$i] = $link[$i] . "-" . $all_offers[$i];
        $i++;

       }


//Writes out data as listobjects.
    $a = 0;
    foreach ($all_offers as $offer)
    {
    $aID = $fetched + $a;
    echo'<a href="'.$link[$a].'">
            <li class = "listobjekt">
            <h4  align = "center" >' . $titles[$a] . '</h4>
            <img src="' . $imagelinks[$a] . '" class = "tellme" id = "tiny'. $aID .'">
            <table class = "pri">
            <tr><td width="50">Förr:</td><td id ="for"> ' . $old_prices[$a] . ' :-</td></tr>
            <tr><td>Nu:</td><td id = "bu">' . $new_prices[$a] . ' :-</td></tr>
            <tr><td >Spara:</td><td id = "spara">' . $percents[$a] . ' %</td></tr>
            </table>
            </li></a>

//Makes image fit it's container and align correctly.

    <script type="text/javascript">
    var file = document.getElementById("tiny'.$aID.'");

    if(file.height < file.width){

    file.style.width="180px";
    padding = file.width - file.height;
    padding = padding / 2;
    padding = padding+"px";
    file.style.marginTop=padding;
    file.style.marginBottom=padding;

    }
    else{
    file.style.height="180px";

    padding = file.height - file.width;
    padding = padding / 2;
    padding = padding+"px";
    file.style.marginLeft=padding;
    file.style.marginRight=padding;
    }
    </script>
    ';


    $a++;
    }
    }

Hope I'm clear enough.

Answer 1

Firstly, use PHP to adjust your images.

Secondly, make sure that the javascript variable sayThis is on one line. Javascript don't support multilines with singe quotes.

I tested this on your computer and it works! :)