0

Getting this error after calling JavaScript function with Bootbox from code behind after I upgraded to bootstrap 5. But works fine if I call the same function from my aspx page.

Error: Uncaught Error: "$.fn.modal" is not defined; please double check you have included the Bootstrap JavaScript library. See https://getbootstrap.com/docs/5.1/getting-started/introduction/ for more details.

I've included all the dependencies.

My aspx code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script src="include/js/jquery-1.12.4.js"></script>
    <script src="include/js/jquery.min.js" type="text/javascript"></script>
    <script src="include/js/jquery-ui.min.js" type="text/javascript"></script>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>

    <script src="include/js/part/bootbox.min.js"></script>

    <script type="text/javascript">
        function AlertMessage() {
            bootbox.alert({
                title: "My title",
                message: "My Custom Message.....!!!",

            });
            return false;
        }

        $(document).ready(function () {
            /*AlertMessage();*/
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
        </div>
    </form>
</body>
</html>

My Code behind :

protected void Page_Load(object sender, EventArgs e)
{
    Page.RegisterStartupScript("Getdata", "<script type=text/javascript>AlertMessage();</script>");
}

Works fine when I call it from document ready. But shows error when called from code behind. Already tried Page.ClientScript.

Aakash Singh
  • 97
  • 2
  • 13
  • it all about timing i think. document ready waits for the page to be loaded so all the javacript has already been "rendered" – Jonathan Alfaro Dec 21 '22 at 06:15
  • Yes, but this used to work fine before I upgraded to bootstrap 5. @JonathanAlfaro – Aakash Singh Dec 21 '22 at 06:19
  • It looks like you load jQuery twice, and the minimized version doesn't seem to have a version number. Was that the case prior to upgrading as well? – Travis J Dec 21 '22 at 06:30
  • Yes. still, I tried removing one of the jQuery but facing the same issue, the minimized jQuery version is 3.1.1 @TravisJ – Aakash Singh Dec 21 '22 at 06:35
  • It would have helped to see the script declaration of the previous bootstrap. Was it declared locally? It seems that perhaps your DOM is loading prior to the scripts loading. This issue is potentially addressed here: https://stackoverflow.com/questions/11258068/is-it-possible-to-wait-until-all-javascript-files-are-loaded-before-executing-ja – Travis J Dec 21 '22 at 08:05
  • Yes, it was declared locally. I tried the same with updated bootstrap. Still doesn't work. @TravisJ – Aakash Singh Dec 21 '22 at 10:08
  • It works if I write my bootox.alert inside window onload. But I need a more general way. As bootbox.alert is used thousands of time in my project. – Aakash Singh Dec 21 '22 at 10:24

0 Answers0