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?
Related
I am working on MCV core with the Dapper project. On one of my pages, I have a Grid that contains records and ACTION,
No Name Address Mobile UPDATE VIEW
1 XYZ XYZ 123 UPDATE VIEW
2 XYZ XYZ 456 UPDATE VIEW
When I click on the UPDATE Link from a specific row I am opening my new PAGE
updareUserRecord.cshtml IN NEW TAB.
When I click on UPDATE BUTTON after updating the record in updareUserRecord.cshtml, record gets updated. On the SAME page, I have CLOSE BUTTON. I want to close the updareUserRecord.cshtml. Only.
Using Jquery and Javascript I have tried but some times below code work sometimes not. Can Anyone give me the perfect solution?
Like no matter, I want to close the PAGE.
This is the code I have tried.
#*<button type="button" class="btn btn-primary" id="btnClose" onclick="javascript:window.open('','_self').close();">Close</button>*#
<button type="button" class="btn btn-primary" id="btnClose" onclick="window.top.close();">Close</button>
<button type="button" class="btn btn-primary" id="btnClose" onclick="window.close();">Close</button>
You can add simply click function using jQuery
$('#btnClose').click(function () {
window.close(); //through writing this statement working also in browser
console
});
I think helps this solution Thank you :)
First of all, I am newbie in web programming. Now I am maintaining an ASP.NET MVC application.
I have a view (cshtml) from which I would like to show a modal window in the center of the screen. I would like a modal window like typical confirm dialog in javascript, but I want to put a title, a text, and two buttons, ok and cancel. From my javascript function (which is placed in my ASP.NET MVC view (cshtml)), in this case, onInvoice, I need to do some things depending on the button clicked on the modal window.
For example:
function onInvoice() {
if (some_condition_happens){
// At this point I want to show/call modal window by passing title and text
// Now I read which button was clicked in the modal window
if (ok_button_is_pressed)
{
// Do something when button ok is clicked in the modal window
}
else if (cancel_button_is_pressed) {
// Do something when button cancel is clicked in the modal window
}
}
}
I have searched in the web and I have found an example using bootstrap here. Also posted here. I post here:
Javascript code:
$('button[name="remove_levels"]').on('click', function(e) {
var $form = $(this).closest('form');
e.preventDefault();
$('#confirm').modal({
backdrop: 'static',
keyboard: false
})
.on('click', '#delete', function(e) {
$form.trigger('submit');
});
});
view:
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<form action="#" method="POST">
<button class='btn btn-danger btn-xs' type="submit" name="remove_levels" value="delete"><span class="fa fa-times"></span> delete</button>
</form>
<div id="confirm" class="modal hide fade">
<div class="modal-body">
Are you sure?
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-primary" id="delete">Delete</button>
<button type="button" data-dismiss="modal" class="btn">Cancel</button>
</div>
</div>
But I do not know where to put above code, javascript function and view within my ASP.NET MVC project structure. My ASP.NET MVC project is organized in areas as well. I would like to put the above view code in somewhere accessible from other views (cshmtl).Furthermore I would like above modal window to be parametrized, title and text basically. Also I do not know how to read response from modal window back to my javascript function onInvoice, and then depending on which button, ok or cancel was clicked do one thing or another. Finally,since modal window will be parametrized, how can I pass title and text to?
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()
})
});
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');
}
Please refer to following section of a Form code. When I click 'SAVE 1' button, nothing happens. On clicking 'SAVE 2' button, alert is displayed. Not sure why 'display(') is not getting invoked on clicking 'SAVE 1' button.
<script type="text/javascript" >
function display()
{
alert("Hello there");
}
</script>
<button id="myFormSubmit1" type="button" class="btn btn-default" onClick='display();'>SAVE 1</button>
<button id="myFormSubmit1" type="button" class="btn btn-default" onClick='alert("Hello there")'>SAVE 2</button>
Do your button elements have actually the same id?
You need to make the id unique I guess.
<button id="myFormSubmit1" type="button" class="btn btn-default" onclick='display();'>SAVE 1</button>
<button id="myFormSubmit2" type="button" class="btn btn-default" onclick='alert("Hello there")'>SAVE 2</button>
Change the button id,it looks same it may not work
yes change your button id . if u want to use same id means use jquery like this
$(document).ready(function(){
$(".btn").click(function()
{
alert("you get particular button attribute")
});
});
Where did you put your js code? I am sure if you put it in the right place, it should work.
button ids should not be same.
move your script to the bottom of the body and I believe it should work.
as everyone else suggested, the button id's have to be different but only if you try to access the buttons,
your issue lies somewhere else. the button id's have nothing to do with your issue
the problem is that you have put your script in the wrong place.
put it in the <head> section and it will work.
here is an example: FIDDLE
*note on the top left panel i chose to appent the scripts in <head> section.