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?
Related
I'm using Laravel 5.5, Bootstrap 3.7 and jQuery.
When I open the modal and close it directly, then when I do an action in the modal it performs two times the opening function.
If I open and close it (directly) three times, then when I do an action in the modal it performs four times the opening function.
Finnaly, if I open and close it (directly) X times, then when I do an action in the modal it performs X+1 times the opening function.
It performs the function for all the old openings and for the last opening.
HTML :
#foreach(... as $seance)
...
<div class="row">
<button class="btn btn-primary bouton-reservation" data-toggle="modal" data-target="#reservationModal-{{ $seance->id_seance }}"</button>
</div>
</div>
</div>
<div class="modal fade reservationModal" id="reservationModal-{{ $seance->id_seance }}" data-seance='{{ $seance->id_seance }}' role="dialog" aria-labelledby="reservationModal-{{ $seance->id_seance }}" aria-hidden="true">
// modal content with a form.
</div>
#endforeach
JS :
$(document).ready(function () {
...
$(document).on('shown.bs.modal', '.reservationModal', function (e) {
// JS content
});
$(document).on('hidden.bs.modal', '.reservationModal', function(e) {
// JS content
});
});
I hope the problem is explained quite clearly ...
The problem can not come from the fact that I use $(document).on('shown.bs.modal', '#reservationModal', function (e) { instead of $('#reservationModal').on('shown.bs.modal', function (e) {?
Exemple
On this exemple, I close 2 times the modal, and when I choose Nico on the select after a third opening, my JS append 3 times my data.
Append starts when I click on the button Ajouter, however, I only click once and not three.
Futhermore, when I delete the info with the X on the right side, all info disappears.
Thank's for help !
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()
})
});
Html:
<button class="btn btn-primary" data-toggle="modal" data-target="#modal-preview" onclick="return functionPrev();">Prev</button>
js file:
function functionPrev() {
alert("Alert!");
return false;
}
Alert opens and bootstrap modal opens too, but I only want the alert to show and block modal window.
data-toggle="modal" causes Bootstrap to bind a click event listener to this button. Bootstrap's event handler opens the modal. Removing that data attribute should stop this behavior. data-target="#modal-preview" will then be unnecessary.
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');
}
I am developing an extension for Magento and am trying to display a popup window to the user during checkout if their data is not able to be properly validated. I am trying to avoid making my own theme or modifying the default to trigger the window to pop up.
Is there another method that I can use to trigger this from the controller? Perhaps through getLayout I can inject the javascript to open the popup and then reload the page?
I would do something like this
<div style="display:none;">
<div id="mycontent">
// your content
</div>
</div>
<button type="button" id="linktopopup" href="#mycontent">
<script type="text/javascript">
("#linktopopup").fancybox({
autoDimensions: false,
afterShow: function(){
// append something to form!
}
});
</script>