Alert popup and confirm disable the e.preventDefault() - javascript

I have textboxes in html table, and I want to bind the enter event with jQuery like this
$(function ()
$('#MainPage_resultatTable td.resultat input:text')
.bind('keydown',function (e) {
if (e.keyCode == 13) {
e.preventDefault();
confirm('are-you ok ?'); /* or alert*/
}
});
});
The e.preventDefault() doesn't work. The postback is achieved
When I remove the "confirm" line the e.preventDefault() do the job.
Any suggestion for keeping the confim popup without postback would be appreciated.
Note : I tried it with e.stopPropagation(); and e.stopImmediatePropagation();. Same result.

Related

Double click on Disabled radio button is initiating click event in IE11

Is there any workaround to prevent the click on disabled radio button if it is in disabled mode.
$(document).ready(function() {
$(document).dblclick(function (e) {
e.preventDefault();
e.stopImmediatePropagation();
e.stopPropagation();
return false;
});
});
I tried the above code but still ondblclick event is initiating on my radio button in disabled mode.
You can use css to avoid clicking on radio button
.avoid-clicks {
pointer-events: none;
}
I have implemented following fiddle.Hope it helps you.
$(document).ready(function() {
$('#test').prop('disabled',true);
// document.getElementById('test').disabled=true;
$('#test').dblclick(function (e) {
if(e.target.disabled==true)
return;
e.preventDefault();
e.stopImmediatePropagation();
e.stopPropagation();
console.log("test");
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="test" type="radio"/>

Assign enter key to close button in Magnific Popup

I have a functioning popup form that I use with Magnific Popup Lightbox. Inside I have a custom close button that handles the collected information when clicked. I would like the user to be able to press enter (at any time, not just after the final text box) and have the close button activated. My code is as follows:
$.magnificPopup.open({
items: {
src: 'nameselect.html',
type: 'ajax'
},
closeOnContentClick : false,
closeOnBgClick :true,
showCloseBtn: false,
enableEscapeKey : false,
callbacks: {
open: function(){
$.magnificPopup.instance.wrap[0].addEventListener('focus', function (e) {kNameSearch(e,focusText)});
$(document).keypress(function(e){
if (e.which == 13){
$("#cbutton").click();
}
});
},
afterClose: function(){
document.getElementById("SearchName").blur();
}
}
});
But the $(document).keypress(function(){}) lines don't seem to be working. I have also tried inserting the code in the function called by the listener above it, with no success. Any suggestions greatly welcomed.
The solution was to directly call the button function, not to try to "click" the button. So this:
$(document).keypress(function(e){
if (e.which == 13){
$("#cbutton").click();
}
});
was changed to this:
$(document).keypress(function(e){
if (e.which == 13){
closeButton();
}
});
Given that the button was identified in the HTML as:
<input id="cbutton" onclick="closeButton()" type="button" value="Close" />

Prevent event from triggering

I got two functions, one that collapses stuff when someone clicks the header of that collapsable, and I got a function that opens a modal, but the open modal icon that I use as a trigger to open the modal, is on the header of the collapsable, so when someone clicks the icon, it both opens the modal, and does the collapse stuff, but I just want to open the modal and not do the collapse stuff, so how can I prevent it from triggering my collapse?
Collapse
$(document).on('click', '.panel-heading', function () {
var valgtElement = $(this).next();
$.each($('.panel-collapse'), function (index, value) {
if ($(this).attr('id') == valgtElement.attr('id')) {
$(this).collapse('toggle');
} else {
if ($(this).hasClass('in')) {
$(this).collapse('toggle');
}
}
});
});
Icon click
$('body').on('click', '.fa-trash-o', function () {
$('#slettModal').modal();
});
Use stopPropagation
$('body').on('click', '.fa-trash-o', function (e) {
e.preventDefault();
e.stopPropagation();
$('#slettModal').modal();
});
just use event.stopPropagation()
Link for more details
$('body').on('click', '.fa-trash-o', function (e) {
e.preventDefault();
e.stopPropagation();
$('#slettModal').modal();
});
Try this
$('body').on('click', '.fa-trash-o',
function (event) {
event.stopImmediatePropagation()
$('#slettModal').modal();
});
make sure to include the event parameter in the function declaration
http://api.jquery.com/event.stopImmediatePropagation/
How to prevent other event handlers, from first handler, in jQuery

Jquery .one() function doesn't prevent multi click event during form input

I have a code like that:
$(document).ready(function() {
$("#some-items").one("click", ".comment-form-gonder input", function(e) {
e.preventDefault();
$("body").css("cursor", "wait");
//this part inserts user comment to the written comments below with animation.
...
The problem is when I double click send button, comment are inserted twice. How can I prevent this?
Try removing preventDefault(); and
disable the button to be sure by
$(this).attr('disabled', 'disabled');
var n = 0
$( "div" ).one( "click", function() {
n++;
if (n % 2 == 0){
$(this).text('Foo');
}else{
$(this).text('Bar');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Foo</div>
Calling e.preventDefault(); within .one() handler, makes the form not able to prevent default behavior after the first type of one('event') is executed. After that, the same event will submit the form as supposed to.
Prevent default form submission using on() and do the rest stuff with one() :
$(document).ready(function(){
$('.comment-form-gonder input[type="submit"]')
.on('click', function(e) {
e.preventDefault();
})
.one('click', function() {
// This part executes only on first click:
$("body").css("cursor", "wait");
// rest of your code...
});
});
JSFiddle
You could also disable the submit input after first click, but in some cases may be desired to keep it 'clickable' (f.ex to inform the user that he cannot submit the form twice). To do so, you could store click state in data attribute of the input and use that state later on:
$(".comment-form-gonder input[type='submit']").on("click", function(e) {
e.preventDefault();
if($(this).data('clicked') == 'clicked'){
return alert('already submitted!');
}
// This part executes only on first click:
$(this).data('clicked', 'clicked');
$("body").css("cursor", "wait");
// rest of your code...
});
JSFiddle

jquery using trigger('click') within the click handler

I am trying to create a custom confirm dialog when user clicks on a link with specific class. It's pretty trivial, but the catch is, if the user clicks on the "Confirm" button in the dialog (Using Twitter Bootstrap 3), I want to trigger click on the same link, but this time instead of showing dialog, to follow the link.
Everything is well up to the point when I want to trigger a click event on the <a> tag with some parameters. Here is very simplified sample of what I want to achieve
Html:
<a class="initial" href="http://yell.com">click me</a>
<div class="dialog hidden">
Click me again
</div>
JavaScript:
$(document).on('click', 'a.initial', function(e, forced){
//return true;
if(typeof(forced) !== 'undefined' && forced === true){
$(this).addClass('clicked');
console.log('Clicked');
return true;
} else{
e.preventDefault();
$(this).removeClass('clicked');
$('div').removeClass('hidden');
}
});
$(document).on('click', 'div.dialog a', function(e){
$(this).parent().addClass('hidden');
$(this).parent().prev().trigger('click', [true]);
});
Here is JSFiddle sample
As you can see, if the second link is clicked, the first link is colored in red, as well as console.log triggers message, but then the link doesn't follow the url. Unfortunately, I don't see any error or warning which could give me some clue. I know I can use window.location = $(element).attr('href'), but I am wondering why it is not working in the described way?
Any help is much appreciated.
It's possible to do this, for example, running
document.getElementById('nav-tags').click();
On this page will take the user to the tags page.
Therefore, it seems the issue is the jQuery trigger function.
The problem then becomes, being able to natively trigger the click event but also pass that forced boolean into the event.
The solution I came up with is to remove the second argument, and to set a state in the original link via data:
$(document).on('click', 'a.initial', function(e){
//return true;
if($(this).data('trigger') === true) {
$(this).addClass('clicked');
console.log('Clicked');
} else{
e.preventDefault();
$(this).removeClass('clicked');
$('div').removeClass('hidden');
$(this).data('trigger', false);
}
});
$(document).on('click', 'div.dialog a', function(e){
$(this).parent().addClass('hidden');
$(this).parent().prev().data('trigger', true).get(0).click();
});
JSF
You can consider to use a solution like this:
$(document).on('click', 'a.initial', function(e, forced){
e.preventDefault();
$('div').removeClass('hidden').find("a").attr("href",this.href);
});
:) like #Archer suggest solution.
Try this:
$(document).on('click', 'a.initial', function(e, forced){
e.preventDefault();
//return true;
if(typeof(forced) !== 'undefined' && forced === true){
$(this).addClass('clicked');
console.log('Clicked');
return true;
} else{
//e.preventDefault();
$(this).removeClass('clicked');
$('div').removeClass('hidden');
}
});
$(document).on('click', 'div.dialog a', function(e){
e.preventDefault();
$(this).parent().addClass('hidden');
$(this).parent().prev().trigger('click', [true]);
});
okey. I found something. This is already a bug in jquery as per the below ticket, but closed.
http://bugs.jquery.com/ticket/11326
And the workaround is adding a span(or similar) inside the anchor and add click on that. Please find below the fiddle for same
http://jsfiddle.net/RCmar/2/
HTML
<a class="initial" href="http://yell.com"><span>click me</span></a>
<div class="dialog hidden">Click me again</div>
JS
$(document).on('click', 'a.initial span', function(e, forced){
//return true;
alert(1);
if(typeof(forced) !== 'undefined' && forced === true){
$(this).addClass('clicked');
console.log('Clicked');
return true;
} else{
e.preventDefault();
$(this).removeClass('clicked');
$('div').removeClass('hidden');
}
});
$(document).on('click', 'div.dialog a', function(e){
$(this).parent().addClass('hidden');
$(this).parent().prev().children().trigger('click', [true]);
});

Categories

Resources