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!
Related
I have a problem with my code... I want to show a specific FA icon when I press a button and different when I press it again. (Attach pic.):
But when I press the button, the changes are made to all the buttons... I think that the problem is in the for, but I don't have an idea how to solve it.
<script>
function MostrarObra(){
var Icon = document.getElementsByTagName('i');
for (i = 0; i < Icon.length; i++) {
Icon[i].classList.toggle('fa-angle-double-down');
Icon[i].classList.toggle('fa-angle-double-up');
}
};
</script>
<div class="card-header p-0" id="headingTwo">
<button onclick="MostrarObra()" class="button w-100 text-left" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<span class="h5 font-weight-bold"> <i class="fas fa-angle-double-down mr-2"></i> Obra PACE Sarmiento</span>
</button>
</div>
When you call document.getElementsByTagName('i') you get all elements i in the document. That's why all buttons change.
You could pass the button that is triggering the event to your function and start looking for the i element from it.
<script>
function MostrarObra(element) {
const icon = element.querySelector('i');
icon.classList.toggle('fa-angle-double-down');
icon.classList.toggle('fa-angle-double-up');
}
</script>
[...]
<button onclick="MostrarObra(this)">[...]</button>
I'm working on small angular project, and there are 3 buttons on my form, I would like to receive their title when they are clicked. They are clicked normally one by one, what I've tried so far:
Here is my html:
<div class="extra-btns">
<button type="button" title="Title 1" (click)="getMyTitleOne($event)" class="btn xbutton-square" style="font-size: 16px;"><i class="fas fa-newspaper fa-fw"></i></button>
<button type="button" title="Title 2" (click)="getMyTitleTwo($event)" class="btn xbutton-square"><i class="fas fa-fw"></i></button>
</div>
My typescript code:
getMyTitleOne($event) {
console.log($event.target.title);
}
getMyTitleTwo($event) {
console.log($event.target.title);
}
But in my console sometimes I get values and sometimes I don't, very weird, but most of the time values are undefined:
Thanks guys
Cheers
use template variables :
<button #button1 (click)="log(button1.title)" title="Hello, world !">Click me !</button>
Stackblitz
I have to open a popup window when I click on a button, it is displaying but taking time. How can I overcome this problem so that it takes less time? I am calling a function when I click on the save button.
Save
Cancel
Delete
This is the code for the save button. When I click on this button the lessonsave function will be called, although it is taking longer than I would like it to.
<div class="col-sm-12 form-group fall-footer" style="margin-top: 35px;">
<sapn class="pull-right">
<button type="button" id="refresh" class="btn btn-save" onclick="LessonSave()">Save</button>
<button type="button" class="btn btn-cancel" id="historyLesson_Cancel">Cancel</button>
<sec:authorize access="#mySecurityService.hasPermissions('delete','46')">
<button type="button" id="h_lessondelete" class="btn btn-save" onclick="HistoryLessonDelete()">Delete</button>
</sec:authorize>
</sapn>
</div>
<script>
function LessonSave() {
$("#h_cmts").val("");
$("#h_curriculumtypemodel").modal("show");
}
</script>
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.
I been scratching my head on this one for a while.
Writing a plugin in grails that calls on bootstrap-mini.js and most of its css. Everything works fine. The issue I am having is I have a remote form which onComplete runs java script:
https://github.com/vahidhedayati/ml-test/blob/master/grails-app/views/mailingListModal/_modalcreate.gsp
<g:javascript>
function ${controller}CloseModal() {
var myClone=$('#BuildModal${id}').clone();
$('#BuildModal${id}').dialog().dialog('close');
$(".modal-backdrop").hide();
$('body').removeClass('modal-open');
//var myCloner = myClone.clone();
$('#${divId}1').hide().append(myClone);
//$('body').append(myClone);
<g:if test="${!disablecheck.equals('true') }">
var controller="${controller }";
var divId="${divId }";
$.get('${createLink(controller:"MailingListEmail", action: "getAjaxCall")}?ccontroller='+controller+'&divId='+divId,function(data){
$('#${divId}').hide().html(data).fadeIn('slow');
});
</g:if>
}
</g:javascript>
The bits at the top of the function is all the things I have tried so far.
https://github.com/vahidhedayati/ml-test/blob/master/grails-app/views/mailingListEmail/contactclients.gsp
<div class="tbutton">
<button href="#BuildModalSENDERS" class="btn btn-block btn-success" role="button" data-toggle="modal" title="Configure New Sender">
New Sender?</button>
<div id="mailerSenders1">
<g:render template="/mailingListModal/modalcreate" model="[title:'Add Senders Email', controller: 'mailingListSenders', callPage: 'form' , divId: 'mailerSenders', id: 'SENDERS' ]" />
</div>
And finally modelForm which is included on the top of the modalcreate.gsp (now shown)
<div class="modal fade" id="BuildModal${id}" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<g:if test="${flash.message}">
<div class="message" role="status">${flash.message}</div>
</g:if>
<g:formRemote id="${controller}" name="urlParams" class="form-horizontal" url="[controller:controller, action:'save']"
update="BuildModal${id}" onComplete="${controller}CloseModal()"
>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>${title }</h3>
</div>
<div class="modal-body">
<div class="form-group">
<g:render template="/${controller }/${callPage }"/>
<g:submitToRemote class="myformsubmit" url="[controller:controller, action:'save']" update="BuildModal${id}" onComplete="${controller}CloseModal()" value="Create" />
</div>
</div>
</g:formRemote>
</div>
</div>
</div>
</div>
So it is a remote Form that submits can calls the above CloseModal
The question is when I Close this how do I make it available again when the user clicks the button to create new email ?
After adding all the cloning at the top of java script the only difference I was able to make was to make it display the backdrop on 2nd click so it went black on 2nd click but did not show up the modal content.
ok got it working by doing this:
<button href="#BuildModalSENDERS" class="btn btn-block btn-success" role="button" data-toggle="modal" title="Configure New Sender"
Now adding
onClick="runCheck()"> .....
<g:javascript>
function runCheck() {
$('#mailerSenders1').show();
}
</g:javascript>
That seems to work fine, it now loads up the page, just to add when I did body it just loaded it up again from the commented out attempts, modal.hide etc did not work and the hide attempts just showed it up under some other layers of the same page.. anyways this works fine now. sorry