Failed to load resource: the server responded with a status of 404 Not Found

Question

I'm new to Wordpress and Ajax and dont really know how to solve this problem, so any help would be appreciated.

I am working on a Wordpress Theme, where all students from a database are displayed in a table:

    <?php

get_header();

if(have_posts()):
    while(have_posts()) : the_post(); ?>

<article class="post page">
<a href="<?php the_permalink(); ?>"><?php the_content(); ?>

<!DOCTYPE html>
<html>
<head> 



        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  

<style>

}
    img {
    vertical-align: middle; 

}
    table {
    border-collapse: collapse;
    width: 100%;
    border-spacing: 50px 0;
    text-align: center;
}


    .hover:hover{
        background-color: antiquewhite;

    }
    td{
        padding: 10px;
    }
    .aligncenter{
        text-align: center;
    }


    div.scroll {
    position: static;
    width: 700px;
    height: 400px;
    overflow: scroll;
    overflow-x: hidden;
    }
    a {
    text-decoration: none;
    }


</style>
</head>

<body>
    <div class="scroll"><a href="<?php the_permalink(); ?>"><?php the_content(); ?> </a>
<?php
$mysqli = NEW MySQLi('localhost','root','','wp_db');

        if(isset($_GET['order'])){
            $order = $_GET['order'];
        }else{
            $order = 'name';
        }

        if(isset($_GET['sort'])){
            $sort = $_GET['sort'];
        }else{
            $sort ='ASC';
        }

        $result = $mysqli->query("SELECT * FROM wp_absolventen ORDER BY $order $sort");

        $image = $row['bild'];

        if($result->num_rows > 0){

            $sort == 'DESC' ? $sort = 'ASC' : $sort ='DESC'; // short IF statements 
                 ?>
                 <div class="table-responsive" style=overflow-x:auto;>  
            <table class="table table-bordered">
            <?php
            echo "
            <th></th>
            <th class='aligncenter'>
            <a href='?order=name&&sort=$sort'>Name</a></th>
            <th class='aligncenter'><a href='?order=geburtsdatum&&sort=$sort'>Geburtsdatum</a></a></th>
            <th class='aligncenter'><a href='?order=stadt&&sort=$sort'>Wohnort</a></th>
            ";
            ?>
            <?php
            while($rows = $result->fetch_assoc())
            {
                $name = $rows['name'];
                $geburtsdatum= $rows['geburtsdatum'];
                $stadt = $rows['stadt'];
                $p='<img src="data:image/jpg;base64,' . base64_encode( $rows['bild'] ) . '"/>';
                $id = $rows['id'];

                ?>

                <tr class='hover'>


                <td> <?php echo $p; ?></td>



                <td><input type="button" name="view" value="<?php echo $name; ?>" id="<?php echo $row["id"]; ?>" class="btn btn-info btn-xs view_data" /></td> 



                <td><?php echo $geburtsdatum; ?></td>



                <td><?php echo $stadt; ?></td>
                </tr>

               <?php

            }

        }else{
            echo "No records returned.";
        }
        ?> 
        </table>
         </div>


</body>
</html>
</article>
  <div id="dataModal" class="modal fade">  
      <div class="modal-dialog">  
           <div class="modal-content">  
                <div class="modal-header">  
                     <button type="button" class="close" data-dismiss="modal">&times;</button>  
                     <h4 class="modal-title">Employee Details</h4>  
                </div>  
                <div class="modal-body" id="employee_detail">  
                </div>  
                <div class="modal-footer">  
                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
                </div>  
           </div>  
      </div>  
 </div>  
    <script>  
 $(document).ready(function(){  
      $('.view_data').click(function(){  
           var employee_id = $(this).attr("id");  
           $.ajax({  
                url:"select.php",  
                method:"post",  
                data:{employee_id:employee_id},
                succes:function(data){  
                    $('#employee_detail').html(data);  
                     $('#dataModal').modal("show");  
                }  
           });  
      });  
 });  

 </script>










<?php 
    endwhile;

    else :
        echo '<p>No contect found</p>';
    endif;

get_footer();
?>

So far so good, but when you click on a students name, it should open a bootstrap modal, where the information about the student are displayed (fetched from Database).

     <script>  
 $(document).ready(function(){  
      $('.view_data').click(function(){  
           var employee_id = $(this).attr("id");  
           $.ajax({  
                url:"select.php",  
                method:"post",  
                data:{employee_id:employee_id},
                succes:function(data){  
                    $('#employee_detail').html(data);  
                     $('#dataModal').modal("show");  
                }  
           });  
      });  
 });  

 </script>

This is the function that calls another php file (select.php),opens the modal and gets the information from the database. The select.php file:

<?php  
 if(isset($_POST["employee_id"]))  
 {  
      $output = '';  
      $connect = mysqli_connect("localhost", "root", "", "wp_db");  
      $query = "SELECT * FROM wp_absolventen WHERE id = '".$_POST["employee_id"]."'";  
      $result = mysqli_query($connect, $query);  
      $output .= '  
      <div class="table-responsive">  
           <table class="table table-bordered">';  
      while($row = mysqli_fetch_array($result))  
      {  
           $output .= '  
                <tr>  
                     <td width="30%"><label>Name</label></td>  
                     <td width="70%">'.$row["name"].'</td>  
                </tr>  

                ';  
      }  
      $output .= "</table></div>";  
      echo $output;  
 }  
 ?>

But when I try to click on the students name, the modal doesnt open, instead I get this 404 error: Failed to load resource: the server responded with a status http://localhost/wordpress/sample-page/select.php of 404 (Not Found). Both files are in the same folder.

The code works when its not in a wordpress folder.

M.M.

Anthony Anthony · Accepted Answer · 2017-12-27T21:40:34

I answered similar question from a different thread... Basically, establish/write a simple php file and if you can access it directly via browser, then you call it via ajax.... The set up is prefixing the file name with page-"title-of-page".php, then create a blank page with "title-of-page" similar to the aforementioned convention, and then set up your permalinks url. Here's the other thread.

Failed to load resource: the server responded with a status of 404 Not Found

3 Answers