select data on click of checkbox in table - javascript

I have a table with checkboxes and I want to capture the data in the table rows on click of each of the checkboxes. I have a functional call (click)="checkConditions($event, data)" which is called on click of each checkbox.
Here data gives me all the data of the row which I want to get an array variable. The issue is that on click of the first checkbox it works fine. I get the data and I push it in an empty array but if I click the second checkbox, I lose the original data and only have the latest data. I have tried this.checkedInstruments.push(...data);
it gives me an error "Found non-callable ##iterator" in angular 8.
Can anyone help?

Yogesh, I can see the array checkedInstruments is getting initialized again with empty array and hence you have only the latest data and not the previous one. Try declaring the checkedInstruments array at class level and check again.

Related

How does angularjs binding work when copying objects?

I have several html checkbox that is either on/off based on the properties of an object inside of an array say: objectArray.get(i).isCheckBoxActive. Since the user can change the object properties I'm trying to implement a button that reset all changes. My idea was creating a copy of objectArray (say objectArrayOriginal) and when the button is clicked it calls a function that copies back objectArrayOriginal into objectArray. I would expect that if a checkBox is off in objectArrayOriginal then, after pressing the button, it should be off also in the html page. To copy the object I did:
var objectArrayOriginal = JSON.stringify(objectArray)
.....
function clickReset(){
vm.objectArray = JSON.stringify(objectArrayOriginal)
}
I checked and although the field objectArray.get(i).isCheckBoxActive gets reset to its original value; the checkboxes remain checked/unchecked. The solution I found to be working is iterating over objectArray and comparing the values one by one with objectArrayOriginal. I would like to understand why the previous method fails and if there's a better one. Thanks in advance for any help!

How can I change the value of an Oracle APEX page item using JavaScript?

I created the links in the left-most column to target a JavaScript function and I can successfully pass through the value of the row ID to that function.
Once clicked, a modal pops up to present a form to update the fields. However, I need the fields in the modal to be populated with the information from the row clicked. I figured I could create a hidden page item (P2_SONG_SELECT) to store the row ID so that I can use the value in my query for the data. My problem is I haven't been able to assign the row ID value to the application item.
Here is my JavaScript:
Each 'Edit' button successfully uses this URL target:
javascript:viewEditSong$(#Row_ID#).val();
to call this function:
function viewEditSong(Row_ID) {
alert(Row_ID); // successfully alerts the Row ID
$("#P2_SONG_SELECT").val() = UA_ID; // fails to assign
$("#EditSongWindow").dialog('open'); // open the modal
}
How do I properly assign the page item the value passed in?
Elsewhere I use simliar syntax effectively:
ajaxRequest.add("P2_FILE_MAIN", $("#P2_FILE_MAIN").val()); // this works fine
By 'application item' I presume you meant 'page item' as per your question title, since you're prefixing with page number.
Use this to set a value on the browser.
$s('P2_SONG_SELECT', 'xyz')
http://docs.oracle.com/cd/E59726_01/doc.50/e39149/javascript_api.htm#AEAPI269
Scott's post effectively solves your problem by using the built in APEX set method, but as an aside, you are attempting to use the jQuery val() method in the wrong way.
Instead of:
$("#P2_SONG_SELECT").val() = UA_ID;
You should use:
$("#P2_SONG_SELECT").val(UA_ID);
Have a look at the documentation for val().
http://api.jquery.com/val/#val2
You can see that the usage of the function differs depending on whether you want to set or retrieve a value.

Passing value of select list through Jquery in Oracle Apex 4.2

The following classic report which when we select specific row pops up with new modal region called addExtraDetails with some data grabbed from row and some new additional info required from user:
When (+) is being clicked the new modal region pops up, with populated values taken from the report row. So: in Column link I put:
javascript:function_to_add_to_basket('E',#ID#, 'Extra#ROWNUM#', #PRICE#,'DUMMY');
Then external js function is responsible for passing information. The problem is it does not refresh every time (+) is populated instead it keeps values of the first input.
I found better solution(and cleaner), upon clicking (+) Column Link is passing:
javascript:$s('P4_SET_QUANTITY','#QUANTITY#');
javascript:$s('P4_SET_TYPE','E');
javascript:$s('P4_SET_OBJECT_ID','#ID#');
javascript:$s('P4_SET_ELEMENT_ID','Extra#ROWNUM#');
javascript:$s('P4_SET_COST','#PRICE#');
javascript:$s('P4_SET_DISCOUNT','DUMMY');
javascript:openModal('addExtraDetails');
Now it updates everytime when we select various rows HOWEVER since we have dropdown javascript grabs all possible value of Quantity column so for this code:
javascript:$s('P4_SET_QUANTITY','#QUANTITY#');
the output is: '012345678910'.
How can I pass all values to modal region and make it to work with new values every time its being called ?
You need to retrieve the value of the select list when you click the modal button. The value is not static, unlike the other values. The substitution strings are replaced with their value when the page is rendered.
It isn't really necessary to do all those item sets if all you want to do is use them in a javascript function. Your first idea was probably just as good but I'll just run with openModal.
First, determine how to target the select list. You did not specify whether your report is a wizard-generated tabular form or a manual tabular form (ie used apex_item to make the select list). You could either target the select list by the name attribute, which refers to an array, or select by header of the column. Also see this article.
Eg, with the column name for the select list being QUANTITY, selecting the list would be:
td[headers=QUANTITY] select:visible
Alternatively, if you determine the array you can be more precise in targetting the element. Eg if the NAME attribute is set to f02 then you could select the select lists with
input[name=f02]
Then modify the openModal function to select the list value on the same row as pThis - which would be the triggering element, the anchor :
function openModal(pThis, pMethod){
//fetch the value of the select list on the same row
//I use the second method of selecting here
var lListValue = $(pThis).closest('tr').find('input[name=f02]').val();
...
}
You'll also need to adjust your call to openModal:
javascript:openModal(this, 'addExtraDetails');

sqlite column value back to select - JavaScript

I have a quick question. I am wanting to retrieve a value from my sqlite table (a specific value from a row in a specific column) and I was wondering how to get that value and put it back into a selectmenu.
$('#items option:selected').val(row['column1']);
This is what I have so far in my select statement for sqlite. The #items is the id of my selectmenu, and val.(row['column1']) is the value that I want to get to put it inside the selectmenu specified if that makes sense.
I should note that I have successfully done this for all the form data, the values are being retrieved and displayed correctly, it's just the selectmenu that isn't displaying the required value. Thanks
Got it working, changed to:
$('#items').val(row['column1']);
then added this after the for loop in the sqlite statement:
$('#items').selectmenu('refresh', true);
This correctly displayed the value from the table.

Changing the tabular data to another table using jquery

I tried to implement to display data in a table with the button click. Now I am trying to move the data from the table to the below the continue table. In this code, when I enter the input value from the json object and click the submit button, data will display in a table with a continue button and a empty table below.When I click continue the data in the above table should move to table which is located below the continue button. Here is my code [Sample http://jsfiddle.net/e254w/6/] Can anyone please suggest the idea of implement the scenario?
Krish
One way to approach this would be to remove the row from the first table and append it to the second.
This line finds the second row in the first table, removes it if it exists and appends it to the second table.
$('#datatable').find('tr').eq(1).remove().appendTo($('#seconddatatable'));
updated fiddle
Updated fiddle - this works for me first entering 122233334444, then entering 122223355552

Categories