Add Dynamic Action(Javascript Event) to the first checkbox (Oracle Apex) - javascript

I would like to ask for help with regards to working with the checkbox item in oracle apex. My problem is that I cannot add a javascript event or dynamic action to the first checkbox for the purpose of toggling a check all event.
I have tried accessing the auto-generated id ex. P100_SAMPLE_CHECKBOX_0 and put it on jquery selector in dynamic action property but somehow still does not work.
Goal: Using jquery / javascript code to toggle check all when the first checkbox is clicked.
Further Explanation:
So as you can see on the top image I have a checkbox item which composed of year from 2016 to 2020. So let's assume that there was already an "All" checkbox on top of 2016. So what I wanted to do is upon clicking the first checkbox (which is "All") all the checkbox from 2016 up to the end will automatically be checked/unchecked.

Take note of the DA scope, it should be dynamic, otherwise partial page refreshes will stop your DA from working as expected.
There is also a :first selector, which will deliver the first component within a set.
Today I also modified the header of a column in a report to select/select all items, and controlled it that way.

Related

Select All checkbox is not working when I go to second page of a classic report in Oracle APEX

I have a page having a classic report in an Oracle APEX application. The first column of each row is a checkbox. Also, I have added a checkbox in the first column of headers row. The purpose of this checkbox is to provide Select-All, Unselect-All functionality so that when I select the header checkbox, the checkboxes in all rows get selected, and when I unselect it, the checkboxes get unselected. Here is JQuery code that I use on the "change" event of the header row's checkbox:
if ( $( '#selectunselectall' ).is(':checked') )
{
$('input[type=checkbox][name=f01]').attr('checked',true)
}
else
{
$('input[type=checkbox][name=f01]').attr('checked',false)
}
The problem is that this functionality is working only for the first page, and only when it is first loaded. If I go to next page, this functionality no longer works, and also if I come back to first page, that functionality doesn't work even on first page.
Another problem is that when I select some individual checkboxes on first page, and then go to next page, and then come back first page, all the checboxes again come as unselected. It means the application doesn't remember user's selecttions when the user navigate out of page.
Can someone please help resolve these issues?
Try the following steps:
InteractiveReport - Columns - "Select" - Heading - "<"input type="checkbox" id="selectunselectall" onclick="$f_CheckFirstColumn(this)"">"
InteractiveReport - Attributes - Heqading - Fixed To - "None"

How to check whether element is already clicked or not in protractor

I need to check whether element is already clicked/selected or not in protractor.
My scenario is given below.:
I need to check whether the date which i am going to select is already selected in angular js calendar. However single click clear the selected date in calendar .i didnt get any method which return element is clicked or not.
E.g i need to select 11th jan in calendar so before that i need to check whether 11th jan is already selected or not
I also tried element(locator).isSelected() which returns the false value.
Kindly suggest solution which will solve my issue.
Assuming that once clicked, the calendar changes somehow. I'm assuming possibly that some css changed to show what was selected. I am going to make some assumptions on what this looks like. This is difficult without html. You could use getCssValue:
Assumption that you have all your calendar dates with a css called "dates" and that the 10th item in this array of elements is the January 11th. Next assumption, the website css changes when selected. Let's say this css is called "date-selected"...
element.all(by.css('.date')).get(10).getCssValue().then(css => {
console.log(css);
// TODO: parse css and/or expect "date-selected" in "css" to be true
});

jquery Checkbox Selection to manipulate a table of row

I need to select the header checkbox when all the rows are selected.
I used logic to keep a count of the number of rows checked if it's equal to row_count,I need to select the header checkbox
The problem is I cannot access the header checkbox through DOM because of the browser restriction
I'm using the following jquery code to get it worked but it's not working as expected
var check_box = fw.component_helper.get_table_column_editor(fw.form_constants.CHECK_BOX);//header checkbox
$("check_box").attr('checked',true);
Note: fw is my own defined framework
Please suggest what's wrong with this approach
use prop instead of attr. What is "$('check_box')". Define weather it is class or id. you selector is wrong here I thing this could be problem.
$(".check_box").prop('checked',true);
or
$("#check_box").prop('checked',true);
or
$("input[type='checkbox']").prop('checked',true);

How do I create a clickable grid of hours in a week, saving clicks to MySQL?

Just wondering if there is a system out there that will basically allow for the following :
Displaying a grid of hours in a week that a user can click on to select and reclick to deselect and when the form is submitted it will send the blocks off to MySQL to store.
Since I havent done this before Im not sure on the best course of action, intial thoughts were to load up a pixel.gif and use onclick to tally clicks but before I reinvent the wheel as a square I thought it best to ask questions first to save trouble later.
You could create a table where the checked td's have one class and the unchecked td's have another class, and all of them have a unique ID. Then set the onclick action for each of the two classes to send the id of the td as an argument to a javascript function that uses ajax to update the database and changes the class of the td to selected or unselected.
The html would look like:
<td id='19_09_2011_12am' class='unselected_td'/></td>
<td id='19_09_2011_12am' class='selected_td'/></td>
The css would look like:
.unselected_td{background-color:blue;}
.selected_td{background-color:yellow;}
And the javascript:
$('.unselected_td').click(function(){
var cell = this.id;
$.ajax({
type:'post',
url:'path/file.php',
data:"cell="+cell+"&checked=1",
success:function(){
$(this).removeClass('unselected_td').addClass('selected_td');
}
});
});
And vice-versa for the selected ones, sending a 0 to the server instead. I'm not 100% sure about the syntax I used in the jquery, but the idea of this should work
I think the easiest way to achieve this would be to use buttons or checkboxes to represent the dates/hours selected. Checkboxes would be the simplest, since they could just be set to a value of '1', and only the selected checkboxes would show up as $_POST variables when you submit the form.
Buttons could have more style applied to them, but you would have to use some javascript code to toggle the value and style of the button when it's clicked. This is very easy to do in jQuery.

YUI Custom Event for Dropdown value pre-selection?

I have a dropdown field and its value is pre-selected as soon as its rendered (Say, its a Country field in a signup form). And I have other dropdowns or other components which change the selected value of the first dropdown dynamically. Now I want to fire a method with every "value getting selected" in the dropdown. Is it possible?
To put my question in much more clearer way, I want to create a onDefaultValueSet event and subscribe the first dropdown to it. So in which ever way the dropdown gets any value selected, the corresponding handler (my function) gets called.
I tried to do it with YUI Custom Events, but I am not sure how the browser will be calling(understanding) my handler every time a value is selected in the dropdown.
onSelect (from Default DOM) is not a right answer I guess, as I tried it.
Please help me in tackling this problem.
I am not sure whether this is an answer, but I've found a workaround. Please validate this.
So I was making a item "selected" using javascript-dom manipulation. Meaning, using
domElement.options[5].selected = True;
So with the (YUI)custom event I created, I started calling "fire()" right after this. So the code becomes:
domElement.options[5].selected = True;
onDefaultValueSetEvent.fire(domElement.name);
But I am not sure, what if the particular option is selected in a gui fashion. Meaning, how automatically fire() method is called

Categories