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.
Related
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?
First of all I have checked many similar questions on here and other resources, but I'm still unable to find the solution I require.
I have a button that links to a specific page within my application and I also have a confirm() box that asks if the user wants to continue, if they click ok then the next page should be loaded, if they click cancel the new page should not load, as if the button was never clicked at all.
Below is my HTML for the button:
<a href="http://localhost:9000/index">
<button onclick="myFunction()" type="button" class="btn btn-outline-primary btn-lrg" style="font-size:20px;">CANCEL</button>
</a>
And now my JS for the confirm box:
<script>
function myFunction() {
if (confirm("Are you sure you wish to cancel this configuration?")) {
return true;
} else {
return false;
}
}
</script>
The issue right now is that your button is triggering the function, however your link is the one that's redirecting.
That in mind, wrapping a <button> with an <a> is invalid:
Content model: Transparent, but there must be no interactive content descendant.
The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).
Some alternatives:
Use a <form> instead of an <a>
<form action="https://stackoverflow.com">
<button type="submit" onclick="return confirm('Are you sure?')" class="btn btn-outline-primary btn-lrg" style="font-size:20px;">CANCEL</button>
</a>
Remove the <a> entirely
function btnCancel() {
if (!confirm("Are you sure?")) return false;
location.href = "https://stackoverflow.com";
}
<button type="button" onclick="btnCancel()" class="btn btn-outline-primary btn-lrg" style="font-size:20px;">CANCEL</button>
Remove the <button> entirely
Cancel
Is there any way to create a button inside html form that wouldn't call an action specified in "Html.BeginForm"? I want to use it only for adding some elements to form by javascript. I have a different button that should call an action.
#using (Html.BeginForm...
{
...
<button id="addRow" class="btn margin-top-10 margin-bottom-10">addRowt</button>
...
}
The "addRow" button I'd like not to call any action.
Yes. You can listen to the click event of this button and prevent the default behavior. Assuming you ave jQuery library loaded in this page, you may use jquery preventDefault method to do this.
$(function(){
$("#addRow").click(function(e){
e.preventDefault();
// do other things as needed (ex : add a row to ui)
});
});
You can use an anchor tag that looks like a button if you are using bootstrap Then you put your JavaScript inside the tag like below:
<a href="#" class="btn btn-default" onclick="YourMethod()" >New Button</a>
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 have a button which when i click it i would like it to click a hidden action link.
The click on the action link is not doing anything. but if i click the action link my self it works, just not when i make jquery click it?
function myClickFunction() {
$('#CloseLink').click();
//$(document).on("CloseLink", "click", function())
}
<input id="btnClose" type="button" value=" Close " onclick="myClickFunction()"/>
<div style="visibility:hidden">
#Html.ActionLink("Close", "APClientIndex", "Home", null, new { id="CloseLink", #class = "btn btn-primary niceButton" })
</div>
Plain html:
<input id="btnClose" type="button" value=" Close " onclick="myClickFunction()">
<div style="visibility:hidden">
<a class="btn btn-primary niceButton" href="/Home/APClientIndex" id="CloseLink">Close</a>
</div>
If what you want is to simulate the user clicking an anchor tag, I don't think that is possible with javascript
What you can do is read the anchor tag's href attribute and change the window location manually:
function myClickFunction() {
var href = $('#CloseLink').attr("href");
window.location.href = href;
}
If I understand what you are trying to do is to fire the click action by javascript?
With $('#CloseLink').click(); you are not firing the click event, you are binding an action to the click, but you don't have any function inside like $('#CloseLink').click(function(){...});
So if you want to fire the click event you need to do $('#CloseLink').trigger('click');
$('#CloseLink')[0].click()
Is what i used as suggested by tewathia in the comments section.
The jQuery click method fires the onclick event of that element. In order to simulate a click on an anchor a tag, you need to run the click method of the DOM element itself.