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

图片转代码服务由CSDN问答提供 功能建议

我让用户点击按钮弹出一个bootstrap模式,我将一个javascript变量传递给所述模态。 我希望变量是一个PHP变量,这样我就可以在用户点击按钮后查询变量以显示模态中的照片。 现在,我理解PHP是服务器端和javascript客户端,这是我迷失的地方。 我想它可能需要一些ajax,这不是我的区域。

目前我正在使用这个javascript:

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

在模态中,使用以下内容并在文本框中显示正确的ID: <前> &lt; input type =“text”name =“bookId”id =“bookId”value =“”&gt;

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

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条)

相关推荐 更多相似问题