Develop Reference

Should all underlying elements be disabled when a jQuery dialog is showing?

I have a web page with a dialog I'm showing with jQuery.dialog (jQuery 1.7.1, jQuery-UI 1.8.18). I create it like this:
$(theDialog).dialog({
autoOpen: false,
width: "800px",
modal: true, // etc....
});
On the same page, I have a list control I've constructed out of a stack of <div> elements. I listen to clicks on the stacked <div> elements thusly:
$("#listEmployees div").on("click", "input", listEmployees_ItemClicked);
where listEmployes_ItemChecked is my event handler. When I show the jQuery dialog, most of the elements on the HTML page are disabled; i.e. they are unresponsive to mouse clicks &c. However, my stack of lists is not: if I click on the items in it, the event handler gets called.
To work around this issue, I had to introduce a global variable on the page, isDialogVisible which my dialog sets when it opens and clears when it closes. The event handler then ignores the event if the global variable is true. Needless to say, this is a hack and won't scale well.
My expectation was that the jQuery dialog, being modal, would disable all HTML elements and events from these elements while it is open. Is this expectation incorrect? Why am I still seeing mouse clicks when the modal dialog is up?

jQuery UI dialogs (earlier versions than 1.10) have a zIndex property. Set the zIndex to a value higher than any z-index being used within your CSS.
eg.
$(theDialog).dialog({
autoOpen: false,
width: "800px",
modal: true,
zIndex: 99
});
This feature was removed as of jQuery UI v1.10:
Removed zIndex option
Similar to the stack option, the zIndex option is unnecessary with a
proper stacking implementation. The z-index is defined in CSS and
stacking is now controlled by ensuring the focused dialog is the last
"stacking" element in its parent.
jQuery UI dialogs do have the method moveToTop(), but this only moves the dialog to the top of the dialog context, so it is above any other dialogs on the page. It's the developers job to ensure their CSS doesn't cause stacking issues. 'Unfortunately', jQuery UI doesn't hold our hand all the time.

Fire event on scrolling an open bootstrap modal

I am using "Bootstrap" modal (actually a branch of it that disables background scrolling when the modal is shown and adds more features - "bootstrap-modalmanager").
I need to do something when the modal is being scrolled. The problem is I can't find what is actually being scrolled.
When I use Chrome dev tools I can see in the time-line the event "scroll" is bring fired but I can't find where to see the div it scrolls, which I need to know so that I can do:
this:
$(window).on('scroll',"THE ID I AM LOOKING FOR",function(){..})
or this:
$("THE ID I AM LOOKING FOR").on('scroll',function(){..})

You can look for the target element in the event object. This will tell you where the event was fired.
$(document).on('scroll', function(e) {
e.target; //e.target will be the DOM element where the scroll event was fired
});
You can pass a different jQuery selector to the 'on' event according to your requirements.

How to scroll to a certain element in dojo contentPane programatically

I have a ul list of 100+ li elements displayed inside dojo.contentPane which is displayed in a custom dialog which extends dojo dialog. When this contentPane is rendered, I would like scroll bar to automatically slide to nth li element. How can I do that?
I have seen an example at: http://jsfiddle.net/6aNrp/ where scrolling happens on click of a button, but I would like the same behaviour automatically during rendering.

Put your code in the onLoad event of your content pane :
dojo.connect(dijit.byId("myContentPane"), "onLoad", function(evt){
// your code here
});

How can I bind a JQuery event to make it only fire once?

I have a help popup that I want to close when somewhere else is clicked. Here's what I have:
$('.help[data-info]').click(function(){
$('.info[a complicated selector]').toggle(400);
$('*:not(.info[the complicated selector]).one('click','',function(){
.info[the complicated selector].hide(400);
});
})
But one() isn't what I want before it fires for each element on the page. I only want it to fire once.

It looks like you are attaching event handlers to every element in your dom except the help popup? Hmm...
How about this:
Create a single "mask" div that overlays the entire screen, but is transparent (opacity: 0.0). Attach the click event handler only to that mask div. Then open up the info div on top of the overlay div. Clicking anywhere on the page, other than the info div, the event will be captured by the mask div before it gets to anything under it. In your event handler, hide() the info div, and remove the mask div altogether. While testing/experimenting with this, start with a partially opaque mask, not fully transparent).

Make use of a boolean variable and set it to true after first click, so it doesn't trigger the action again:
$('.help[data-info]').click(function() {
var clicked = false;
$('.info[a complicated selector]').toggle(400);
$('*:not(.info[the complicated selector]').one('click','',function() {
if (!clicked) {
.info[the complicated selector].hide(400);
clicked = true;
}
});
})

A couple of options:
You can use the blur event instead of binding a click event to everything but your popup.
Add a transparent, full-page div between the popup and the rest of the page. A click event on the transparent div could handle the hiding.

If you only want to fire once across all your elements, then you may have to manually unbind all the event handlers when any one is clicked or use a flag:
$('.help[data-info]').click(function(){
$('.info[a complicated selector]').toggle(400);
var sel = $('*:not(.info[the complicated selector]);
function hideInfo() {
.info[the complicated selector].hide(400);
sel.unbind('click', hideInfo);
}
sel.bind('click', hideInfo);
})

Opening a popbox when clicking a button

The PopBox plugin is useful for having a text area pop up in its own window when you click within a text area. However, I want a PopBox to appear when the user clicks a button, rather than within a text area. Is there a way to modify the PopBox functionality for this?
tl;dr: I want the PopBox to pop when a function is called rather than when clicking inside a text area

If you look at the popBox source, you'll see that when popBox is applied to an element (via $('#yourElement')).popBox(), there is a focus event bound to it:
obj.focus(function () { $(this).next(".popBox-holder").show(); var
popBoxContainer = $(this).next().next(".popBox-container");
// ...edited for brevity...
});
Attach a click event to your button and, within that, trigger the popBox by triggering the above mentioned focus event:
// Attach a click event handler to your button
$('#yourButton').click(function(){
// Trigger the "focus" event on the popBox element
$('#yourElement').triggerHandler('focus');
});
See a working demo here
Obviously, you can modify this to fit your needs - e.g. hiding the initial textarea or input if you don't want it displayed.