assign value to php variable using jquery

Question

i am working on website with buttons each button fire up a bootstrap modal contain data from mysql database i pass a variable from the jquery that fire up the model into a mysql query inside the modal the problam is the php variable cannot get the data send it from the jquery any hints please ?!

i am passing data through jquery post to ajax.php file

the modal code

<div class="modal" id="myModal">

              <div class="modal-dialog">
                <div class="modal-content">

                  <!-- Modal Header -->
                  <div class="modal-header">
                    <span id="codeElem"></span>
                    <?php

                      $resultHead = mysqli_query($con2,"SELECT *  FROM coops WHERE Code = $getCode ");// WHERE Code IN ('".$codeArrayStr."')
                      ?>
                      <?php
                      $i=0;
                      $row3 = mysqli_fetch_array($resultHead);

                        ?>
                    <h4 class="modal-title"><?=$row3['CoopName'];?></h4>

                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                  </div>
                  <!-- Modal body -->
                  <div class="modal-body">
                    <?php
                    $result = mysqli_query($con,"SELECT DISTINCT *  FROM reports WHERE host = $getCode GROUP BY host DESC");
                    ?>
                    <?php
                    $i=0;
                    while($row = mysqli_fetch_array($result)) {
                      ?>

                      <div class="card card-figure has-hoverable">
                      <figure class="figure">
                      <img class="img-fluid" src="http://www.iroof.tv/screenshots/<?=$row['screenshot'];?>" alt="Card image cap">
                      <figcaption class="figure-caption">
                      <h6 class="figure-title"><?=$row['host'];?></h6>
                      <p class="text-muted mb-0"> <?=$row['timestamp'];?> </p>
                      <?php
                         // Assign JSON encoded string to a PHP variable
                         $statusJson = $row['status'];
                         // Decode JSON data into PHP associative array format
                         $arr = json_decode($statusJson, true);
                         // Call the function and print all the values
                      //   $result2 = printValues($arr);
                         echo "<hr>";
                         echo "<h3> Player </h3>";
                         // Print a single value
                         echo "Status: ".$arr["player"]["status"] . "<br>";
                         echo $arr["player"]["filename"] . "<br>";
                         echo "<hr>";
                         echo "<h3> Graphics </h3>";
                         echo "Display: ".$arr["video"]["display"] . "<br>";
                         echo "Resolution: ".$arr["video"]["resolution"] . "<br>";
                         echo "Colors: ".$arr["video"]["colors"] . "<br>";
                         echo "<hr>";
                         echo "<h3> System </h3>";
                         echo "CPU: ".$arr["cpu"] . "<br>";
                         echo "Ram: ".$arr["ram"] . "<br>";
                         //echo "Temprature: ".$arr["temperature"] . "<br>";
                         echo "Fan: ".$arr["fan"] . "<br>";
                       ?>
                      </figcaption>
                      </figure>
                      </div>
                      <?php $i++;
                      }
                      ?>
                  </div>

                  <!-- Modal footer
                  <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                  </div>-->

                </div>

the jquery script

  <script>
    $(document).ready(
      function() {
        setInterval(function() {

          $('.card');
        }, 5000);  //Delay here = 5 seconds
         var gen;
        $(".btn").click(function(){
           gen = $(this).attr("data-code");

           //$.post("ajax.php", {"code": gen},function(data){console.log(data);});

       });
       $('#myModal').on('shown.bs.modal', function () {
         $.post("ajax.php", {"code": gen},function(data){console.log(data);});
         //var phpCode = "<? $getCode = $_POST["code"]; ?>";
         //$('#codeElem').html(phpCode);
       })

        });
    </script>

ajax.php file

<?php
if(isset($_POST['code']) && isset($_POST['code'])){
  //$_SESSION["code"] = $_POST["code"];
  $_SESSION['header'] = $_POST['code'];
  $getCode = $_POST["code"];
  echo   $_SESSION['header'];
}

?>

i expect the variable $getCode to get the code from jquery to complete the mysql query inside the modal :

$resultHead = mysqli_query($con2,"SELECT *  FROM coops WHERE Code = $getCode"); 

Answer 1

I dont think its possible to post variables to a modal, I didnt see example like that when I was searching for popup modal login. guess you need an action page to forvard infos to modal. This is the solution to post variables: Change variables to your needs..

$(document).ready(function(){
    $("form").submit(function(event){
        event.preventDefault();
        var post_id =$("#mail-id").val();
        var name =$("#mail-name").val();
        var email =$("#mail-email").val();
        var message =$("#mail-message").val();
        var type =$("#mail-type").val();
        var captcha_code =$("#captcha_code").val();
        var submit =$("#mail-submit").val();
        $(".form-message").load("heads/comment.php",{
            post_id: post_id,
            name: name,
            email: email,
            message: message,
            type: type,
            captcha_code: captcha_code,
            submit: submit
        });
    });
});

you probably need some thing like this to show variables in popup

<p class="form-message"></p>    

Or you can check Bootstrap modal table : Here