将PHP变量传递给模态窗口

时间:2016-08-14 18:24:27

标签: javascript php jquery ajax twitter-bootstrap

我正在遵循Pass PHP variable to bootstrap modal

给出的解决方案

在我的情况下,触发器链接将正确的值传递给AJAX方法,我已经在浏览器的开发者控制器中将其删除了:

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

然后,模态窗口打开,但是info-doctor.php中的测试值没有显示在其中,而不是测试值,而不是文本“NO DATA”。

我的实施有什么问题?

这里有我的代码:

触发:

$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";
 }
?>

修改

这是完整的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>

这是用于测试问题的完整PHP:

<?php

     echo "NO DATA";

?>

1 个答案:

答案 0 :(得分:0)

如果已经在主页面上设置了变量,则不需要AJAX传递变量,特别是如果它已经是链接上的数据属性。使用模态链接上的data属性:

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

具体来说,您可以通过data-id="'.$row['id_doctor'].'"

获取它

...所以

   $('#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 
     */
     });