AJAX Call is not working even though the PHP and JS files work on their own

Question

I've got an AJAX call set up. I've tested the JS file by alerting out the POST values I'm sending (and even alerting out the POST data string) and everything looks fine. I then take those values and put them in the PHP file where they are needed. I'm trying to replicate the process as easy as possible without any variables. It works fine. I then try to run the AJAX function and it gives me the error message. Here is my JS code (I declare the page_number and type variables earlier but it's not relevant; I've alerted those out and the variables are being assigned correctly):

$('.pagination_button').click(function(){

    //MAKE AJAX CALL TO REPOPULATE TABLE
    var myData = 'page_number='+ page_number + '&type='+ type;

            $.ajax({
                type: 'POST', // HTTP method POST or GET
                url: 'archive_ajax.php', //Where to make Ajax calls
                dataType:'text', // Data type, HTML, json etc.
                data:myData, //post variables
                success:function(response){

                //REFORMAT UPON SUCCESSFUL AJAX CALL
                $(this).parent().find('span.page_counter').text(next_page);
                $(this).closest('.archive_table').append(response);*/


                },
                error:function (xhr, ajaxOptions, thrownError){
                    alert('didn\'t work'); //throw any errors
                }
            }); 
});

Here is the server side code. I've run this page by itself with variables and it displays everything correctly:

<?php
include('../includes/connect.php');

$page_number = mysqli_real_escape_string($_POST['page_number']);
$type = mysqli_real_escape_string($_POST['type']);

$start_number = $page_number*10;

if($type=="pagination_1"){
$type = "archive_1";
}
else if($type=="pagination_2"){
$type = "archive_2";
}
else if($type=="pagination_3"){
$type = "archive_3";
}

$sql = "SELECT * FROM ".$type." ORDER BY timestamp ASC LIMIT ".$start_number.", 10";
$result = $mysqli->query($sql);

while($row = mysqli_fetch_array($result)){
$converted = date('m/d/y', strtotime($row['timestamp']));
echo "<tr class='table_data' style='float:left;'>
<td>".$converted."</td>
</tr>";
}

?>

I can't seem to find where everything breaks down when it comes to actually sending the information to the server. Any help would be greatly appreciated. Thanks!

EDIT

There I am getting (for those asking) is that it is alerting 'didn't work' from the error function. When I alert 'thrownError', it just says 'Not Found'. This, I'm assuming, means that it's not running the query successfully (which I'm not sure why).

Answer 1

this inside the success-callback did not refer to the clicked element, it contains the options of the $.ajax -call.

Create a closure to get access to the clicked element inside the success-callback.

$('.pagination_button').click(function(){
  var that = this
  $.ajax({
           success:function(response){
                   //use here $(that) instead of $(this)
                   }
        }); 
});