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.

How to use Popover inside a Angularjs function

My problem is pretty weird and unique. I will do my best to explain my situation here.
I have a form validation. Once user fills form and selects add button, it allows to add for first 6 times. After 6th submission, the add button is disabled and user is not allowed to add any further.
Here is the add button function
$scope.addItem = function () {
$scope.items.push($scope.activeItem);
if ($scope.items.length > 6) {
$scope.disableAdd = true
// here is the code below where i want to insert my popover function.
}
}
Can anyone please let me know how to insert a popover like this at run time. Please note: i dont want to show a popover straight away as the page loads and user selects the button. I want to show it only after User has submitted 6 forms. The number of times the user submitted is shown in $scope.items.length
I just want to display something back to the user that he cannot add any more. I tried using a modal but i thought popover would be much better. Any suggestions are welcome.....

There's a ton of ways to do this. If your popover exists statically in the dom, you could just trigger it with the same scope boolean you're using to disable the button with the ng-if directive:
<div class="popover" ng-if="disabledAdd">No more forms allowed<div/>

How to reload JSP with changed actionbean variable using Stripes

I am new to working with Stripes. I have a dropdown ("show ## recordrs per page") and a paginated table on the JSP page and I want to display as many records per page in this table, as the value selected in the dropdown.
The action bean has a variable "recordsPerPage" and I am not able to figure out a way to set the value of this variable and reload the table, so as to change the number of records that are displayed per page. Please help.
---- Additional Info -----
The table that I use is a displaytag table, which accepts a PaginatedList. This table is within a stripes form.
-- EDIT:
What I did is, I added a <stripes:hidden/> with the name "recordsPerPage" and set the value to be the number of records I want to display. I also added a <stripes:submit> to the same form. The "name" attribute of this submit button is the method name of the action bean I have to call. When I click on this button, I am able to do what I want. But now, I am unable to do it through javascript. Please help.

Due to some reason, calling Dom.get('submitButton').submit() or Dom.get('myFormId').submit() does not fulfill the intended purpose. Taking a clue from being able to do what I wanted from the submit button click, I made this submit button hidden and the called click() on this button from javascript. Thus Dom.get('submitButton').click() produces the intended result. If someone can give me the explanation of why the submit method did not result in expected behavior, that'll be great.

Current TabPanel ID in onClientLoad CSJS

I have client sided code in the onClientLoad event of my form that governs field hiding. Problem is, it depends on values in the first tabPanel. If I switch to the second tabPanel, it stops working. I can no longer switch back to any other tabPanel.
How can I within the onClientLoad event using CSJS identify which panel I currently am on?

In a tab panel whenever you switch between tabs the fields are recalculated.
So, I would rather suggest you to put a visibility formula on field instead.

Make sure all tab panels have a nice id. Then in your script block you can add something like:
var t1 = dojo.byId("#{id:tab1}");
if (t1) { // do your stuff }
Does it work for you?

Reset values in a particular table which are edited on click of Reset button

On a HTML page I have three sections with 3 tables. Each table has its own Reset button which should reset only the sections it is required to. Unfortunately, I have used the same form for all the three and there is lot of change to be made if 3 seperate forms are created.
Is there a way to reset only a particular section of the page in this way?

form.reset() is built in to the browser, so it's behaviour cannot be amended.
An alternative is to write your own code in javascript to reset the fields of each table, like this:
function resetInput1(e){
document.getElementById('input1').value = document.getElementById('input1').defaultValue;
}
function resetInput2(e){
document.getElementById('input2').value = document.getElementById('input2').defaultValue;
}
document.getElementById("btn1").addEventListener('click', resetInput1, true);
document.getElementById("btn2").addEventListener('click', resetInput2, true);
Example fiddle here

here u can write a javascript method to reset all the elements available in your section and call the function on click on the reset button, using form.reset will reset the whole form.
otherwise you can have multiple form on a page and place your reset button inside each and reset.
If you are using .net you cannot have multiple forms on same page. for this you will have to disable/ hide the other forms.
// AFTER YOUR COMMENTS TO MY POST
here u can store the default values in hidden fields means my each element will be having a hidden field, where the default value will be stored.
when a user changes any text in textbox, change index in drop down, unselect some checkboxes, etc, and hits reset button
you will call a javascript function which will set the values from the hidden fields back to the respective controls. This will save your round-trip with the server to fetch the default details back from the database.
otherwise u can use ajax methods to rebind the default values to the element on html form.
I m particularly mentioning Ajax methods here because, if we post back the webpage again it will reset all your values in the other sections.
Hope it is a clear explanation.