Develop Reference

Toggle Bootstrap dropdown by click on the link in modal

When a form submitted the modal box appears. This box contains a text with a link. Click on this link should close this box and toggle dropdown (auth form). The problem is that I can't handle toggling the dropdown by clicking this link.
Here is the code of click-handler of this link
$(function() {
$('#open_auth_form').click(function(e) {
e.preventDefault();
$('#participate_modal').modal('hide');
$('#auth_link').dropdown('toggle');
});
});
Why doesn't it work? I tried also to move dropdown toggling inside the 'hide.bs.modal', tried .trigger('click'). Nothing helped. But simple running
$('#auth_link').dropdown('toggle');
from console works well.

Check out this stack overflow question on How to open Bootstrap dropdown programmatically. There are a number of solutions you can try such as:
Triggering the click.bs.dropdown event:
$('#dropdown').trigger('click.bs.dropdown');
Or manually adding/removing the classes:
$('.dropdown').addClass('open'); // Opens the dropdown
$('.dropdown').removeClass('open'); // Closes it

In my case it was enough to add
e.stopPropagation();

SAPUI5 Panel collapse event

This SAPUI5 application that I am developing uses a Panel control that has some buttons on it. Now I have to hide those buttons whenever a user collapses the panel and show them back upon expanding. I tried using the getCollapsed() method but to no effect. What I am basically looking for is a collapse event for the panel which is not available by default.
Any helping hand out there?
Thanks.

Hmmm, seems like there are no event handlers for the Panel control indeed...
As a workaround, you could add your own expand/collapse toggle button in the panel tray, and upon clicking that button you could grab the getCollapsed() state and show/hide your other buttons accordingly

You could use the sap.m.Panel https://openui5.hana.ondemand.com/docs/api/symbols/sap.m.Panel.html#event:expand
which has an expanded property and you can just use
setExpanded(true) ;
to expand the panel and let the control retain its state without you having to track it.
I am sure this has all changed since you asked the question and this answer is related to 1.24.2

Perhaps the only solution here is to replace the default collapse icon with a button of your own and attach the press event to it. Like:
1. Declare a `Panel` with `showCollapseIcon` set to false.
var oPanel = new sap.ui.commons.Panel({
showCollapseIcon: false
});
2. Add your own button. I prefer a `lite` button.
var oCollapseButton = new sap.ui.commons.Button({
icon: '<your icon>',
lite: true,
press: function (e) {
if (!oPanel.getCollapsed()) {
//If not collapsed
oPanel.setCollapsed(true);
//Code to hide panel buttons
//(and toggle collapse button image if needed) after this
} else {
//If already collapsed
oPanel.setCollapsed(false);
//Code to show panel buttons
//(and toggle collapse button image if needed) after this
}
}
});
oPanel.addButton(oCollapseButton);
P.S: You might also want to add some styling and alignment to your custom collapse button. For that, you can add a CSS3 class to your button before adding it to the panel like:
oCollapseButton.addStyleClass('<your class>');

Disable Twitter Bootstrap collapse toggling

I'm using Twitter Boostraps component collapse to reveal some fields which is done by clicking in another field. However, if I click the same field again the other fields get hidden again (i.e toggling).
What I want is to disable the toggling so that the fields won't hide when clicking the field a second time. Could this be done easily with some built-in methods or do I need to dive deep into the js file to change it myself?

You should be able to do something as simple as..
$('#myDiv').on('hide.bs.collapse', function (e) {
preventDefault(e);
})
This handles the Bootstrap 3 hide.bs.collapse event, and prevents the DIV from being hidden again.
Demo: http://bootply.com/75650

The solution is actually pretty simple and the one marked as correct comes pretty close, here is how you can disable the toggle mechanism:
$('#myDiv').on('hide.bs.collapse', function (e) {
return isMyDivEnabled(); // true or false
}).on('show.bs.collapse', function (e) {
return isMyDivEnabled(); // true or false
});
Cheers
Chris

Override parrents onClick event with checkbox onClick?

First, sorry for my bad English.
I'm making a Coupons site and have trouble with selecting and deselecting the coupons. Each coupon is in a DIV 'box' in which there is a checkbox.
I made a onClick function on the DIV box (so the user can select the coupon by clicking on anything inside the DIV box. What I need now is, when the user want to deselect the coupon (by clicking on the checkbox inside the DIV box), I need to 'override' the DIV's onClick function (execute the checkbox onClick event, not the DIV's onClick event).
I know that everyone prefers some code as an example, but the question/problem is simple and I don't think you need all of my un'useless code inside the events/functions :)
Thanks :)

It seems like you want stopPropagation if the checkbox is being unchecked: http://jsfiddle.net/8Dcq8/.
$("div").click(function() {
alert("add"); // clicking anywhere in div to add coupon
});
$(":checkbox").click(function(e) {
if(!this.checked) { // if unchecking, remove coupon
alert("remove");
e.stopPropagation(); // don't run parent onclick
}
});

If the <div> click handler looks something like this:
var $boxes = $('div.box');
$boxes.on('click', function ()
{
// do whatever to select the coupon
});
Then the checkbox handler should look something like this:
$boxes.find('input[type="checkbox"]').on('click', function (event)
{
event.stopPropagation();
// do whatever to deselect the coupon
});
See event.stopPropagation().

You have to cancel bubbling. See here for an explanation.

You can use the jQuery Alternative, or create sub-elements with onClicks that don't target your checkbox. you might be able to use something like this also.
document.getElementById('element').checked.onreadystatechange=function(){
//code
}
good luck

Repurposing Jeditable jQuery plugin to use buttons instead of on-text click?

I'm trying to slightly repurpose the functionality of the Jeditable plugin to be controlled with buttons instead of clicking on the text. I've got a stripped-down version of the section I'm working on here.
Right now I'm triggering the text click event with my Edit button, hiding my Edit button once it's clicked, then making it reappear after the submit button is clicked. Here's my jQuery for the button click:
$('.jeditable-activate').click(function() {
$(this).prev().click();
$(this).addClass('hidden');
});
And here are the parameters I'm passing to the Jeditible function:
onedit : function() {
$(this).siblings('.jeditable-activate').addClass('hidden');
},
onsubmit : function() {
$(".jeditable-activate.hidden").removeClass('hidden');
}
I'd like to disable the default functionality of clicking on the text to edit, but I can't figure out a way to do this without breaking the functionality of my Edit button.

You probably have found a way to do it since February but it might help someone else. I did the same using a custom jQuery event like that:
$('.edit').editable('http://www.example.com/save.php', {
id : 'elementid',
name : 'newvalue',
[...]
event : 'whateverEvent'
});
$('.jeditable-activate').click(function() {
$(this).prev().trigger('whateverEvent');
});