Passing PHP variable to modal Window

Question

I am following the solution given at Pass PHP variable to bootstrap modal

In my case, the trigger link passes the right value to the AJAX method, I have ckecked it in the developer consoler from the browser:

<td><a href="#myModal" class="btn btn-default btn-small" id="custId" data-toggle="modal" data-id="8">Edit</a></td>

Then, the modal windows opens, but the test value from info-doctor.php is not shown in it, not the test value and not the text "NO DATA".

What is wrong in my implementation?

Here you have my code:

Trigger:

$mostrar = '<td><a href="#myModal" class="btn btn-default btn-small" id="custId" data-toggle="modal" data-id="'.$row['id_doctor'].'">Edit</a></td>'; 

JS:

  $('#myModal').on('show.bs.modal', function (e) {
        var rowid = $(e.relatedTarget).data('id');
        console.log(rowid)
        $.ajax({
            type : 'post',
            url : 'info-doctor.php', //Here you will fetch records 
            data :  'rowid='+ rowid, //Pass $id
            success : function(data){
            $('.fetched-data').html(data);//Show fetched data from database
            }
        });
     });

PHP:

<?php

if($_POST['rowid']) {
    $id = $_POST['rowid']; //escape string

 }
 else {
     echo "NO DATA";
 }
?>

EDIT

This is the complete JS:

<script type="text/javascript" language="javascript" >


            $(document).ready(function(){


        $('#myModal').on('show.bs.modal', function (e) {
        var rowid = $(e.relatedTarget).data('id');

        $.ajax({
            type : 'post',
            url : 'info-doctor.php', //Here you will fetch records 
            data :  'rowid='+ rowid, //Pass $id
            success : function(data){
            $('.fetched-data').html(data);//Show fetched data from database
            console.log(rowid)
            }
        });
     });
       var dataTable =  $('#employee-grid').DataTable( {
                processing: true,
                serverSide: true,

                ajax: "employee-grid-data.php", // json datasource
                 //send it through get method

                language: {
        processing:     "Procesando datos...",
        search:         "Buscar:",
        lengthMenu:    "Mostrar _MENU_ doctores/as",
        info:           "Mostrando del doctor/a _START_ al _END_ de un total de _TOTAL_ doctores/as seleccionados" ,
        infoEmpty:      "Mostrando doctor/a 0 al 0 de un total de 0 doctores/as",
        infoFiltered:   "(filtrados de _MAX_ doctores/as)",
        infoPostFix:    "",
        loadingRecords: "Procesando datos...",
        zeroRecords:    "No hay doctores/as que cumplan los criterios",
        emptyTable:     "Noy hay datos que cumplan los criterios",
        paginate: {
            first:      "Primero",
            previous:   "Anterior",
            next:       "Siguiente",
            last:       "Ultimo"
        },
        aria: {
            sortAscending:  ": activer pour trier la colonne par ordre croissant",
            sortDescending: ": activer pour trier la colonne par ordre décroissant"
        }
    }

                } );

               var colvis = new $.fn.dataTable.ColVis( dataTable, {
                    buttonText: '<img src="images/down.gif" >',
                    activate: 'mouseover',
                    exclude: [ 0 ]  
                   } );
               $( colvis.button() ).prependTo('th:nth-child(1)');



            } );
        </script>

And this is the complete PHP for testing the issue:

<?php

     echo "NO DATA";

?>

Answer 1

You don't need AJAX to pass a variable if it is already set on the primary page especially if it's already a data attribute on the link. Use the data attribute on the modal link:

<a href="#myModal" class="btn btn-default btn-small" id="custId" data-toggle="modal" data-id="'.$row['id_doctor'].'">Edit</a>

Specifically, you have it available via data-id="'.$row['id_doctor'].'"

So....

   $('#myModal').on('show.bs.modal', function (e) {
       var rowid = $(this).attr('data-id');
        /*
        proceed with rest of modal using the rowid variable as necessary 
        */
     });

OR

     $('#myModal').on('show.bs.modal', function (e) {
       var rowid = $('#custId').attr('data-id');

     /*
       (This may need better targeting than an id which appear as though it would repeat resulting in invalid markup.) 
       proceed with rest of modal using the rowid variable as necessary 
     */
     });