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";

?>

Well, you're not echoing anything back at all, unless the `rowid` param is missing, which it's not ? — adeneo, Aug 14 '16 at 18:26
@adeneo, you are right, but I have checked it also without if clause and only echo "TEST" inside the PHP file, and the same result, thank, you — mvasco, Aug 14 '16 at 18:29
So if your PHP is just `echo "something";` and you do `console.log(data)` in the success function, you get nothing ? — adeneo, Aug 14 '16 at 18:34
If you visit the URL direcly in the browser, i.e. typing `localhost://info-doctor.php` or whatever in the adressbar, and you still get nothing, something is wrong with your PHP. If you do get something, the problem is the ajax call — adeneo, Aug 14 '16 at 18:44
@adeneo, I have edited my question and included the complete JS, so you can check if there is something that could interfere the execution. And I have also included the test version of the PHP file and the modal window output — mvasco, Aug 14 '16 at 18:44
@adeneo, the PHP direct execution shows NO DATA as result, it works, please take a look http://herasalud.com/info-doctor.php — mvasco, Aug 14 '16 at 18:46
`console.log(data)` in the success function, not the `rowid` and see that there is no data returned. Did you see the `rowid` in the console by the way, if you didn't, the function never runs, probably because `show.bs.modal` never happens — adeneo, Aug 14 '16 at 18:46
@adeneo, I don't see the rowid in the console, but the modal window opens — mvasco, Aug 14 '16 at 18:51
Try this and see what the console says -> https://jsfiddle.net/ctyzmcaj/1/ — adeneo, Aug 14 '16 at 18:54
What everyone is commenting about and appears to not be understood is...... because the ajax is calling HTML in the success function, the **PHP file needs to echo or return the HTML you wish to display in the modal window**, not simply a variable setting. Also, if the variable is set on the page (before modal) you don't need ajax to pass that variable to the modal. — Scott, Aug 14 '16 at 19:01
@adeneo, the console output is empty on that point or I can't find it. May be you need the URL from the web site and check the console? — mvasco, Aug 14 '16 at 19:03
So you've copied the code from the fiddle, and got no console logs at all ? — adeneo, Aug 14 '16 at 19:34
I think you should not use "show.bs.modal" event. This make modal shows before loading data because of async ajax. You can fire up modal after done loading it's content — KmasterYC, Aug 14 '16 at 20:43

Scott · Answer 1 · 2016-08-14T19:23:49.933

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 
     */
     });

edited Aug 14 '16 at 19:23

answered Aug 14 '16 at 19:10

Scott

21,475
8
43
55

I need to get values from a MySQL database, that is the reason for calling the AJAX method to pass the variable to the PHP file. – mvasco Aug 14 '16 at 19:14
My point is, you *already* have the variable information in the primary page.. you *don't* need to query the database to retrieve it again. You merely need to pass the variable to the modal call. – Scott Aug 14 '16 at 19:17
I understand that you say that the variable is already in the primary page, and then can you tell me how can I get the data there from the database? Just a simple PHP script with a query to the database? How can I pass the given variable to the modal call? – mvasco Aug 14 '16 at 19:21

Passing PHP variable to modal Window

1 Answers1