douzhangcuo2174 2015-09-17 20:01
浏览 69
已采纳

在bootstrap模式中将javascript ID转换为PHP变量

I have users clicking on a button to popup a bootstrap modal and i'm passing a javascript variable into said modal. I'd like the variable to be a PHP variable so I can query the variable to show photos in the modal once a user clicks the button. Now, I understand PHP is server side and javascript client side which is where i'm lost. I figure it maybe needs some ajax, which is not my area.

Currently I'm using this javascript:

$(document).on("click", ".open-AddBookDialog", function () {
 var myBookId = $(this).data('id');
 $(".modal-body #bookId").val( myBookId );});

In the modal, the following is used and it shows the correct ID in the text box:

<input type="text" name="bookId" id="bookId" value="">
  • 写回答

3条回答 默认 最新

  • douluan4644 2015-09-17 20:12
    关注

    For Ajax solution, assuming that

    open modal button is;

    id="bookid" is the image dynamic id you have to pass to Ajax method to fetch images.

    <a class="btn btn-primary btn-xs" class="open-modal" href="" id="bookid">Open Modal</a>
    

    Ajax Should be

    $('.open-modal').click(function(){
        var id = $(this).attr('id');
        $.ajax({
          type : 'post',
           url : 'fetchimage.php', //Here you should put your query 
          data :  'imageid='+ id, //Here you pass your image id via ajax .
          success : function(data){
              // Open modal and show output data from file.php 
              $('#imagebox').show('show');
             $('#imged').html(data);
           }
        });
    });
    

    and Modal HTML should be

    <div class="modal fade" id="imagebox" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                    <div id="imged"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
    

    and in last fetchimage.php

    <?php
    //Database Connection
        if(isset($_POST['imageid'])){  
            $image = $_POST['imageid']; //Escape the string if you like.
            //Run Query to fetch image from database;
            //This will show the image into modal body
            echo '<img src="path-to-image/'. $row["image"] .'" alt="" />';
        }
    ?>
    

    Note: If you are opening modal with default behaviour data-attributes then use modal event listener and replace the click function as follow

    <a class="btn btn-primary btn-xs" data-id="bookid" data-target="#myModal" data-toggle="modal">Open Modal</a>
    

    show event listener

    $(document).ready(function(){
        $('#imagebox').on('show.bs.modal', function (e) {
            var id = $(e.relatedTarget).data('id'); //image id
           // Can run Ajax Method here
         });
    });
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥50 labview采集不了数据
  • ¥15 请上面代码做什么处理或什么混淆
  • ¥15 英雄联盟自定义房间置顶
  • ¥15 W5500网线插上无反应
  • ¥15 如何用字典的Key,显示在WPF的xaml中
  • ¥15 weautomate读取Excel表格信息然后填写到网页一直报错,如何解决?
  • ¥15 C#如何在Webview2中获取网页验证码
  • ¥15 esp32烧录失败,具体情况在图片上
  • ¥15 selenium安装报错
  • ¥15 在node.js中无法安装yarn