Click here to Skip to main content
15,941,973 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hey guys

I have a bootstrap modal in which I intend to display details of a clicked entry in a table. When user clicks on "Details" button of a particular entry, I post the Id value to a PHP page using Jquery and Ajax where some query is made to the DB to return details data in the modal.
I succeed in getting the Id with the Jquery code, but seems like this is not posted to the PHP page as defined in my Ajax code. As such I have nothing displayed in the modal, nothing but the Error message I defined if the Id value is not posted to the PHP page.

I couldn't succeed in finding out what I'm doing wrong. Thanks in advance for your help!

What I have tried:

Here's my code

HTML code:
HTML
<input type="button" name="select-students" value="Détails" id="<?php echo $row['sessionid']; ?>"class="btn btn-info select-students">


Ajax Code:
JavaScript
<script>
  $(document).ready(function(){
    $(document).on('click', '.select-students', function(){
      var sessionId = $(this).attr("id");
      alert(sessionId);

      if (sessionId != '') {
          $.ajax({
          url: "select_students.php",
          method : "POST",
          data : {sessionId:sessionId},
          success : function(data){
            $('#students').html(data);
            $('#detailmodal').modal('show');
          }
        });
      }
      else
      alert("Cannot display modal !");
    });
  });
</script>


PHP Code :
PHP
<?php
    if (isset($_POST["sessionId"])) {
        $output = '';
        //Fetching students who wrote a particular exam session
    $req = $db->prepare('SELECT distinct(Datesession),Code,sessionid,Startdate,Enddate from session');
    $req->execute();
    $donnee = $req->fetchAll();
    foreach ($donnee as $row) {

    $request = $db->prepare('SELECT name,surname,email  from candidat,session 
                             where sessionid= ' . $_POST["sessionId"]. ' ');
    $request->execute();
    $candidatId = $request->fetchAll();

    $rang = 1;
    $output .= '<div class = "table-responsive>"
    <table class="table table-bordered">
    <thead>
        <tr>
            <th>#</th>
            <th>Name</th>
            <th>Surname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>';

    foreach ($candidatId as $key) {
    $output .='
    <tr>
        <td>'.$rang.'</td>
        <td>'.$key['name'].'</td>
        <td>'.$key['surname']. '</td>
        <td>'.$key['email']. '</td>
    </tr>
    ';
    $rang = $rang + 1;
        }
    }
    $output .='
    </tbody>
    </table>
    </div>
    ';

    echo $output;
    }
    else
    echo "Erreur 404"
    ?>
Posted
Updated 14-Apr-20 23:46pm

1 solution

Try adding the content type

JavaScript
$.ajax({
          url: "select_students.php",
          contentType: "application/x-www-form-urlencoded; charset=UTF-8",
// rest of code


That will ensure the data is sent in a format that can be parsed by _POST
 
Share this answer
 
Comments
Nice Kloe 15-Apr-20 6:22am    
Thanks for your response @F-ES Sitecore, but I tried and have the same result, no table details displayed in modal
F-ES Sitecore 15-Apr-20 6:27am    
Is the sessionID properly passed though?
Nice Kloe 15-Apr-20 6:34am    
I'm not sure it's. On my PHP page, I have an if(isset($_POST['sessionId']) condition which verifies that the sessionId has a value before displaying the details in the modal. But it's the else part of this condition which is being executed each time. I suppose this means the sessionId does not have any value on this page.

At the level of the JS code, I can see the sessionId is correctly grabed from the HTML button and so it's not undefined
F-ES Sitecore 15-Apr-20 7:04am    
So you get the 404 error text back? Use the browser's network tools (f12, then look at the network tab) to establish exactly what is being sent and what is coming back. You have to make sure the id is being sent and interpreted correctly, and then check sql returns valid data, so verify each step at a time until you find the one that fails. There is no point in making assumptions, use debugging techniques to verify what is happening.
Nice Kloe 15-Apr-20 7:57am    
I used the network tools and on viewing the "Headers" tab, I can see the Request URL is as such : http://localhost/projects/HTML/select_students.php?sessionId=1. From this, I can see that sessionId is being sent to the server.
On looking at the "Response" tab, I saw that the server returns the "Error 404" message.
There's something which annoyed me somehow: upon looking at the "Headers" tab, I saw the Request Method was defined to "GET". Is this normal?
I admit I'm not an expert at using the inspect element for code debugging. Please, is there somewhere else I have to check to see what is going wrong?

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900