I have a table in which I want to compare the cell value with others in each row. The table can be dragged and dropped to update the sequence number. I don't want to update the sequence number if the pos_nbrs are the same but the position is temporary. For example, I finished comparing row 1 with row 2, row3, and row 4 but nothing happens this round. Next, I move to row 2 and compare it with row 3, and row 4. Then compare row 3 and row 4. If the condition is met, I want to stop and go out of the loop and execute the next line of codes after the loop.
Here's my table:
<table class="t-Report-report ui-sortable" id="seq_report">
<thead>
<tr class="ui-sortable-handle">
<th class="t-Report-colHead" align="left" id="PK_DISPLAY"> </th>
<th class="t-Report-colHead" align="center" id="POS_NBR">Position</th>
<th class="t-Report-colHead" align="center" id="DISP_VAL">Description</th>
<th class="t-Report-colHead" align="center" id="SEQ_NBR">Seq</th>
<th class="t-Report-colHead" align="center" id="PERM"></th>
</tr>
</thead>
<tbody>
<tr data-id="19691" class="ui-sortable-handle">
<td class="t-Report-cell" headers="PK_DISPLAY"><a href="#" data-id="19691"></a></td>
<td class="t-Report-cell" headers="POS_NBR">05M</td>
<td class="t-Report-cell" headers="DISP_VAL">t05</td>
<td class="t-Report-cell" headers="SEQ_NBR">1</td>
<td class="t-Report-cell" headers="PERM">Perm</td>
</tr>
<tr data-id="19692" class="ui-sortable-handle">
<td class="t-Report-cell" headers="PK_DISPLAY"><a href="#" data-id="19692"></a></td>
<td class="t-Report-cell" headers="POS_NBR">06M</td>
<td class="t-Report-cell" headers="DISP_VAL">t06</td>
<td class="t-Report-cell" headers="SEQ_NBR">2</td>
<td class="t-Report-cell" headers="PERM">Perm</td>
</tr>
<tr data-id="19690" class="ui-sortable-handle">
<td class="t-Report-cell" headers="PK_DISPLAY"><a href="#" data-id="19690"></a></td>
<td class="t-Report-cell" headers="POS_NBR">04M</td>
<td class="t-Report-cell" headers="DISP_VAL">t04</td>
<td class="t-Report-cell" headers="SEQ_NBR">3</td>
<td class="t-Report-cell" headers="PERM">Temp</td>
</tr>
<tr data-id="19687" class="ui-sortable-handle">
<td class="t-Report-cell" headers="PK_DISPLAY"><a href="#" data-id="19687"></a></td>
<td class="t-Report-cell" headers="POS_NBR">04M</td>
<td class="t-Report-cell" headers="DISP_VAL">t04</td>
<td class="t-Report-cell" headers="SEQ_NBR">4</td>
<td class="t-Report-cell" headers="PERM">Perm</td>
</tr>
</tbody>
</table>
Here's my codes:
var fixHelper = function (e, ui) {
ui.children().each(function () {
$(this).width($(this).width());
});
return ui;
}
function updateDisplaySeq(pRegionID) {
//var results = $('#seq_report').find("table.t-Report-report").sortable('toArray', {attribute: 'data-id'});
var results = $(pRegionID).find("table.t-Report-report").sortable('toArray', { attribute: 'data-id' });
// var results = $("table.t-Report-report").sortable('toArray', {attribute: 'data-id'});
//console.log("results: " + results);
apex.server.process("UPDATE_ORDER",
{ f01: results },
{
success: function (pData) {
apex.message.showPageSuccess("New order saved.");
apex.event.trigger(pRegionID, 'apexrefresh');
},
dataType: "text"
}
);
}
function makeSortable(pRegionID) {
var $r = $("#report_" + pRegionID);
var r = $r[0];// add ID to TR element so we know the correct position
var $perm;
var $obj;
$r.find("[headers='PK_DISPLAY'] a").each(function () {
//console.log($(this));
$(this).parent().parent().attr('data-id', $(this).data("id"));
// $(this).closest('tr').attr('data-id',$(this).data("id"));
});// finally make it sortable
$r.find("table.t-Report-report").sortable({
items: 'tr'
, containment: r
, helper: fixHelper
, update: function (event, ui) {
$obj = $r.find("[headers='POS_NBR']");
//var i = 0;
//var j = 0;
$perm = $obj.next().next().next();
outerLoop:
for (var i = 0; i < $obj.length-1; i++) {
for (var j = 0; j < $obj.length - 1 - i; j++) {
if($obj[i].innerHTML == $obj[i+1+j].innerHTML && $perm[i].innerHTML == 'Temporary') {
apex.message.alert("Sequence number of Temporary bid of " + $obj[i + 1 + j].innerHTML + " cannot be smaller than Permanent bid of same position number " + $obj[i].innerHTML);
apex.event.trigger($r, 'apexrefresh');
break outerLoop;
}
else{
updateDisplaySeq(r);
}
}
}
}
});
}
In my codes, the alert message box popup but the sequence number will be updated.