Click here to Skip to main content
14,733,541 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:
<input type="button" name="select-students" value="Détails" id="<?php echo $row['sessionid']; ?>"class="btn btn-info select-students">


Ajax Code:
<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
    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 15-Apr-20 0:46am

1 solution

Try adding the content type

$.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
   
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?
F-ES Sitecore 15-Apr-20 8:45am
   
Yeah, it should be a post, not a get so something odd is going on there. Is the input in a form with a get method? Another long shot is to add a call to preventDefault in case you're getting two calls, one in ajax and one when the form goes on to submit. preventDefault will stop the form submission

$(document).on('click', '.select-students', function (e) {
e.preventDefault();
var sessionId = $(this).attr("id");
Nice Kloe 15-Apr-20 9:09am
   
No, the input is in a td tag, in a table and the type is defined to "button". So there aren't two calls being made on the page

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

  Print Answers RSS
Top Experts
Last 24hrsThis month



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