Search code examples
javascriptphphtml-selectreloadisset

Option buttons don't reload page automatically in PHP, I cannot find the error in my code


I am working on my PHP assignment and I want to use option buttons, which reload the page automatically when I choose between them. I tried to figure out what the problem might be, but I can't find the error in the code. Below is what I've done so far, but it doesn't work for some reason.

This is my javascript code(album-list.js):

document.getElementById("album-sort").addEventListener("change", function (e) {
                let current_url = window.location.href
                window.location = updateQueryStringParameter(current_url, "sort", e.value)
            })

This is my own function:

function get_album_list($offset = 0, $limit = PAGE_LIMIT, $artist = null, $sorting = "title_asc")
{
    global $db;    
    $sql = "SELECT * FROM albums";    
    if ($artist) {
        $artist = $db->real_escape_string($artist);

        $sql .= " WHERE artist = '$artist'";
    }    
    $order = "";
    switch ($sorting) {
        case "title_desc":
            $order = " ORDER BY title DESC";
        break;
        case "year_asc":
            $order = " ORDER BY year ASC";
        break;
        case "year_desc":
            $order = " ORDER BY year DESC";
        break;
        default:
            $order = " ORDER BY title ASC";
        break;
    }  
    $sql .= $order;
    $sql .= " LIMIT $limit OFFSET $offset";
    $result = $db->query($sql);    
    return $result;
}

This is where I want to use:

<?php
    $artist = isset($_GET["artist"]) ? $_GET["artist"] : null;
    $sort = isset($GET["sort"]) ? $_GET["sort"] : "title_asc"; // Here is the mistake. $GET--> $_GET

    $current_page = isset($_GET['page']) ? $_GET['page'] : 1;
    $limit = ($current_page - 1) * PAGE_LIMIT;
    $total_pages = get_album_count($artist) / PAGE_LIMIT;

    $albums = get_album_list($limit, PAGE_LIMIT, $artist, $sort);
?>
<?php
<div class="page page-albums">
    <h2>Just for you</h1>
    <?php if ($albums->num_rows <= 0) : ?>
        <div class="alert alert-warning">
            There is no album
        </div>
    <?php else : ?>
        <div class="album-list">
            <select id="album-sort">
                <option value="title_asc">Title asc</option>
                <option value="title_desc">Title desc</option>
                <option value="year_asc">Release date asc</option>
                <option value="year_desc">Release date desc</option>
            </select>
            <?php while ($album = $albums->fetch_assoc()) : ?>
                <?php include('_album_list_item.php'); ?>
            <?php endwhile; ?>
        </div>
        <ul class="pagination">
            <?php for ($i = 1; $i < $total_pages + 1; $i++) : ?>
                <li>
                    <?php if ($i == $current_page) : ?>
                        <span><?php echo $i; ?></span>
                    <?php else : ?>
                        <a href="<?php echo url('home', ['page' => $i]); ?>"><?php echo $i; ?></a>
                    <?php endif; ?>
                </li>
            <?php endfor; ?>
        </ul>
    <?php endif; ?>
</div>
<script src="<?php echo asset('js/album-list.js'); ?>"></script>
<?php include "functions.php"; ?>

Solution

  • After I reviewed your answer again and thinking for a while, I came to the conclusion that it might be possible to solve this in a shorter way. Since it still works, I think the code is right, but correct me if I'm wrong.

     <?php
            $artist = isset($_GET["artist"]) ? $_GET["artist"] : null;
            $sort = isset($_GET["sort"]) ? $_GET["sort"] : "title_asc";
    
            $current_page = isset($_GET['page']) ? $_GET['page'] : 1;
            $limit = ($current_page - 1) * PAGE_LIMIT;
            $total_pages = get_album_count($artist) / PAGE_LIMIT;
    
            $albums = get_album_list($limit, PAGE_LIMIT, $artist, $sort);
        ?>
        <?php include "_header.php"; ?>
        <div class="page page-albums">
            <h2>Just for you</h1>
            <?php if ($albums->num_rows <= 0) : ?>
                <div class="alert alert-warning">
                    There is no album
                </div>
            <?php else : ?>
                <div class="album-list">
                    <select id="album-sort">
                        <option value="title_asc" <?php echo isset($_GET["sort"]) ? $_GET["sort"] == "title_asc" ? "selected" : "" : ""?> >Title asc</option>
                        <option value="title_desc" <?php echo isset($_GET["sort"]) ? $_GET["sort"] == "title_desc" ? "selected" : "" : ""?> >Title desc</option>
                        <option value="year_asc" <?php echo isset($_GET["sort"]) ? $_GET["sort"] == "year_asc" ? "selected" : "" : ""?> >Release date asc</option>
                        <option value="year_desc" <?php echo isset($_GET["sort"]) ? $_GET["sort"] == "year_desc" ? "selected" : "" : ""?> >Release date desc</option>
                    </select>
                    <?php while ($album = $albums->fetch_assoc()) : ?>
                        <?php include('_album_list_item.php'); ?>
                    <?php endwhile; ?>
                </div>
                <ul class="pagination">
                    <?php for ($i = 1; $i < $total_pages + 1; $i++) : ?>
                        <li>
                            <?php if ($i == $current_page) : ?>
                                <span><?php echo $i; ?></span>
                            <?php else : ?>
                                <a href="<?php echo url('home', ['page' => $i]); ?>"><?php echo $i; ?></a>
                            <?php endif; ?>
                        </li>
                    <?php endfor; ?>
                </ul>
            <?php endif; ?>
        </div>
        <script src="<?php echo asset('js/album-list.js'); ?>"></script>
        <?php include "_footer.php"; ?>