Как заставить ЭТОТ скрипт jquery 1.11 работать в jquery 3.3 - PullRequest
Новая
       22

Как заставить ЭТОТ скрипт jquery 1.11 работать в jquery 3.3

1 голос
/ 05 июня 2019

Мой код основан на примере кода из Javascript - получение имен файлов в папке отображает список файлов с помощью jquery-1.11.2, но ничего не отображает с помощью jquery-3.3.1 и тегов ol отображать маркированный список вместо нумерованного списка.

Я создал приведенный ниже код и поместил его на свой сервер CENTOS 6 / Apache. Он прекрасно отображал список файлов, но неправильно форматировал его как маркированный список, а не как нумерованный список. Также, когда я пытался запустить его с помощью jquery 3.3.1, код ничего не отображал.

См. Рабочую версию на https://twirlers.bobhurt.com/showfiles.html.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Show Files</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <div class="container-fluid">
        <div id='fileNames'></div>
    </div>
</body>

<!--
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
-->
    <script src="js/jquery-1.11.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<script>//<![CDATA[
    $(window).load(function(){
        var $filedata = [
            [".pdf", "Printable PDF Template Files"],
            [".svg", "Scalable Vector Graphic Source Files for Editing in Inkscape"]
            ];
        var $folder = "assets/";

            $(document).ready(function(){

                $.ajax({
                    //This will retrieve the contents of the folder if the folder is configured as 'browsable'
                    url: 'assets/',
                    success: function (data) {
                        console.log(data);
                        $("#fileNames").html('<br>');
                        for (var i = 0; i < $filedata.length; i++) {
                            $("#fileNames").append('<h3>'+ $filedata[i][1]+'</h3>');
                            $("#fileNames").append('<ol>');
                            $(data).find("a:contains(" + $filedata[i][0] + ")").each(function () {
                                $("#fileNames").append( '<li><a href="'+$folder+$(this).text()+'">'+$(this).text()+'</a></li>');
                            });
                            $("#fileNames").append('</ol>');
                        }
                    }
                });

            });
    });
    //]]>
    </script>

Я ожидал, что код, использующий jquery 3.3.1, отобразит список файлов, но он ничего не отображал и сообщения об ошибке не было.

Я ожидал, что список файлов будет пронумерован, потому что я использовал теги ol, но код отображал его с маркированными элементами.

Итак, Вопросы:

  1. Что я могу сделать, чтобы скрипт работал с jquery-3.3.1?
  2. Что я могу сделать, чтобы список файлов был пронумерован вместо маркированного списка?

1 Ответ

0 голосов
/ 05 июня 2019

В голове 

<script type="text/javascript" src="/jquery-1.11.2.js"></script>
<script type="text/javascript">
    var $ver1JQ = jQuery.noConflict();
</script>
<script type="text/javascript" src="/jquery-3.3.1.js"></script>
<!-- the version 3 in now in $ while the 1 is in $myJQ -->

В версии 3 можно сохранить глобальные $

(function($){
    //inside this function, using $ means using the global $myJQ
    $('#selector')...
})($ver1JQ);

См. Ссылку https://api.jquery.com/jquery.noconflict/, которая поможет вам попытаться решитьваша проблема.

...