How to make THIS jquery 1.11 script work in jquery 3.3

Question

My code based on sample code from Javascript - Retrieve names of files in a folder displays the file list with jquery-1.11.2, but displays nothing with jquery-3.3.1, and the ol tags display a bulleted list instead of a numbered list.

I created the below code and put it on my CENTOS 6/Apache server. It showed the file list perfectly, but formatted it wrongly as a bulleted list rather than a numbered list. Also, when I tried to run it using jquery 3.3.1, the code displayed nothing.

See working version at 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>

I expected the code using jquery 3.3.1 to display the file list, but it displayed nothing, and no error message.

I expected the file list to be numbered because I used the ol tags, but the code displayed it with bulleted items.

So, Questions:

What can I do to make the script work with jquery-3.3.1?
What can I do to make the file list numbered instead of bulleted?

you have to use jQuery Migrate Plugin https://jquery.com/download/#jquery-migrate-plugin — Mister Jojo, Jun 05 '19 at 03:30

score 0 · Answer 1 · answered Jun 05 '19 at 05:03

In the head

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

In version 3 can keep the global $

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

See this link https://api.jquery.com/jquery.noconflict/ that help you to try to solve your problem.

How to make THIS jquery 1.11 script work in jquery 3.3

1 Answers1