BootStrap Modal Popup not opening using JQuery

Question

I am using boot strap modal popup, And i want to open using jquery

I tried like

 $('#my_modal').modal('show');

But its thronging Error like

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

JQUERY CDN references:

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>


    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.0/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.html5.min.js"></script>

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.7.0/css/buttons.dataTables.min.css" />
    <link rel="stylesheet" type="text/css" href="CSS/main.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />

Is there any order mismatch while loading Jquery references.

Console window

Kindly help me where i am doing mistake

@RyanWilson Then how can i load `boostrap.js file` is there any other `CDN` i have to use for that ? — ak74, Mar 24 '21 at 18:37
@RyanWilson No its not indeed local may i know which `CDN` I need to use could you please mention that `CDN` URL here — ak74, Mar 24 '21 at 18:40
A quick Google search provided me: [Bootstrap CDN](https://www.bootstrapcdn.com/) — Ryan Wilson, Mar 24 '21 at 18:41
@RyanWilson I looked same but which CDN will properly work there are multiple `CDN` alliable in mention URL Kindly suggest me which `CDN` should i use here. I think i need to use `.css` CDN correct me if i am wrong — ak74, Mar 24 '21 at 18:44
i tried `https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js` but same error i am getting. Kindly check my updated code. I added online `CDN` as you suggested but still same error i am facing — ak74, Mar 24 '21 at 18:52
@ak47 I notice you are using mixed content: http and https, on your resources, perhaps try using a CDN for jQuery under https, it may be that your browser is blocking the load of jQuery since it is pointing to http. And boostrap.js is dependent on jQuery — Ryan Wilson, Mar 24 '21 at 18:55
@RyanWilson I changed from `http`to `https` but still same error kindly check my updated code i have added screenshot's for that references — ak74, Mar 24 '21 at 18:59
You're issue is because you load jQuery twice. Remove the second reference to jQuery which is after boostrap.js — Ryan Wilson, Mar 24 '21 at 19:07
@RyanWilson thanks a lot its working now thank you much buddy — ak74, Mar 24 '21 at 19:09

BootStrap Modal Popup not opening using JQuery

0 Answers0