At first all element is hided, but when btn is clicked, I espect it show these:
Unfortunately, every time I click the button its show in a millisecond only then hide again.
This is the code
HTML:
<div id="datetimepicker"></div>
<div id="datetimepicker2"></div>
<input id="saveEdit" type="submit" name="updateDetail" class="btn btn-primary btn-lg btn-block" value="Save"></input>
<input id="cancelEdit" type="reset" name="cancelEdit" class="btn btn-default btn-lg btn-block" value="Cancel"></input>
<input id="editYear" type="submit" name="editYear" class="btn btn-primary btn-lg btn-block" value="Edit"></input>
Javascript:
$('div#datetimepicker').hide();
$('div#datetimepicker2').hide();
$('input#cancelEdit').hide();
$('input#saveEdit').hide();
$(function() {
$("#editYear").click(function() {
$('div#datetimepicker').show();
$('div#datetimepicker2').show();
$('input#cancelEdit').show();
$('input#saveEdit').show();
$('input#editYear').hide();
});
});
It is possible that the calendars will auto-close when they detect a click outside.
Although you show them, they capture the "click outside" and close after that.
You can try 2 things:
Add a timeout when you show the calendars, so it occurs after the default "hide".
Add the calendars in another wrapper div, and try to manipulate the parent instead. And, you should check the calendar configuration to see if it hides automatically
.
$("#editYear").click(function() {
$('input#cancelEdit').show();
$('input#saveEdit').show();
$('input#editYear').hide();
setTimeout(function() {
$('div#datetimepicker').show();
$('div#datetimepicker2').show();
}, 250);
});
Did you use a plugin for this?
If you did it's likely a bit of HTML is out of place or double datepickers isn't a supported feature of that plugin and the datepickers are detecting a click outside of their container.
First check the documentation from the right markup if there's no example of the implementation you are using then you will need to modify the method that closes the datepickers.
put some logs into the datepickers hide method to see what needs modifying. It would help you havea jsfiddle with your issue and know what plugin is being used.
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 :)
My buttons (it's inside a for loop) get a name from the database using .getName()
I'm trying to disable a button in javascript based on that name. But I can't seem to find the right way. Any help please?
HTML
<button class="btn btn-success btn-sm startDocker" id="start-<%=environment.getName()%>" name="<%=environment.getName()%>">Start</button>
This code is wrong.Now I wanted to disable the button with a the container.containerName
$('start-' + container.containerName).prop('disabled', true);
I have spend the last day trying to auto click this button to no avail. The source for the button is this.
<button type="button" class="btn btn-success ng-binding" ng-click="save()" ng-disabled="saveButton.disabled">Save</button>
The button only pops up after a couple of button clicks so I have been looping my scripts just in case.
My first solution (which returns a whole bunch of errors with reloading):
$(function(){
document.getElementsByClassName("save()")[0].click();
});
And my second one (which does nothing):
$(function(){
document.getElementsByClassName("btn btn-success ng-binding")[0].click();
});
I will keep trying different stuff while hopefully waiting for an answer and will update if I find something that works.
Your first solution doesn't work because save() is not a class name of your button, so getElementsByClassName() will return an empty array whose first element is of course undefined, so it doesn't have a click() function.
Your second solution works perfectly fine. I added a click listener to the button and then your solution. As you can see, the event is fired and the alert in the event listener is displayed.
document.getElementsByClassName("btn btn-success ng-binding")[0].onclick = function() {
alert('Button clicked!');
};
document.getElementsByClassName("btn btn-success ng-binding")[0].click();
<button type="button" class="btn btn-success ng-binding" ng-click="save()" ng-disabled="saveButton.disabled">Save</button>
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.