Develop Reference

Preventing Apex Button Double click

Hi I have a button that inserts empty records into an interactive grid. I want to prevent the user from being able to double click that button because it populates duplicate rows. I have a server side argument that says if there are rows the button does not appear however they are still able to double click the Populate_tables button before it vanishes. If there are any other solutions to this please sound off. I've tried everything from javascript to server-side but they are still able to double click no matter what. Here are the before and after pictures of the table.

$('#btnPopulateTbl').dblclick(function(e){
e.preventDefault();
});
The above code prevents the double click for a button. This is in jQuery.

Oracle Apex does not offer this functionality as a setting or etc.
However you can use
$('#button').click(function(event) {
if(!event.detail || event.detail == 1){
// This will be executed once even user clicks multiple times
}
});
Note that your selector must be the id or the class you provide to this button.
By default 'add row' button's classes are:
class="a-Button a-Toolbar-item js-actionButton"

Another solution would be to have apex handle this. Suppose this is on page 1.
Create a page item P1_POPULATE_ROWS_CLICKED with a default value of 'N'
In the page process that populates the table, add the following line before the actual load:
:P1_POPULATE_ROWS_CLICKED := 'Y';
Add a condition to the page process that populates the table of "Item not equal to value", P1_POPULATE_ROWS_CLICKED , Y
Yet another solution is to only execute the insert statement if no rows exist with that condition yet. I can't show you how to do it because you didn't show how the table is populated but happy to do so if you edit your question. This last option is propably the most suitable.

Spotfire button change color when clicked / selected

I am trying to make the buttons created in Spotfire to change color or fade when they are clicked. Basically we want the buttons to show they are marked when selected.
What is the best way to do this?
Thank you for your time.

If you're editing the HTML around a button, it looks like you can make it bold or change the size of the text, though you can't change the color (Or, oddly enough, underline or italicize the text in the button).
So copy the html code for the text area into a string, and on your script for the button click, add the following general setup.
Example Initial HTML:
<p><SpotfireControl id="724c2b260722473caecaef18a2b3b695" />
</p>
Example Code (vTextArea is a parameter of Type Visualization referencing the text area your button is in):
from Spotfire.Dxp.Application.Visuals import VisualContent
from System import Guid
page = Application.Document.ActivePageReference
fullhtml = '<p><font size="3"><b><SpotfireControl id="724c2b260722473caecaef18a2b3b695" /></b></font></p>'
ta=vTextArea.As[VisualContent]()
ta.HtmlContent=fullhtml
I know this doesn't do exactly what you were asking for, but it does succeed in showing the user which button they've clicked.

Possible to trigger a Bootstrap Tooltip from a separate elment?

I am working on a system where a user can add notes over an image that they submit. Currently I have a note div that when clicked, will open up a text box to edit it. When hovering over this div, I use Bootstrap Tooltip to preview the information within the textbox.
I also have a list of the notes within a separate right panel. Is is possible to hover over the listed note in the right panel, and show the tooltip on the note div? In general, my question is: Is it possible to activate a tooltip from a separate div?
Here is the primary div that when hovered, shows a tooltip
<div originalh="85" originalw="122" originaly="501" originalx="490" h="23.071428571428" w="33.114285714286" y="135.98571428571" x="133" noteid="1153" note="TEST" class="noteBox helpTip" onclick="process.editNote(this)" id="note1153" data-original-title="TEST<br></div><small>Type: Color Correction</small><br/><small>Status: Awaiting Approval</small><br /><small>By: Josh Admin<br />Today 10:54 AM</small>"></div>
Is is possible for me to apply some code to a separate div that would allow me to hover over it, and trigger the tooltip on #note1153 above?

Yes, you can trigger the tooltip on any element via JavaScript. See the tooltip documentation for more information.
You would just do:
$('#whatever').tooltip('show');
Here's an example of it in action: http://jsfiddle.net/sJ88m/

Clicking contained element also effectively (but wrongly) clicks its container

This is the problem page I'm developing.
Consider the leftmost column header, with header text "Undr." Here is the simplified html for that column header:
<th class="underlying" onclick="toggleColSelect(this);">
<img class='ad' onclick="toggleColSortOrder(this);">
Undr
</th>
The user can do two things in the column header:
select and deselect the column, by clicking the column header. EDIT: The column is selected when the column header has a yellow background; and unselected when the column header has a white background.
select ascending or descending sort on the column contents, by clicking the up/down-arrow image.
However, clicking the image also selects/deselects the column, which I don't want. When he clicks the image, I want to toggle the sort order only; I don't want to toggle the select on the column.
My JavaScript function toggleColSortOrder(); does indeed toggle only the sort order; but it seems the function to select the column also gets called (wrongly) when the user clicks the image.
What I've tried: thinking this might somehow be a manifestation of bubble-up at work, I tried all combinations of returning true, false and nothing in each of the two functions. None of this had any effect. I'd like to avoid hacking the JavaScript any further.
Question: how, by changing my html or css, can I prevent the function toggleColSelect(); being called when the user clicks inside the up/down-arrow image?

Your can cancel event-bubbling by adding
event.cancelBubble = true;
to your functions. See this fiddle: http://jsfiddle.net/fcyCz/

Here is my theory, since your <img> tag is INSIDE your <th> tag, you cannot click the <img> without first 'clicking' through the <th>. If there was a way to un-nest these two tags, I would then assume that their functions would be called separately. Possibly using a <div> to align your <img> over the correct spot. I am going to try to do live adjusting of what I just said using firebug and see (if it doesnt break the javascript) if it works, and I will report back.
Good luck.

As Tomalak points out, the click event for the <img> is bubbling up to the parent <th>, and so you must specify otherwise in your function. Also, add a call to event.stopPropagation() for the browsers which have deprecated cancelBubble.

Linked drop down lists and load div

I'm kind of new when it comes to programming but am trying to learn.
What I need to do for my site is have 2 or 3 linked drop-down menus so when I select an item from the first one, the second one will refresh with other options. I have found a way to do this using Java but I cannot seem to make it with the refresh div part.
I looked up prototypejs/updater but it is a bit over my head and cannot seem to link it with the JavaScript I used for the drop-down menus...
So if anyone can tell how I can link two, maybe 3 drop-down menus and after if I click an option from the last menu make a div from the page refresh with other content please help :)

Try a search on google for dynamic select boxes, it's plenty of examples, choose the less complicated one that best fits with your knowledge.
The principle is to link a function to "onchange" event that the select box fires when an item is selected.
Assuming this select box:
<select id="select1" name="option">
</select>
the javascript fragment is:
var sel1 = document.getElementById("select1");
sel1.onchange = function() {
//do whatever you want
};
For the first and the second select, the function will load other select's options, while in the third case it will show your div

Not 100% sure what you are after - but I think this should get you at least some of the way:
http://remysharp.com/2007/09/18/auto-populate-multiple-select-boxes/
It's a jQuery plugin for linking select boxes together, using Ajax to load the data to populate the next box in the chain based on the value selected in the previous.
You'll then still need to link the last box with the div - but you should be able to do it with a similar method yourself - see the jQuery Ajax documentation.
http://docs.jquery.com/Ajax