dongrong1856 2019-01-22 21:04
浏览 68
已采纳

如何使用ajax在bootstrap模式中加载某种类型的文件

I have a simple bootstrap modal here: https://jsfiddle.net/blacode/kecyrv4q/
I´m trying to do the same but in a remote way with ajax. I've added a bit more of complexity adding glob function (PHP) to look for an image in a specific directory with image type validation in ajax request. Here is the code:
index.php

    <body>
        <div class="container">
            <h2>Basic Modal Example</h2>

            <!-- Trigger the modal -->
            <a href="image.php" class="modalImage" data-toggle="modal" data-var="images/image/">
                <img class="img-fluid" src="image.png" alt="" style="width:20%">
            </a>

            <!-- Modal -->
            <div class="modal fade" id="myModal" role="dialog">
                <div class="modal-dialog modal-lg">

                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Modal Header</h4>
                        </div>
                        <div class="modal-body">
                            <img class="img-fluid img-responsive" src="" alt="">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                    <!-- Close modal content-->

                </div>
            </div>
            <!-- Close modal -->

        </div>
        <!-- Close container -->

    </body>

page to search image in specific directory (image.php): 

<?php
header('Content-Type: application/json');
$directory = $_POST['var'];
echo json_encode (glob($directory. '*.{png,mp4}', GLOB_BRACE));
?>

ajax request: 

$(document).ready(function(){
$('.modalImage').click(function (event) {
event.preventDefault();
var data = this.dataset;

        $.ajax({
            url: "image.php",
            data: data,
            type: "POST",
            dataType: "json",
            success: function(data) {
                var imgs = data.map(function(img) {
                    var html = "";
                    var fileExtension = img.substring(img.lastIndexOf('.'));
                    if (fileExtension == ".png") {
                        return html = '<img src="'+img+'"></img>';
                        $('.modal-body').load(html,function(){
                            $('#myModal').modal({show:true});
                        });
                    }
                });
            } 
        });
    });
});

Unfortunately the page doesn't respond. The console shows these warnings:

unreachable code after return statement  
ReferenceError: $ is not defined

Is there a way to do that?

  • 写回答

1条回答 默认 最新

  • dpvmtdu364462 2019-01-22 21:29
    关注

    You are returning from the function before trying to set the html and showing the modal. Just set the value of html and then the html of the .modal-body element like below.

    As for the issue with $ undefined, you need to reference jQuery prior to this script.

    <script src="https://code.jquery.com/jquery-3.3.1.js" 
        integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" 
        crossorigin="anonymous"></script>
<script>
    $(document).ready(function(){
        $('.modalImage').click(function (event) {
            event.preventDefault();
            var data = this.dataset;

            $.ajax({
                url: "image.php",
                data: data,
                type: "POST",
                dataType: "json",
                success: function(data) {
                    var imgs = data.map(function(img) {
                        var html = "";
                        var fileExtension = img.substring(img.lastIndexOf('.'));
                        if (fileExtension == ".png") {
                            html = '<img src="'+img+'"></img>';
                            $('.modal-body').html(html);
                            $('#myModal').modal({show:true});

                        }
                    });
                } 
            });
        });
    });
</script>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 用Multisim设计汽车尾灯控制电路
  • ¥15 关于#java#的问题，请各位专家解答！(开发工具-eclipse)
  • ¥100 求用matlab求解上述微分方程的程序代码
  • ¥15 MAC安装佳能LBP2900驱动的网盘提取码
  • ¥400 微信停车小程序谁懂的来
  • ¥15 ATAC测序到底用什么peak文件做Diffbind差异分析
  • ¥15 安装ubantu过程中第一个vfat 文件挂载失败
  • ¥20 GZ::CTF如何兼容一些靶机？
  • ¥15 etcd集群部署问题
  • ¥20 谁可以帮我一下问一下各位