C
C#•9mo ago
Ares

[ASP.NET Core] Help using js library in my view?

I am trying to use paginationjs library: https://github.com/superRaytin/paginationjs in my home index view in a script tag. so I went to the wwwroot/lib, i right clicked and searched for paginationjs and installed it. and then i saw the paginationjs folder appear in the lib folder. so then I made a script tag 
<script src="~/lib/paginationjs/src/pagination.js"></script>
<script src="~/lib/paginationjs/src/pagination.js"></script>
and put it in my view. and then in the shared _layout.cshtml, I have the jsquery script tag 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
i also made an empty div for the pagination container and then i made the below script: 
<script>
    const populateGrid = async () => {
        const { polls, pollCount } = await getData()
        $('#pagination-container2').pagination({
            dataSource: polls,
            callback: function (data, pagination) {
                // template method of yourself
                var html = template(data);
                $('#data-container').html(html);
            }
        })


    }
    populateGrid();
</script>
<script>
    const populateGrid = async () => {
        const { polls, pollCount } = await getData()
        $('#pagination-container2').pagination({
            dataSource: polls,
            callback: function (data, pagination) {
                // template method of yourself
                var html = template(data);
                $('#data-container').html(html);
            }
        })


    }
    populateGrid();
</script>
however, whenever I run it in the browser, i see in the console: 
?page=1:362 Uncaught (in promise) TypeError: $(...).pagination is not a function
    at populateGrid (?page=1:362:37)
?page=1:362 Uncaught (in promise) TypeError: $(...).pagination is not a function
    at populateGrid (?page=1:362:37)
how can i fix this? it doesnt recognize the library at all even th ough its installed
No description
10 Replies
Ares
Ares•9mo ago
No description
Angius
Angius•9mo ago
Where did you put the library import, and where did you put the inline script tag? The library has to be loaded before your script
Ares
Ares•9mo ago
i was working on it before you cam e but what i did was i went and i copied all of the scripts from paginationjs.com and i have it in my clipboard, then i made a new file in /wwwroot/js called pagination.js
No description
Ares
Ares•9mo ago
and then i used the script to reference it, so i have the script loading and then the script to populate the grid afterwards and then in shared _Layout.cshtml, I have this in the head 
//Views/Shared/_Layout.cshtml
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - realTimePolls</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css" integrity="sha512-T584yQ/tdRR5QwOpfvDfVQUidzfgc2339Lc8uBDtcp/wYu80d7jwBgAxbyMh0a9YM9F8N3tdErpFI8iaGx6x5g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/realTimePolls.styles.css" asp-append-version="true" />
    <link href="//fonts.googleapis.com/css?family=Roboto:100,400,300" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    **<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>** <------------ **Jquery**
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/js/bootstrap.min.js" integrity="sha512-UR25UO94eTnCVwjbXozyeVd6ZqpaAE9naiEUBK/A+QDbfSTQFhPGj5lOR6d8tsgbBk84Ggb5A3EkjsOgPRPcKA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@600&display=swap" rel="stylesheet">
</head>
//Views/Shared/_Layout.cshtml
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - realTimePolls</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css" integrity="sha512-T584yQ/tdRR5QwOpfvDfVQUidzfgc2339Lc8uBDtcp/wYu80d7jwBgAxbyMh0a9YM9F8N3tdErpFI8iaGx6x5g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/realTimePolls.styles.css" asp-append-version="true" />
    <link href="//fonts.googleapis.com/css?family=Roboto:100,400,300" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    **<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>** <------------ **Jquery**
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/js/bootstrap.min.js" integrity="sha512-UR25UO94eTnCVwjbXozyeVd6ZqpaAE9naiEUBK/A+QDbfSTQFhPGj5lOR6d8tsgbBk84Ggb5A3EkjsOgPRPcKA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@600&display=swap" rel="stylesheet">
</head>
but for some reaosn when i launch the app and look in the browser, i see this
Ares
Ares•9mo ago
No description
Ares
Ares•9mo ago
<script src="~/js/pagination.js"></script>
<script src="~/js/pagination.js"></script>
i changed it to this and now it is able to find the script but it still says $(...) is not a function which doesnt make sense cause jquery works fine i tested it so i dont understand
Angius
Angius•9mo ago
Try to wrap it in a document.ready function? https://learn.jquery.com/using-jquery-core/document-ready/
Ares
Ares•9mo ago
ok one sec 
<script>
    // A $( document ).ready() block.
    $(document).ready(function () {
        const populateGrid = async () => {
            const { polls, pollCount } = await getData()
            $('#pagination-container2').pagination({
                dataSource: polls,
                callback: function (data, pagination) {
                    // template method of yourself
                    var html = template(data);
                    $('#data-container').html(html);
                }
            })


        }
        populateGrid();
    });
</script>
<script>
    // A $( document ).ready() block.
    $(document).ready(function () {
        const populateGrid = async () => {
            const { polls, pollCount } = await getData()
            $('#pagination-container2').pagination({
                dataSource: polls,
                callback: function (data, pagination) {
                    // template method of yourself
                    var html = template(data);
                    $('#data-container').html(html);
                }
            })


        }
        populateGrid();
    });
</script>
still doesnt work unfortunately
Ares
Ares•9mo ago
No description
Ares
Ares•9mo ago
?page=1:366 Uncaught (in promise) TypeError: $(...).pagination is not a function
    at populateGrid (?page=1:366:41)
?page=1:366 Uncaught (in promise) TypeError: $(...).pagination is not a function
    at populateGrid (?page=1:366:41)
Want results from more Discord servers?
Add your server