Develop Reference

Using JavaScript to Loop through APEX Application Items

I am working on Oracle APEX, where i have an interactive report to display columns and rows in a tabular form. In the report I have used "apex_item" { each having it's item_id } for most editable columns.
Now, there are three columns, one with the pre-defined read-only value, one where the new value is to be entered and another where the difference between the two would be displayed.
I am not able to write a javascript code to make the above work for all the rows in the report corresponding to those 3 columns. It is only working for the first row for me.
Below is the sample example:
1. APEX_ITEM.TEXT(9,abc, p_item_id=>'p09')
2. APEX_ITEM.TEXT(9,xyz, p_item_id=>'p10')
3. APEX_ITEM.TEXT(9,def,p_attributes =>'readonly', p_item_id=>'p11')
-- document.getElementById("p10").value --> This is only referring to the
value for the first row for that column (p10).
I need item_id 'p11' to reflect the difference of the values of p10 and p09 when i enter the value in p10. Need it to work across all rows for that column.

I am using jQuery here. First add a common classname to the rows of each column. I am here providing same classname as the id.
$('[id]').each(function() {
var ids = $('[id="p09"]');
if (ids.length > 1 && ids[0] == this) {
$('#' + this.id).addClass('p09');
}
var ids = $('[id="p10"]');
if (ids.length > 1 && ids[0] == this) {
$('#' + this.id).addClass('p10');
}
var ids = $('[id="p11"]');
if (ids.length > 1 && ids[0] == this) {
$('#' + this.id).addClass('p11');
}
});
Now you can start a loop over elements like:-
$(".p9").each(function(){
$(this).val() = $(this).siblings(".p11").val() - $(this).siblings(".p10").val();
});

Well, this is how I solved the issue. I am using 'PThis' which is basically a this pointer that refers to each cell in my report. I am using that to find out which row does that particular cell belong to and using that row number i am accessing the other cells where my computation will take effect.
Looking at this function, the code should be self-explanatory.
function change(pThis)
{
var row = pThis.id.split('_')[1];
var xyz= parseFloat(document.getElementById("xyz"+row).value) ;
var abc= parseFloat(document.getElementById("abc"+row).value) ;
var def= parseFloat(xyz)-parseFloat(abc);
def= Math.round(def*100)/100;
document.getElementById("def"+row).value = def;
}

change rows depending on the ordernumber in database

I'm creating for my education-project a pizza-ordering website. With the help of the stackoverflow-community I've achieved already a lot - so thank you! But now I'm stuck and can't find any working solution to my problem.
Question
How can I change the row color alternating (white / grey / white / grey ...) depending on the ordernumber in the database(mysqli)? The ordernumber can be in more than one row, so I can not simple change the color row by row.
I've tried with jquery, but this works only if the ordering numbers remain always in the list (even/odd) ... if an order is cancelled, then it doesn't works anymore (see image with missing ordernumber 7)
Here is the code in jquery:
$(document).ready(function() {
var check = 0;
for(var i =0; i<= $("tr").length;i++){
$("tr").each(function(){
if(parseInt($(this).find("#bestnr").text())==check){
if(check%2 == 0){
$(this).css("background-color","white");
}else{
$(this).css("background-color","#DCDCDC");
}
}
});
check +=1;
}
});
Any ideas? Thanks for your help!

Since you're working with JQuery, something like this ought to do the trick - explanations in code comments.
$(document).ready(function() {
// define the initial "previous order id" as 0 assuming
// there will never be an order with id 0
var previousOrderId = 0;
var previousBgColour = '#dcdcdc';
var thisBgColour;
// loop the table rows
$("tr").each(function() {
// determine "this" row id (assuming bestnr is short for bestelnummer)
// and that the text in that table cell *is* the order number
// I've changed this to a class as an id HAS to be unique
// you'll need to update your code to accommodate
var thisOrderId = parseInt($(this).find(".bestnr").text());
// define the background colour based on whether the order id has changed
// if it has change it
if(thisOrderId != previousOrderId) {
thisBgColour = previousBgColour == '#dcdcdc' ? '#ffffff' : '#dcdcdc';
previousBgColour = thisBgColour;
}
else {
thisBgColour = previousBgColour;
}
$(this).css({'background-color' : thisBgColour});
//update the previousOrderId to this id
previousOrderId = thisOrderId;
});
});
You're basically storing the previous order id and comparing it to the current order id - if the order id hasn't changed it'll use the previous background colour, if it has it'll flipflop it to the alternate colour.

If it is just alternating colors, you can use CSS directly and not worry about anything else:
tr:nth-child(odd) {
background-color:white;
}
tr:nth-child(even) {
background-color:#DCDCDC;
}
If this is somehow dependent on logic from the backend, we can look at adding a class in jQuery and adding colors to this class via CSS

How to give a unique id for each cell when adding custom columns?

I wrote following code to add a custom column to my table. but i want to add a unique id to each cell in those columns. the format should be a(column no)(cell no>)
ex :- for the column no 4 :- a41, a42, a43, ........
So please can anyone tell me how to do that. Thank You!
$(document).ready(function ()
{
var myform = $('#myform'),
iter = 4;
$('#btnAddCol').click(function () {
myform.find('tr').each(function(){
var trow = $(this);
var colName = $("#txtText").val();
if (colName!="")
{
if(trow.index() === 0){
//trow.append('<td>'+iter+'</td>');
$(this).find('td').eq(5).after('<td>'+colName+iter+'</td>');
}else{
//trow.append('<td><input type="text" name="al'+iter+'"/></td>');
$(this).find('td').eq(5).after('<td><input type="text" id="a'+iter+'" name="a'+iter+'"/></td>');
}
}
});
iter += 1;
});
});

You seem to have code that's modifying the contents of the table (adding cells), which argues fairly strongly against adding an id to every cell, or at least one based on its row/column position, as you have to change them when you add cells to the table.
But if you really want to do that, after your modifications, run a nested loop and assign the ids using the indexes passed into each, overwriting any previous id they may have had:
myform.find("tr").each(function(row) {
$(this).find("td").each(function(col) {
this.id = "a" + row + col;
});
});
(Note that this assumes no nested tables.)

try this
if(trow.index() === 0){
//trow.append('<td>'+iter+'</td>');
$(this).find('td').eq(5).after('<td id="a'+column_no+cell_no+'">'+colName+iter+'</td>');
}else{
//trow.append('<td><input type="text" name="al'+iter+'"/></td>');
$(this).find('td').eq(5).after('<td id="a'+column_no+cell_no+'"><input type="text" id="a'+iter+'" name="a'+iter+'"/></td>');
}
you just have to define and iterate the column_no and cell_no variable

When all other cells are numbered consistently (for example using a data-attribute with value rXcX), you could use something like:
function addColumn(){
$('table tr').each(
function(i, row) {
var nwcell = $('<td>'), previdx;
$(row).append(nwcell);
previdx = nwcell.prev('td').attr('data-cellindex');
nwcell.attr('data-cellindex',
previdx.substr(0,previdx.indexOf('c')+1)
+ (+previdx.substr(-previdx.indexOf('c'))+1));
});
}
Worked out in this jsFiddle

JQuery DataTables How to get selected rows from table when we using paging?

For example I selected (checked) 2 rows from second page than go to first page and select 3 rows. I want get information from 5 selected rows when I stay at first page.
$('tr.row_selected') - not working
Thanks.
Upd.
I created handler somthing like this:
$('#example').find('tr td.sel-checkbox').live("click", function () {
/*code here*/
});
But right now when click event is hadle the row from table is hidding. I think it may be sorting or grouping operation of DataTables. Any idea what I must do with this?

When a checkbox gets selected, store the row information you want in a global object as a Key-Value pair
I don't remember specifically how i did it before but the syntax was something like
$('input[type=checkbox]').click(function()
{
var row = $(this).parent(); //this or something like it, you want the TR element, it's just a matter of how far up you need to go
var columns = row.children(); //these are the td elements
var id = columns[0].val(); //since these are TDs, you may need to go down another element to get to the actual value
if (!this.checked) //becomes checked (not sure may be the other way around, don't remember when this event will get fired)
{
var val1 = columns[1].val();
var val2 = columns[2].val();
myCheckValues[id] =[val1,val2]; //Add the data to your global object which should be declared on document ready
}
else delete myCheckValues[id];
});
When you submit, get the selected rows from your object:
for (var i = 0; i < myCheckValues.length; i++)
...
Sorry, haven't done JS in a long time so code as is might not work but you get the idea.

$('#example').find('tr td.sel-checkbox').live("click", function () {
var data = oTable.fnGetData(this);
// get key and data value from data object
var isSelected = $(this).hasClass('row_selected');
if(isSelected) {
myCheckValues[key] = value;
checkedCount++;
} else {
delete myCheckValues[key];
checkedCount--;
}
});
.....
On submit
if(checkedCount > 0) {
for(var ArrVal in myCheckValues) {
var values = myCheckValues[ArrVal]; // manipulate with checked rows values data
}
}

Prevent checkbox tick after Nth selection (allow more from the same category)

We have checkboxes in two columns (they denote the same category, but different subscription)
We would like to limit the selection to 4. We have a jQuery code to disable the checkbox selection after the user selected 4.
But now we need to have the following logic:
Allow the user to choose both values from the same rows (aka: subscribe to both subscriptions from the same category) and do not count in the 4 limit we have if they have chosen more from the same row.
So if you look in the following screencast, we would like to be able to select the first checkbox (1st row).
The code we used was:
$("input:checkbox").click(function() {
var bol = $("input:checkbox:checked").length >= 4;
$("input:checkbox").not(":checked").attr("disabled",bol);
});
A jsFiddle has been created to reflect the current state of work:
http://jsfiddle.net/fFbLx/
Feel free to name the classes, inputs as you wish.

I think you would have to "categorise" them by the LI then. So count the LI's with an checked box - disable all others if more than 4 active.
See: http://jsfiddle.net/fFbLx/4/ (maybe give the UL's a class, so you can use the selector on that)
$("input:checkbox").click(function() {
var counter = 0;
$('li').each( function() {
if($(this).find("input:checkbox:checked").length)
{
$(this).addClass('active');
counter++;
} else {
$(this).removeClass('active');
}
});
var bol = counter >= 4;
$('li').not('.active').find("input:checkbox").not(":checked").attr("disabled",bol);
});

If you wrap your checkboxes in an element you can then use the jquery has selector filter to check how many have selected checkboxes:
$("input:checkbox").click(function() {
var bol = $(".myCheckboxWrapper:has(input:checkbox:checked)").length >= 4;
$("input:checkbox").not(":checked").attr("disabled",bol);
});

Try this http://jsfiddle.net/fFbLx/2/
$("input:checkbox").click(function() {
$(this).parent().find("input:checkbox:first").toggleClass("active");
var bol = $("input:checkbox:checked").length >= 4;
$("input:checkbox").not(":checked,.active").attr("disabled",bol);
});