We Keep Coding

button offcanvas only show

I use bootstrap 5. I try open offcanvas, and dont hide when I click button again.
<button data-bs-toggle="offcanvas" role="button">Add to Cart</button>
when I click button agian offcanvas close i dont have.
<div class="offcanvas offcanvas-end w-5 #ViewData["Pokaz"]" tabindex="-1" id="offcanvas" data-bs-scroll="true" data-bs-keyboard="false" data-bs-backdrop="false">
<div class="offcanvas-header">
<h6 class="offcanvas-title d-none d-sm-block" id="offcanvas">Your Order</h6>
<button type="button" class="btn-close btn btn-success text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
How to setting button by click a button again dont hide offcanvas.
only show when is closed.
Help me guy.

You can realize this using JavaScript and when pressing the button always showing the offcanvas:
<button role="button" onclick="new bootstrap.Offcanvas(document.getElementById('offcanvas')).show();">Add to Cart</button>
Read more about this here.
Of course, you can also write a separate function and call it (or add some checks before, whether it is open):
<button role="button" onclick="showOffcanvas()">Add to Cart</button>
function showOffcanvas() {
var myOffcanvas = document.getElementById('offcanvas');
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas);
bsOffcanvas.show();
}
Good luck!

why onlick function in button tag not working properly

I have created a delete Photo button which works as if we click on it a another delete button appear in somewhere in code , the code is
<button type="button" class="btn btn-danger" onclick="showdel()">Delete Photo</button>
after that I created div element where that delete button should be created .
<div id="del"></div>
and function for this is .
function showdel(){
var div = document.getElementById('del');
div.innerHTML = '<center><button class="btn btn-danger">DELETE</button></center>';
}
But it is not working.

Your code should look like
<button type="button" class="btn btn-danger" onclick="showdel()">Delete Photo</button>
<div id="del">
</div>
function showdel(){
document.getElementByID("del").style.visibilty="hidden"
}

on-click function JavaScript trigger twice

I can't figure out why 'onClick' function trigged twice.
My html code:
<div class="form-actions right1">
<button type="button" id="btnCancel" class="btn default">
Cancel
</button>
<button type="submit" id="btnSubmit" class="btn blue">
Submit
</button>
</div>
Script is here:
$("#btnSubmit").on("click",function () {
debugger;
alert("Click");
CreateOfficeTypeManager.SaveOfficeType();
});

You might be binding the "click" even twice.
Put a breakpoint in your $("#btnSubmit")... instruction and see if it goes there twice.
Otherwise, try unbinding as shown here button onclick function firing twice
Finally, if you're in a complex environment, there might be other code handling the clicks for you. Try preventDefault as suggested in the comments of your question.

It works fine.
$("#btnSubmit").on("click",function () {
debugger;
alert("Click");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="form-actions right1">
<button type="button" id="btnCancel" class="btn default">
Cancel
</button>
<button type="submit" id="btnSubmit" class="btn blue">
Submit
</button>
</div>

Pressing enter on child modal dialog fires enter on parent modal dialog (ie11 and edge)

I have two bootstrap modal dialog windows, one creates the other. When enter is pressed on the child's text input it fires an event on the parent as well. The last button to have focus on the parent was the one to create the child, this causes the child to be recreated immediately.
I have found some similar problems which state to make sure the ok buttons on the dialog are of type=button since they default to submit. I have made sure that the buttons have the type of button but the issue persists, though it works fine in chrome.
Here an example of what is happening in plunker.
This is the first modal window.
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="shownewwindow()">New Modal</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
And here is the second.
<script type="text/ng-template" id="modal2.html">
<div class="modal-body">
<input type=textarea value="test" ng-keypress="keydown($event)" autofocus></input>
</div>
<div class="modal-footer">
<button class="btn btn-default" type="button" ng-click="ok()">ok</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
Here are the functions for ok, cancel, and keydown.
$scope.ok = function () {
console.log("ok");
$uibModalInstance.dismiss({completed: true});
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
$scope.keydown = function(event) {
var enterKeyCode = 13;
$uibModalInstance.dismiss({completed: true});
}
Any ideas on how to prevent the child from being created repeatedly when enter is pressed would be appreciated, thanks.

Try to disable the button when you click on it.
<button ng-disabled="aScopeVar" ng-click="setAScopeVarToTrue()">My button</button>
Don't forget to set aScopeVar to true after the child is created.

JQuery Bootstrap Modal Window somehow reload/clears the parent fields in Ruby on Rails project

My problem is when clicking OK in the modal window, which goes to javascript function in the modal will reload or clear the parent fields ?
Here is the use case:
1. enter name string into parent name form input
2. click on Test Modal Button
3. a modal window appears
4. click on the modal window "OK" button. (with the cancel button its not a problem)
5. parent name input was cleared. Possibly the parent was reloaded.
I'ved created a simple rails project with a generated scaffold Post name:string. Nothing special but I just enabled bootstrap js and css.
https://github.com/axilaris/bootstrapmodal/blob/master/app/assets/javascripts/application.js
https://github.com/axilaris/bootstrapmodal/blob/master/app/assets/stylesheets/application.css
And then, I inserted this code into _form.html.erb, you can view it here:
https://github.com/axilaris/bootstrapmodal/blob/master/app/views/posts/_form.html.erb
<div id="windowCreateInvoiceProductDialog" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="windowTitleLabel" aria-hidden="true">
<div class="modal-header">
×
<h3>Please enter a new product</h3>
</div>
<div class="modal-body">
<div class="divDialogElements">
Code:<input class="xlarge" id="xlInput" name="modal_code" type="text" />
<br>
Name:<input class="xlarge" id="xlInput" name="modal_name" type="text" />
<br>
Description:<input class="xlarge" id="xlInput" name="modal_desc" type="text" />
<br>
Price:<input class="xlarge" id="xlInput" name="modal_price" type="text" />
</div>
</div>
<div class="modal-footer">
Cancel
OK
</div>
</div>
<div class="divButtons">
<a data-toggle="modal" href="#windowCreateInvoiceProductDialog" class="btn btn-primary btn-large">Test Modal Button</a>
</div>
<script>
$(document).ready(function() {
$('#windowCreateInvoiceProductDialog').bind('show', function () {
// document.getElementById ("xlInput").value = document.title;
});
});
function okClicked () {
$('#windowCreateInvoiceProductDialog').modal('hide');
// document.title = document.getElementById ("xlInput").value;
// closeDialog ();
};
</script>

found the answer!
instead of this
<a href="#" class="btn btn-primary" >OK</a>
replace with this
<button type="button" class="btn btn-primary" onclick="okClicked ();">Save changes</button>
and thats all to it, and its flexible, i could hide, not hide and do something.