This question already has answers here:
JQuery - $ is not defined
(36 answers)
Closed 3 months ago.
I have this code but it gives me an error when opening the modal:
ReferenceError: $ is not defined
Can somebody help me?
First we have the form, almost at the end the modals and then the jquery script.
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="./assets/css/style.css">
<link rel="icon" type="image/jpg" href="./assets/img/cocinando.png" />
<title>Mi recetario personal</title>
</head>
<body>
This would be the modal that appears when there is success
<button id="abrirModalCorrecto" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalCorrecto" style="display:none;">
</button>
<div class="modal fade" id="modalCorrecto" tabindex="-1" aria-labelledby="exampleModalLabelCorrecto" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabelCorrecto">Información</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-
label="Close"></button>
</div>
<div class="modal-body">
Receta insertada correctamente.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-
dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
This would be the modal that appears when there is error.
<button id="abrirModalError" type="button" class="btn btn-primary" data-bs-
toggle="modal" data-bs-target="#modalError" style="display:none;">
</button>
<div class="modal fade" id="modalError" tabindex="-1" aria-
labelledby="exampleModalLabelError" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabelError">Error</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-
label="Close"></button>
</div>
<div class="modal-body">
Todos los campos son obligatorios
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-
dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
<script>
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
console.log(urlParams);
//Si error existe porque todos los campos no están rellenos, abre el modal ERROR
if (urlParams.get("error") != null && urlParams.get("error") == "1") {
//alert("Todos los campos son obligatorios");
$("#abrirModalError").click();
}
</script>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
></script>
<!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js">
</script>
</body>
</html>
You need to load jQuery in the <head> section of your pages or before any custom scripts that use jQuery.
To fix it move to your head element.
<head>
...
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
...
</head>
Related
I want to open custom bootstrap modal using data from an object when double clicked on an element.
How to do this using vanilla JavaScript.
Also how to add all functionalities in it :
Ease Transition
Modal should remove when clicked on cross or outside of body
always clear the previous data(no caching)
https://jsfiddle.net/awo0hq4c/
NOTE : Modal used is basic bootstrap modal which is given below but instead of button it is a div in my case
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>```
Append this line of code into the last line of showModal() function.
new bootstrap.Modal(modalItem).show();
https://getbootstrap.com/docs/5.0/components/modal/#via-javascript
const div = document.querySelector('.container');
div.addEventListener('dblclick', (event) => {
showModal({
id: '1',
title: 'Title Modal',
value: 'this is modal content',
});
});
const showModal = (data) => {
console.log(data, 'here is');
const modalItem = document.getElementById('exampleModal');
modalItem.innerHTML = '';
modalItem.innerHTML = ` <div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">${data.title}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
${data.value}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
`;
new bootstrap.Modal(modalItem).show();
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Modal</title>
<!-- CSS only -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<!-- <link rel="stylesheet" href="./modal.css"> -->
</head>
<body>
<!-- Modal -->
<div
class="modal fade"
id="exampleModal"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
></div>
<div class="btn btn-primary container">Launch modal</div>
<!-- JavaScript Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"
></script>
<!-- <script src="./modal.js"></script> -->
</body>
</html>
My bootstrap modal wont open on page load I do not know why.
The button to open the modal works tho.
My code:
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
window.onload = function() {
$('#myModal').modal('show');
}
Your case may be already answered thousand times, but consider few these causes:
Order of your libraries, are they in correct position?
Perhaps you forget to include bootstrap.js
Consider to include popper.js
Please let me know, if it helps
Try this code, it works for me. it is built with bootstrap 5.1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<script src="jquery-3.6.0.js"></script>
<script>
window.onload = function() {
$('#myModal').modal('show');
}
</script>
</body>
</html>
I'm trying to show a modal dialog after the result of a "if" statement, without a button which could open it, is it there any way to show it using only the response of the condition statement?
Currently I'm developing in Model View Controller. so when i make the call i do something like this in the controller:
if($response == "success"){
<script>
$(function() {
$('#eventCreated').modal('show');
});
</script>
}
and the modal in the bottom of my view looks like this:
<div class="modal fade" id="eventCreated" tabindex="-1" role="dialog" aria-
labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Great!</h4>
</div>
<div class="modal-body">
This is test
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">create</button>
</div>
</div>
</div>
</div>
hope this is helpful for you, after all its depends on response. I use response variable to show just demo
var response = "success";
if (response == "success") {
$('#eventCreated').modal('show');
}
$("button").click(function(){
var response = "success";
if (response == "success") {
$('#eventCreated').modal('show');
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.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"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="eventCreated">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Great!</h4>
</div>
<div class="modal-body">
This is test
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">create</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Try this:
if($response == "success"){
<script>
$('#eventCreated').modal('show');
</script>
}
Otherwise, you have to print the value of $response.
I'm trying to use a bootstrap modal window using the code from their website. Unfortunately the window doesn't function properly when I use it, for some reason.
I used this sample:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
...SOME MORE CONTENT HERE...
</div>
</div>
</div>
All I get is the faded screen and the modal itself is somewhere above the layout and not seen within the browser window. What might be the problem here?
your code is correct you just need to add content
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!-- your button -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
<!-- your modal -->
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<!-- I have added content here -->
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I wonder why my Bootstrap 4 modal is not working. Any clue? I literally copy and paste from the Bootstrap 4 website (http://v4-alpha.getbootstrap.com/components/modal/#live-demo) Also, I have added js that they say.
Please find below the code.
Thanks
I have checked other posts and I didn't have luck
$('#myModal').on('shown.bs.modal', function() {
$('#myInput').focus()
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta content="Description" name="description">
<meta content="index,follow" name="robots">
<link href="/images/myicon.png" rel="icon" type="image/png">
<title>TITLE HERE</title>
<!--CSS-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<!--Bootstrap CSS JS-->
<!--fonts-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
<body>
<!--CB-modal -->
<!-- Button trigger modal -->
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
<!-- JS code -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js">
</script>
<!--JS below-->
<!--modal-->
<script>
$(document).ready(function() {
$("#MyModal").modal();
});
})
</script>
</html>
There are typo in your snippet (unused }); at the end), but most importantly your toggle button is targeting the wrong modal id. Make sure data-target is the id of the modal you're targeting:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
Demo:
$('#myModal').on('shown.bs.modal', function() {
$('#myInput').focus()
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<!--CB-modal -->
<!-- Button trigger modal -->
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- JS code -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js">
</script>
<!--JS below-->
<!--modal-->
<script>
$(document).ready(function() {
$("#myModal").modal();
});
</script>
</html>
Edit: Updated Bootstrap 4-beta as per #OlavT request:
$('#myModal').on('shown.bs.modal', function() {
$('#myInput').focus()
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<!--CB-modal -->
<!-- Button trigger modal -->
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- JS code -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<!--JS below-->
<!--modal-->
<script>
$(document).ready(function() {
$("#myModal").modal();
});
</script>
</html>
You have some script error and your data-target="#exampleModal" does not match with the model's ID
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta content="Description" name="description">
<meta content="index,follow" name="robots">
<link href="/images/myicon.png" rel="icon" type="image/png">
<title>TITLE HERE</title>
<!--CSS-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<!--Bootstrap CSS JS-->
<!--fonts-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
<body>
<!--CB-modal -->
<!-- Button trigger modal -->
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
<!-- JS code -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js">
</script>
<!--JS below-->
<!--modal-->
<script>
$(document).ready(function() {
$("#MyModal").modal();
$('#myModal').on('shown.bs.modal', function() {
$('#myInput').focus();
});
});
</script>
</html>
I landed here because I was having the same error. After going back and reading a bit. I ran into the following:
If you’re using our compiled JavaScript, don’t forget to include CDN versions of jQuery and Popper.js before it.
Because I downloaded bootstrap 4 and copied the folders as I used to with bootstrap v3, I assumed it was all going to work.
Download section has the CDN for popper and jQuery
https://getbootstrap.com/docs/4.0/getting-started/download/
hope this helps... Nessio
<script>
$(document).ready(function() {
$("#MyModal").modal();
$('#myModal').on('shown.bs.modal', function() {
$('#myInput').focus();
});
});
</script>
Looks like the data-target name you entered in not correct.
Here is the correct code of your button
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
your data target is wrong: #exampleModal, should be #myModal.
also, you have incorrect syntax in your js code
$(document).ready(function() {
$("#MyModal").modal();
});
})//remove this
$('#myModal').on('shown.bs.modal', function() {
$('#myInput').focus()
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta content="Description" name="description">
<meta content="index,follow" name="robots">
<link href="/images/myicon.png" rel="icon" type="image/png">
<title>TITLE HERE</title>
<!--CSS-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<!--Bootstrap CSS JS-->
<!--fonts-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
<body>
<!--CB-modal -->
<!-- Button trigger modal -->
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
<!-- JS code -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js">
</script>
<!--JS below-->
<!--modal-->
<script>
$(document).ready(function() {
$("#MyModal").modal();
});
</script>
</html>
I faced the same error but for a different reason(...rather silly). I was using thymeleaf layout and accidentally put the modal div outside the content fragment.
<div layout:fragment="content">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#someId">Open</button>
...
</div>
<div class="modal" id="someId">
</div>
So, although the modal div was present in the code, it was not rendered on the DOM(checked with View Page Source). It fails silently without any errors/warnings. Please ensure that the modal div is rendered on the DOM.
My issue was exactly explained here. https://stackoverflow.com/a/49039205/9855327
In my case, it is not related with wrong references id, it was because I created a modal inside a table in a loop in C# / Aspnet MVC. Se I created a modal for each table row.
I just inserted the code below at the end body tag:
<script>
jQuery(document).ready(function () {
jQuery("body").children().first().before($(".modal"));
});
</script>
It will move all modals HTML elements to the beginning of the body and for me was enough.