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>
    
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题