Boostrap Modal example doesn't show - javascript

I'm testing Bootstrap Modal example "live demo" and I've included bootstrap jquery and js in bootstrap starter template, and also the custom javascript:
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus()
})
but the modal run from my text editor doesn't show like the one on their website does. I click the button and nothing happens.
I've tried using Google Chrome Inspector/console and it shows:
Uncaught ReferenceError: $ is not defined
at the line where the function starts. When I remove the custom js, it doesn't show error but still the modal doesn't show on Chrome, Edge or Firefox.
My code is just the combination of Bootstrap starter template and its modal live demo code in the body so there's no need to post the code here.
Also, please note that I could make the code work (the button works like the example shown on boostrap website) by assigning an id to the button:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" id="button">
then add a custom function later:
<script type="text/javascript">
$("#button").click(function() {
$('.modal').modal('show');
});
</script>
However, that's not the same as the sample code provided by Bootstrap.

Generally, this error occurs because you're trying to use JQuery without having referenced it in your project first.
Try adding the following to the top your page:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Thank you all for your suggestions. I've found out the answer:
The sample code by bootstrap has an error:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
the data-target="" should contain the id of the modal, which, in this case is #myModal not #exampleModal.

it means you are running your script before document is ready. Try this
$(function(){
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus()
})
});

Related

A method in angular that simply closes the page when hit to a button

To exit a window or Angular page I have created an Exit button in the .html. To make the button work I want to write a method in the .ts file that will help me simply close the page.
Note: I am using Angular11 and Bootstrap 4.
Help me write the method.
I'd suggest you share a piece of code you have tried first before asking the question like that. Anyways here's something you can do:
In Html:
<button type="button" class="btn btn-link" (click)="closePage()">Close Page</button>
In TS:
closePage(){
window.close();
}

Click JS button on page load

I want my webpage to auto click a button when the page is loaded. This is my button:
<button class="configure-product configure-product-simple elementor-button" type="button" data-price="95" data-product_id="1934">Stel samen!</button>
I think this button calls a JS function of a wordpress plugin, so that you open the product configurator. If i copy this button html on another page tho it wont work. It will only work on the product page.
Im very new to developing, so i could really use some help. Does anyone have any ideas how to implement this?
window.onload = function() {
document.getElementById("my-button").click();
}
<button id="my-button" class="configure-product configure-product-simple elementor-button" type="button" data-price="95" data-product_id="1934">Stel samen!</button>
this is how to do it in jQuery
$(document).ready(function(){ //on document loads (you could change to window also)
$('#click').click(); // click
})
$(document).ready(function(){
$('#click').click();
})
$('#click').click(()=>{
console.log('thanks!');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="click"> Click Meeh </button>
another shorter way to do it in vanilla js
document.onload = document.querySelector('#click').click();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="click" onclick="console.log('hi')"> Click Meeh </button>
other ways to do it
https://stackoverflow.com/a/38517365/18001301
window.onload vs document.onload
document.getElementById("input").click();

How to update modal body and open on a link click

I want to change some contents of bootstrap modal body on link click.
Here is the link code:
<a href="" id="login_link" data-toggle="modal" data-target="#myModal" >Log In</a>
And Here is the JQuery code:
$('#login_link').click(function (element) {
$('#myModal').find('#signup_form').hide();
});
Here is the form inside Modal body:
<form class="form-horizontal" id="signup_form" name="signup_form" ></form>
On link click the modal is opening but modal body is not changing.
please help me.
[UPDATES]: Modal is not getting the external js file that manupulate the modal body.
<script type="text/javascript" src="js/code.js"></script>
the js codes works fine when it is the js codes directly embed along with modal.
So I need to know exactly where i have to put the external js file.Currently is it before tag.
Why do you need click function if it is bootstrap modal?
Anyhow you have given "data-target and data-toggle" attribute so you can directly click a button without any click function.
refer https://www.w3schools.com/bootstrap/bootstrap_modal.asp for better understanding of modal
You can try below code. This will hide form on popup of your modal
$('#myModal').on('shown.bs.modal', function () {
$(this).('#signup_form').hide();
});
Try this
$(document).on('click', '#login_link', function(){
$('#myModal').find('#signup_form').hide();
});

Issue closing a modal in bootstrap/jquery

I'm trying to make a button(findHotel) in my modal(travelModal) that will display a series of images and close/dismiss the modal at the same time. This is my code.
html
<button type="button" class="btn btn-primary" id="findHotel">Find Hotel</button>
and js
$("#findHotel").click(nySearch);
function nySearch () {
if (true) {};
document.getElementById("nyResults").style.display = "block";
}
$ ("#travelModal").modal("hide");
});
It displays the images, but it doesn't hide/close the modal. I looked the bootstrap docs and that seems like it should work. Can anyone explain what's wrong?

Data-Dismiss: How to dismiss bootstrap modal inside function

I have a modal in which I need to validate some input using knockout validation.
When I click the submit button, a function is called that validates the data. The following functionality is expected:
If the validation fails, the modal stays open and the validation reason is displayed.
If the validation succeeds, I want to close the modal.
How can I go about closing the modal inside my function?
What have you tried so far?
Per the Bootstrap documentation
$('#myModal').modal('hide')
Please read through the documentation!
http://getbootstrap.com/javascript/#modals
The above didn't work for me, modified slightly to add an id to the button and reference it that way. I just used the cancel button that was already on my modal form and added id="cancel-btn" to that one.
<button type="button" class="btn btn-ar btn-default" id="cancel-btn" data-dismiss="modal">
$('#cancel-btn').click();
Make another button like this
<button type="button" class="btn btn-warning btn-lg shiny" data-dismiss="modal" aria-hidden="true">Cancel</button>
This button contains data-dismiss="modal" .You can hide this button if you want.
Now You can use any other function in a customized way and when you want to hide the modal you can call
$(".btn-warning").click();
This will only hide modal
$('#modalId').modal('hide');
but other modal related stuff will not remove.
To completely remove modal from page and its css
$('#modalId').modal('hide'); or $('#modalId').modal('toggle');
$('body').removeClass('modal-open');
$('body').css('padding-right', '0px');
$('.modal-backdrop').remove();
Here I'm giving a solution in plain javascript. I used Vue js and I don't want to use jQuery along with Vue.
document.querySelector('#modalid').classList.remove('show');
document.querySelector('body').classList.remove('modal-open');
const mdbackdrop = document.querySelector('.modal-backdrop');
if (mdbackdrop){
mdbackdrop.classList.remove('modal-backdrop', 'show');
}

Categories