Can update page with ajax

Question

I have a div element which is populated by the query result(in index.php). I have also another file widget.php which has same query to update page. I have variable in widget.php "page" which navigates through the pages. If I use widget.php?page=2 it will load next page with results. I want to update a div element in index.php on click.(Click "next" and show another 8 news without reloading page).

in index.php :

<button type="button" id="prevbutton">Previous</button>
<button type="button" id="nextbutton">Next</button>

<div id="list"></div>

in script.js:

$("#prevbutton, #nextbutton").click(function () {

    var id_name = $(this).attr('id');
    var page = 0;

    if (id_name == '#prevbutton' || id_name == '#nextbutton') {
            if (id_name == '#prevbutton') {
                page -= 1;    
            }
            if (id_name == '#nextbutton') {
                page +=1;
            }    
        }

        $.ajax({
            url: 'widget.php',
            type: 'GET',
            data: "page=" + page,
            success: function (data) {
                //called when successful
                $("#list").html(data);
            },
            error: function (e) {
                //called when there is an error
                //console.log(e.message);
            }
        });
    });

in widget.php :

<?php
header("Cache-Control: public, max-age=60");
include("logindb.php");
$page = $_GET['page'];
$page = $page*9;
?>
                <div id="list">
                    <?php
                    $abfrage59 = "SELECT n.news_title,n.news_id,FLOOR(TIMESTAMPDIFF(HOUR, n.timestamp, NOW())) as diff
                    FROM news n
                    WHERE n.domain_id = '2' AND n.timestamp < NOW()
                    ORDER BY timestamp DESC
                    LIMIT $page,9";
                    $ergebnis59 = mysql_query($abfrage59);
                    while ($row59 = mysql_fetch_object($ergebnis59)) {

                    $newstitleslug = $row59->news_title;
                    $newstitleslug = str_replace(' ', '-', $newstitleslug);
                    $newstitleslug = strtolower($newstitleslug);

                    echo "<div class=\"col-sm-6 col-md-4\" style=\"padding-bottom: 15px;\">
                            <div class=\"item\">
                                <img class=\"main\" src=\"http://www.example.com/news/$row59->news_id.png\" />
                                <div class=\"text\">
                                    <div class=\"inner\">
                                        <a href=\"http://www.example.com/$newstitleslug/$row59->news_id/\" style=\"color:white;\">$row59->news_title<br />
                                        <span class=\"date\">$row59->diff hours ago</span>
                                    </div>
                                </div>
                            </div>
                        </div>";

                    }
                    ?>
<?php
include("close_connect.php");
?>

So I want to update value $page on click and refresh content of DIV with new data. Thanks in advance.

Edit: removed script from script.js and put in the end of the index.php body:

<script>

    $("#prevbutton, #nextbutton").click(function () {

            var id_name = $(this).attr('id');
            var temppage = 1;

            if (id_name == 'prevbutton' || id_name == 'nextbutton') {
                    if (id_name == 'prevbutton') {
                        temppage -= 1;    
                    }
                    if (id_name == 'nextbutton') {
                        temppage +=1;
                    }
                var page = temppage;
                }


                $.ajax({
                    url: 'widgets/news_archive_widget.php',
                    type: 'GET',
                    data: "page=" + page,
                    success: function (data) {
                        //called when successful
                        $("#list").html(data);
                    },
                    error: function (e) {
                        //called when there is an error
                        //console.log(e.message);
                    }
                });
            });

    </script>

Answer 1

Remove the # you're prefixing to prevButton and nextButton as $(this).attr('id') will return the id without the # . The value of id_name will either be prevButton or nextButton .

UPDATE: Your final js script should look like this:

$("#prevbutton, #nextbutton").click(function () {

 var id_name = $(this).attr('id');
 var page = $("#currPageNumber").val();

 if (id_name == 'prevbutton' || id_name == 'nextbutton') {
    if (id_name == 'prevbutton') {
        page -= 1;    
    }
    if (id_name == 'nextbutton') {
        page +=1;
    }    
 }

 $.ajax({
    url: 'widget.php',
    type: 'GET',
    data: "page=" + page,
    success: function (data) {
        //called when successful
        $("#list").html(data);
    },
    error: function (e) {
        //called when there is an error
        //console.log(e.message);
    }
  });
 });

PHP script:

<?php
header("Cache-Control: public, max-age=60");
include("logindb.php");
$page = $_GET['page'];
$page = $page*9;
?>
<div id="list">
    <?php
        $abfrage59 = "SELECT n.news_title,n.news_id,FLOOR(TIMESTAMPDIFF(HOUR, n.timestamp, NOW())) as diff
        FROM news n
        WHERE n.domain_id = '2' AND n.timestamp < NOW()
        ORDER BY timestamp DESC
        LIMIT $page,9";
        $ergebnis59 = mysql_query($abfrage59);
        while ($row59 = mysql_fetch_object($ergebnis59)) {

        $newstitleslug = $row59->news_title;
        $newstitleslug = str_replace(' ', '-', $newstitleslug);
        $newstitleslug = strtolower($newstitleslug);

        echo "<div class=\"col-sm-6 col-md-4\" style=\"padding-bottom: 15px;\">
                <div class=\"item\">
                    <img class=\"main\" src=\"http://www.example.com/news/$row59->news_id.png\" />
                    <div class=\"text\">
                        <div class=\"inner\">
                            <a href=\"http://www.example.com/$newstitleslug/$row59->news_id/\" style=\"color:white;\">$row59->news_title<br />
                            <span class=\"date\">$row59->diff hours ago</span>
                        </div>
                    </div>
                    <input type='hidden' value='".$_GET['page']."' id='currPageNumber'>
                </div>
            </div>";

        }
    ?>
<?php
include("close_connect.php");
?>