asked on

Cannot use jQuery Function

Having trouble trying to manage a bootstrap Modal dialog.

See attached.

When I run this with Chrome debugger on it says "TypeError: $(...).modal is not a function". No line number given.

I assume it is referring to either line 55 or 60 in the attached. What is wrong?

modal_test1.js

Julian Hansen

Two possibilities (and / or)
jQuery is not available at the time the code runs
The bootstrap JavaScript library is not available when the code runs.

Can you post your full implementation showing the full page.

I am guessing they are not on the page because the modal is only accessed after a timeout is triggered which will be after all libraries have loaded.

ste5an

Or you have loaded it into a different variable.

Richard Korts

ASKER

Here are the bootstrap & google api references just after <head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/components/modal/">


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="hvac.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<script type="text/javascript" src="js/jquery.js"></script>

The full rendered HTML is attached:

summary.html

Jim Riddles

It looks like you are loading jQuery twice. Once from Google's CDN and again from your local directory. Perhaps that is causing an issue? Try removing the second line, "<script type="text/javascript" src="js/jquery.js"></script>", and see if that helps.

Richard Korts

ASKER

Jim Riddles,

You were at least partially right. I removed that reference & it runs. Sort of. Here is the Modal code:


<div class="modal fade" id="toutModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"><b>Warning!</b></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p id="modalptxt">Inactive for 2 minutes. You will be logged out in 4 minutes.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

The strange thing is it shows like the attached screen shot. Clicking Close does nothing. There is a tiny little area under the word "Warning" that is clickable but does nothing. There is no X in the upper right. I must have something else screwed up.

Bootstrap Modal.PNG

lenamtl

Hi,

By default Bootstrap modal will close by the X or by clicking outside of the modal
See the demo:
https://getbootstrap.com/docs/3.3/javascript/#live-demo

because you have custom JS I cannot says what causing the issue
check in console to see if any error (right click inspect)

I would comment the custom JS code related to the modal to seeif this is working ok.

Also keep only one JQuery link and make sure the link is the first, before the Bootstrap not after...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Open in new window

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Richard Korts

ASKER

Chris, perfect. I reverted to 3.3.5.That part works great.

Still two other issues, look for my next question.

Thank you!!

Richard Korts

ASKER

Chris, in case you are interested:

https://www.experts-exchange.com/questions/29234985/Trying-to-get-Bootstrap-Modal-Dialog-box-to-work.html