Preventing Apex Button Double click - javascript

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.

Related

Verifying a radio input has been checked to display div on separate page

I am having an issue of hiding and displaying content on a separate page if a certain radio input has been checked. Currently I am trying to hide special content if the user hasn't checked one radio input. I have code that works for that page which switches the banner to allow them to go to the page after they complete this task, but when I go to the next page the content doesnt show up.
Here is my current script for the banner to hide and show based on the radio input being checked.
if ($('input[name=sexo-field]:checked').length > 0) {
$("#pdfFlipButton").show();
$("#pdfFlipButtonOff").hide();
} else {
$("#pdfFlipButton").hide();
$("#pdfFlipButtonOff").show();
}
But how would I go about showing or hiding a div on the next page based on these parameters?
This is not easy and you have 3 not good ways:
The page that must be affected, is a child page and send data from parent page to child page.
In both page create ajax functions, send direction from one and another must check the server in a few seconds:
setInterval(function(){
//if radio checked
}, 3000);
As mentioned in comments, submit radio button and refresh second page.
As #adeneo said, you can wrap the radio button in the form element and after submitting that form, catch values on the next page which the form points on. Or as #Michael Alexander Montero said, you can use sessionStorage which I would rather recommend.
Here is the documentation of how to use sessionStorage. In your case it would be for example:
sessionStorage.setItem('radiochecked', true);
And in the next page you will add following line:
if(sessionStorage.getItem('radiochecked') {
// display the panel
}

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.

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.

Disable search button if there's no input and hide search table if the page loads first time

I am creating a JSP page which has few fields for searching.
I am facing 2 issues.
1) The search button should be disabled until at least one field is not empty. The form has mixed type of fields(few text boxes, drop downs, etc). I have tried few things but the button is not disabling.
2) Second issue is the search result is being displayed in the same page. I am displaying the search result in a table inside a div. I am trying to hide this table until the user doesn't click on search. I have tried doing this by setting a flag in my controller but it's not working.
I have tried using javascript and JQuery for these but for no avail. Pls help!!
Edit 1:
I have used something like:
$(document).ready(function(){
$('input[type="submit"]').attr('disabled','disabled');
$('input[type="text"]').change(function(){
if($(this).val != ''){
$('input[type="submit"]').removeAttr('disabled');
}
});
});
But when I'm using this, the drop downs are not being populated with model object.
$('#yourFormId > *').filter(':input[value!=""]').length will return the number of form fields that are not empty.
Im not sure what you want to do with the table though, seems like you should just be able to set display:none on the table and use the jQuery css function to change it when the user clicks.
Posting a code sample would help :)

Categories

Resources