Prevent panel opening bootstrap3 - javascript

So theres this Bootstrap3 accordion with consecutive panels. Each one has a button that closes it and opens the next one: the next step, if you will.
However, if (certain conditions not met) the next panel should not open. Other things should also not happen, but they are sort of under control. The point is the next step panel opens if (conditions not met) and I want to prevent that.
I added the following to the event listener, to no avail. What to do to correctly prevent the next panel from opening?
$('#my-panel').on('hidden.bs.collapse', function (aTicketPanelCollapsedEvent) {
aTicketPanelCollapsedEvent.preventDefault();
// I expected this to work but unfortunately it doesn't
});

I would try to use either show.bs.collapse or hide.bs.collapse. You're using hidden.bs.collapse which is called after the event has already happened.

I believe preventDefault() only prevents the browser from performing its default action in response to an event. Since the event 'hidden.bs.collapse' is not a browser event, preventDefault() does nothing.

I think you need to handle 'hide.bs.collapse' instead. The problem with using 'hidden' is that is that the collapse has already occurred.
$('#my-panel').on('hide.bs.collapse', function (e) {
e.preventDefault();
});
Demo: http://bootply.com/78023

Related

Updating Key Event in Javascript

Hey I have a problem with a grid I am using in Javascript. I'll try tell you what I've tried first. Basically it has a key event for the button delete attached to it. However I want to override this and do something else for this specific keyup event. There is other keyevents that need to stay but I need to change what happens when the delete button is pushed when I have a row selected.
I've tried a couple of things including targeting it with bind and unbind but nothing seems to work.
I attached an alert to the delete function to fire showing what element is firing the function and it's coming back with dataGrid.
Also I tried stop propogation but no luck.
$(".divDataGrid")
.keyup(function(event) {
console.log("seamus");
event.stopPropagation();
// Do something
});
However none of this works. Has anyone out there run into a similar problem or has anyone an idea on how to fix this?
If I understand correct, you are trying to prevent the default action on button. In that case what you need to use is event.preventDefault();
event.stopPropagation(); will just stop the event from bubbling up; will not restrict its default action.

jQuery toggle() not always firing

I've been making some basic mobile navigation and am using a click event to show/hide the menu.
A reduced code sample:
jQuery('.menu-button').click(function(){
jQuery('.header-nav').toggle();
console.log('clicked');
});
I've been remotely debugging on mobile and the console.log always works, but the .header-nav toggle() seems to randomly not trigger - I can't spot a pattern to it, but it always remains in the DOM (which it should), so it being somehow removed is not the reason why it is not firing.
Any ideas?
Thanks to Kevin B's comment it seems that the click event is firing multiple times. To fix this, the following was used:
$(element).off().on('click', function() {
// function body
});
Reference: jQuery click events firing multiple times

Is it possible to detect a mouse click on a page on every element?

I want to trigger a function if a user clicks anywhere on the page, even clicking on no element or link. Is it possible?
The extension runs only on youtube.com so I can't add every element on the page to the trigger and I assume that every page has different element's ids.
Emmanouil Chountasis is correct, you can use the code at "Detect left mouse button press" to detect a left mouse click crossbrowser.
To the heart of your question, I think what you're looking for is Event Delegation. In jQuery,
// Select a wrapper for the events
$('body')
// Whenever any element in the <body> is clicked
.on('click', '*', function (evt) {
// Emmanouil Chountasis's suggestion would be called right here
if (isLeftClick(evt)) {
// ... do stuff
}
});
See http://learn.jquery.com/events/event-delegation/
Reed's answer works fine, but it triggers the action multiple times. I found this solution that only works on left mouse triggers and executes once per click.
$("body").unbind().click(function() {
//Do Stuff
});

Single user action firing two events - second event doesn't trigger

I’m running into this issue where a single action by the user is supposed to trigger two events but it only triggers the first one.
The scenario:
A user enters some text into a special field that modifies the layout on focusout , after entering the text, without leaving the field, they click a button.
What’s happening?
I have a focusout event on a text box and click event on a button. What I see is the focusout event gets fired but the click event never does.
I’ve encapsulated this in a jsfiddle:
http://jsfiddle.net/fCz6X/13/
$('#theText').focusout(function (){
$("#focusevent").text("Focusevent");
console.log("focus");
});
$('#theButton').click(function (){
$("#clickevent").text("Clickevent");
console.log("click");
});
So if you click in the text field then click the button I’d expect both events to fire, but we only see the focus out event.
I put in a temporary fix for this by having the mousedown event fire the button instead of a click event (this fires before the focusout event) but that is causing some other behaviors and issues that I don’t want to see. Due to those I think optimal solution is finding a way to get the focusout and click events to both fire. Does anyone have thoughts on how to fix this problem?
Edit: After seeing initial responses I dug a little deeper, the issue here is that the focusout event is changing the page layout which very slightly pushes the location of the button down. The click event triggers after the focusout is done but since the button is no longer in the exact same location, nothing happens.
Here is an updated fiddle that shows my problem
http://jsfiddle.net/fCz6X/11/
It's because you're calling alert - the focusout event fires, but before the browser recognizes you've clicked the button, the alert box blocks it.
Change your event handler to console.log or something else that's non-obtrusive and you'll be ok.
It is the Alert that is blocking.
Some browser security prevents firing too many window.alert at the time.
When trying with other triggers, it looks. You may try console.log()
$('#theText').on("focusout",function (){
$("#theText").val($("#theText").val()+"flb");
});
$('#theButton').on("click",function (){
$("#theText").val($("#theText").val()+"but");
});
I believe this is because the focusout event fires first, executing the handler, and the alert then prevents the browser from recognizing the click.
Try again with console.log instead of alert - it's less invasive.
As Joe said, the blocking alert call is what is breaking the event. Using a non-blocking call you will see both events.
If you really need to perform an alert like this, though, you can defer calling 'alert' until later using setTimeout()
$('#theText').focusout(function (){
setTimeout(function() { // alert after all events have resolved
alert("focus left text box");
}, 0);
});
Edit: In your updated fiddle the reason the click event never fires is because no click event occurs. If you move the button out from under the mouse on mousedown, there is no followup mouseup which is what initiates the 'click' event.
You may need to reconsider other aspects of your design. Your solution of using 'mousedown' is the best you can achieve because it's the only event that actually occurs.

SharePoint; Javascript repeating click event already on page

I have a SharePoint calendar, and I've got some Javascript code to force a calendar overlay event to open in a modal dialog. Basically, it forces them to open in a modal dialog via this code:
$('.ms-acal-ddiv a').click(function(){
EditLink2(this,'WPQ2');
return false;
});
The problem is that there are already "native" events on the calendar which open with this code, and what is happening is that when you click on it, the events open TWICE with a modal dialog, thus rendering the page unusable.
I'm not savvy with writing jquery or javascript. How can I write the javascript to look for that code that's bolded, and prevent it from running if the link already executes with that?
Thanks for the help in advance.
Try this:
$('.ms-acal-ddiv a').click(function(event){
EditLink2(this,'WPQ2');
event.stopPropagation();
event.stopImmediatePropagation()
return false;
});
Which will prevent the click event from bubbling up.
http://api.jquery.com/event.stopPropagation/
http://api.jquery.com/event.stopImmediatePropagation/
I was having the same problem. The following code seems to have cleared it up for me:
$('.ms-acal-mdiv a, .ms-acal-ddiv a, .ms-acal-sdiv a').click(function(event){
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
EditLink2(this,'WPQ2');
});
I wonder if the return false gets in the way of whatever eventually tells the overlay to disappear.

Categories