I want to make my popover not dissmisive on content click while using focus trigger, because I have input inside in it.
Here are my div attributes:
data-toggle="popover" data-content="<input type='text' class='form-control'><button class='btn btn-sm btn-default' style='margin-top:5px'>Zapisz</button>" data-title="Description" data-html="true" data-trigger="focus" data-container="body"
So as you can see I have simple popover which is triggered with focus ( I know that it may be the issue why it is closing on click) but I have to close popover on click somewhere else on the screen that's why I'm using the trigger="focus".
You can add a listener (hide.bs.popover) to the popover and prevent execution of the event. In this case you need to add further listener to manually close it on button click. Something like this should work.
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover({html: true});
$("[data-toggle='popover']").on('hide.bs.popover', function(e){
e.preventDefault();
});
$("[data-toggle='popover']").on('shown.bs.popover', function(e)
{
// create your own listener after popover has shown
$("#your_button").on('click', function(e){
$("[data-toggle='popover']").off('hide.bs.popover');
$("[data-toggle='popover']").popover('hide');
});
});
});
</script>
I hope it helps.
Related
On submit of search, message with cancel button will display then via ajax data table will display. On click of cancel button loaded ajax result should get clear. But it is not getting cleared.
Kindly find my code
html file
<div class="report_result" >
<p class="report_loader" >Loading please wait...
<button type="button" aria-label="Close">
<span class="stop_load" aria-hidden="true"><u>Cancel</u></span>
</button>
</p>
</div>
js file
//wiring up future elements
$(document).on('click', '.report_result > .stop_load', function() {
$('#result').hide();
});
//using click function
$(".stop_load").click(function(){
$('#result').hide();
});
ajax call
ajaxStop: function() {
$(".report_result").hide();
}
.......
beforeSend:function() {
$('report_result').show();
},
.......
But it's not working after loading ajax . If I call before ajax call both the code works. Kindly help..
Did you try it with the body tag (or just a higher existing parent element) in the selector as well? Like:
$('body').on('click','.report_result > .stop_load',function(){
$('body #result').hide();
});
$('body').on('click','.stop_load',function(){
$('body #result').hide();
});
When clicking on the checkbox it hides currently displaying DIV & shows hidden DIV. After this hidden div displayed it has a form to submit on button click.
My problem is when i click on this submit button, the form is hiding again. I have tried stopPropagation(), preventDefault() and many ways & problem still exist. When I use preventDefault() then it shows the div without hiding but the submit is disabled.
I saw many questions related this.but nothing works to me. I want to submit form without hiding the div which the form resides. I'm a beginner with jquery.
$(function() {
$("#active").click(function() {
if ($(this).is(":checked")) {
$("#donorTeam").show();
$("#donor").hide();
} else {
$("#donorTeam").hide();
$("#donor").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="active"> select type
<div id="donor" style="display:block;"></div>
<div id="donorTeam" style="display:none;">
<form>
<button type="submit" id="sub">Add</button>
</form>
</div>
Thanks in advance.
You could try either of these 2 approaches
1.
$(function () {
$('#donorTeam form').on('submit',function (e) {
// Ajax call here
e.preventDefault();
});
});
2 . add onsubmit="return false" to the form attribute
<form onsubmit="return false">
<button type="submit" id="sub">Add</button>
</form>
I have an ng-nestable div and inside that there is a simple button that has an ng-click event hooked up to it. When I click on that button it doesn't register the click but rather starts the drag and drop process.
Here is my HTML Code,
<div class="col-sm-1 text-right"><button ng-click="fnEditHomeSlider({{$item.SliderID}})" class="btn btn-blue btn-sm" nestable-button><i class="fa fa-edit"></i> Edit</button>
</div>
Note: Is your code something like, try it, Hope it could also matches your need or give us your code
1.) Create a custom directive
myApp.directive('nestableButton', function() {
return {
restrict: 'A',
link: function(scope, element) {
$(element).on("mousedown", function(e) {
e.preventDefault();
return false;
});
$(element).on("click", function(e) {
e.preventDefault();
window.location = $(this).attr("href"); //if you want your URL to update
return false;
});
}
};
});
2.) In HTML
</i>
</i>
Lokesh Kakran is right about this.
And here is live demo project about your solution.
demo : http://pathik.linedeer.com/ng-nestable/
code : https://github.com/pathikdevani/ng-nestable/blob/gh-pages/index.html
I have a HTML button and i am just curious an wanna know whether its possible to call a codebehind method without using onclick event
<input type="button" value="Sig-In" id="btnlogin"/>
If the button does a post back, page events like Page_Load will be fired without even having a click event handler. Why can't you just use click event handler?
you can use event load in javascript:
<input type="button" value="Sig-In" id="btnlogin"/>
and javascript you use like that:
$(document).ready(function() {
$( "#btnlogin" ).load( "ajax/test.html", function() {
alert( "Load was performed." );
});
});
this is example in http://jsfiddle.net/YBS4r/2/
I have a form with several submit buttons. I want my last button to handle the submit rather than the HTML5 spec'ed first button.
I can't change the html at this point and am fairly sure this requires JS. But when I've given it a shot I've gotten into nasty loops or dead code trying to prevent default behaviour and then fire my other button.
Has anyone done this before? jQuery is on the page if needed.
Thanks,
Denis
Since you mentioned jQuery :)
If all you want to do is submit your form when a user presses the enter key, then
$(function() {
$('body').keypress(function(e) {
if (e.which == 13) {
e.preventDefault();
$('#myForm').submit();
}
});
});
However, if you have different behavior/forms depending on which button is clicked and you want the enter key to trigger your last button's click event, then
$(function() {
$('body').keypress(function(e) {
if (e.which == 13) {
e.preventDefault();
$('input[type="submit"]:last').click();
}
});
});
You should just change the input element's type attribute to button instead when you don't want it to submit the form. (I know you said you can't really change the HTML, but this is the best way)
<input type="button" name="mybutton" class="submit-button" value="I wont submit!" />
jQuery code:
$('.submit-button').click(function() {
$('#secret-value-field').val($(this).val());
$(this).parents('form').submit();
});
Or something along those lines.