AJAX Call does not work, even if PHP and JS files work independently

Question

I have an AJAX call set up. I tested the JS file by warning the POST values ​​that I am sending (and even warning the POST data line) and everything looks fine. Then I take these values ​​and put them in the PHP file where they are needed. I am trying to reproduce the process as simple as possible without any variables. It is working fine. Then I try to run the AJAX function and this gives me an error message. Here is my JS code (I have declared page_number and type variables before, but this is not relevant, I warned about this, and the variables are 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 launched this page myself with variables and displayed 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 find where everything breaks down when it comes to actually sending information to the server. Any help would be greatly appreciated. Thanks!

EDIT

There I get (for those who ask) that this warning "does not work" from the error function. When I warn "thrownError", it simply says "Not Found". This, I suppose, means that it does not start the request successfully (which I am not sure why).

Answer 1

this in the success callback did not refer to the clicked element, it contains the parameters $.ajax -call.

Create a closure to access the clicked element inside a successful callback.

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