[Solved] jQuery Error: Uncaught TypeError: $(...).mCustomScrollbar is not a function

RichardSa
 
on Nov 22, 2022 12:32 AM
295 Views

Hi everyone,

I tried to load both pdf and word document when a page load but the document is not showing. Here is the error that it is showing in the browser

Failed to load resource: the server responded with a status of 404

Uncaught TypeError: $(...).mCustomScrollbar is not a function

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
     <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" intergrity="sha384-AYmEC3Yw5cVb3ZcuHt0A9w35dYTsvhLPVnYs9eStHfGJv0vKxVfELGroGkvsg+p" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous" />
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' />
    <link href="css/bootstrap.min.css" rel="stylesheet" media="all" />
    <link href="css/bootstrap.css" rel="stylesheet" media="all" />
    <link href="css/invStyle.css" rel="stylesheet" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/>
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"/>
    <title>Document View</title>
</head>
<body style="background-color: #ffffff; font-family: 'Be Vietnam Pro', sans-serif;">
    <form id="form1" runat="server">
        <asp:ScriptManager ID="script" runat="server"></asp:ScriptManager>
        <div class="wrapper">
            <div id="content" style="font-size: 10pt; width: 100%; margin-top: 1%;">
                <h1 style="margin: 0 auto; padding: 10px; color: #1b4778; font-weight: 700; font-size: 10pt;">Verification</h1>
                <div class="row" style="width: 100%; padding: 10px; margin: 0 auto;">
                    <div class="col-sm-10" style="margin: 0 auto; padding: 6px; width: 100%;">
                        <div class="form-horizontal">
                            <div class="container-fluid" id="card" style="font-family: 'Be Vietnam Pro', sans-serif; width: 100%; height: 100%; margin: 0 auto; border: 1px solid #e4e7e8;">
                                <div id="parent" style="margin: 0 auto; display: flex; position: center; width: 100%;">
                                    <div class="contentt">
                                        <div id="dvContainer" style="width: 100%; height: 100%;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js"></script>
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
    <script type="text/javascript" src="https://volodymyrbaydalka.github.io/docxjs/dist/docx-preview.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.4.18/mammoth.browser.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf_viewer.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="docx-preview.min.js"></script>
    <script src="js/docx-preview.js"></script>
    <script type="text/javascript" src="Scripts/docx-preview.js"></script>
    <script type="text/javascript">
        $(function () {
            $.ajax({
                type: "POST",
                url: "docxverification.aspx/GetFile",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    if (r.d.ContentType != 'application/pdf') {
                        var doc = new File([new Uint8Array(r.d.Data)], r.d.ContentType);
                        if (doc != null) {
                            var docxOptions = Object.assign(docx.defaultOptions, {
                                useMathMLPolyfill: true
                            });
                            var container = document.querySelector("#dvContainer");
                            container.innerHTML = "";
                            docx.renderAsync(doc, container, null, docxOptions);
                        }
                    }
                    else {
                        LoadPdfFromBlob(r.d.Data);
                    }
                }
            });
        });

        var pdfjsLib = window['pdfjs-dist/build/pdf'];
        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js';
        var pdfDoc = null;
        var scale = 1;
        var resolution = 1;

        function LoadPdfFromBlob(blob) {
            pdfjsLib.getDocument({ data: blob }).promise.then(function (pdfDoc_) {
                pdfDoc = pdfDoc_;
                var pdf_container = document.getElementById("dvContainer");
                pdf_container.innerHTML = "";
                pdf_container.style.display = "block";
                for (var i = 1; i <= pdfDoc.numPages; i++) {
                    RenderPage(pdf_container, i);
                }
            });
        };
        function RenderPage(pdf_container, num) {
            pdfDoc.getPage(num).then(function (page) {
                var canvas = document.createElement('canvas');
                canvas.id = 'pdf-' + num;
                ctx = canvas.getContext('2d');
                pdf_container.appendChild(canvas);

                var spacer = document.createElement("div");
                spacer.style.height = "20px";
                pdf_container.appendChild(spacer);

                var viewport = page.getViewport({ scale: scale });
                canvas.height = resolution * viewport.height;
                canvas.width = resolution * viewport.width;

                var renderContext = {
                    canvasContext: ctx,
                    viewport: viewport,
                    transform: [resolution, 0, 0, resolution, 0, 0]
                };

                page.render(renderContext);
            });
        };
    </script>
</body>
</html>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Nov 22, 2022 12:31 AM
RichardSa says:
 <script src="js/bootstrap.min.js"></script>
    <script src="docx-preview.min.js"></script>
    <script src="js/docx-preview.js"></script>
    <script type="text/javascript" src="Scripts/docx-preview.js"></script>

Check with below.

<script src="~/js/bootstrap.min.js"></script>
<script src="~/docx-preview.min.js"></script>
<script src="~/js/docx-preview.js"></script>
<script type="text/javascript" src="~/Scripts/docx-preview.js"></script>

 

dharmendr
 
on Nov 22, 2022 11:08 PM

Hi RichardSa,

Make sure you have called the mCustomScrollBar plugin inside the document.ready event handler. Also JavaScript is case sensitive.

So make sure the spelling mCustomScrollBar instead of mCustomScrollbar.

$(function($){
    $(...).mCustomScrollBar();
});