We Keep Coding

Interactive Grid inside a Modal Dialog only shows a limited number of rows

I have an interactive grid inside a modal dialog page which has to display this associative table :
SELECT PK_FK_ARTICLE,
PK_FK_SERVICE,
PK_FK_ETAGE_BUREAU
FROM INV_TB_POSSEDER;
CREATE TABLE inv_tb_posseder(
pk_fk_article INT,
pk_fk_service INT,
pk_fk_etage_bureau INT,
CONSTRAINT ct_pk_posseder PRIMARY KEY(pk_fk_article, pk_fk_service, pk_fk_etage_bureau),
CONSTRAINT ct_pk_fk_service FOREIGN KEY(pk_fk_service) REFERENCES inv_tb_service(pk_service),
CONSTRAINT ct_pk_fk_etage_bureau FOREIGN KEY(pk_fk_etage_bureau) REFERENCES inv_tb_etage_bureau(pk_etage_bureau),
CONSTRAINT ct_pk_fk_article FOREIGN KEY(pk_fk_article) REFERENCES inv_tb_article(pk_article)
);
ALTER INDEX ct_pk_posseder RENAME TO ind_pk_posseder;
CREATE INDEX ind_pk_fk_service ON inv_tb_posseder(pk_fk_service);
CREATE INDEX ind_pk_fk_etage_bureau ON inv_tb_posseder(pk_fk_etage_bureau);
CREATE INDEX ind_pk_fk_article ON inv_tb_posseder(pk_fk_article);
Here's how I configured the Interactive Grid :
Pagination set to Scroll
Heading set to Region with a height set to 850px
My 3 columns have their values based on a LOV, which makes it easier to read the values instead of just numbers :
When I open the page and scrolls through the records (about +400 rows), no rows are displayed after the ~40th row :
What I tried and found :
I already tried to set the Pagination to Page, but the records doesn't show after the 3rd page, and I can't go back to the previous pages.
I tried to set the Heading to None, but then no rows appears.
If I apply a filter on a column, the rows appears, even more than 40 row !
I also found that if I remove the LOV on the first column PK_FK_ARTICLE, all rows are showing, but it's not useful, I have to display the LOV on the 3 columns.
The interactive Grid has a static ID called donneesList which is used for JavaScript, to remove some functions on the Interactive Grid :
$("#donneesList").on("gridactivatecolumnheader", function(e){
setTimeout(function() {
$("#donneesList_ig_column_header_menu").find("[data-option='freeze']").remove();
},1);
});
let actions = apex.region("donneesList").call("getActions");
actions.hide("selection-copy-down");
actions.hide("selection-copy");
actions.hide("selection-fill");
actions.hide("selection-clear");
actions.hide("single-row-view");
actions.hide("selection-duplicate");
actions.hide("row-duplicate");
I've seen some similar posts on the Oracle Forum and here on SO but none of the solutions seems to work for me
Thanks in advance,
Thomas

How to store a string and display only part of it

I am using datatables with mysql and php to display records and I have a column called 'Notes' which may contain 1 or more newlines, ( chr(10) ).
I am using
while( $row=mysqli_fetch_assoc($records) ){......
to fill the table and
$('#example tbody').on( 'click', 'tr', function ()......
and
Notes = $('td', this).eq(6).text();
to get the value of 'notes' (and others) in the clicked row for populating an edit dialog.
All working fine.
I have been asked if it's possible to display only the first line of the notes column in the table which I have done using 'strpos' and 'substr' and it's OK
Unfortunately because the edit dialog gets it's data from the table I'm now only getting the first line.....
I'm guessing I need to collect the entire field before I chop off the back bit and then use this collection (maybe in an array ??) to populate the edit dialog.
I'm afraid I'm still a bit 'green' here and not sure of the best approach or how to fill and then access the array.
Thanks for any help.
Additional ....Additional ....Additional ....
Thanks Barmar, this looks like a nice clean fix but I'm not there yet.....
I have added the CSS and the following code snippets..
** ListNotes = $('td:nth-child(6) .expanded', this).text();
and inside the php table 'while loop'
$findme = chr(10);
$pos = strpos($row['ListNotes'], $findme);
$lft = substr($row['ListNotes'], 0, $pos);
....
echo "<td><span class='abbreviated'>".$lft."</span><span class='expanded'>".$row['ListNotes']."</span></td>";
and the table is displayed as expected.
I put a break in Firebug after the line marked ** and 'ListNotes' is an empty string ("") ???
I was hoping it would contain the whole string including any chr(10)'s.
Have I done something wrong?

Put the full text in a hidden span:
<td><span class="abbreviated">First line...</span><span class="expanded">First line<br>Second line<br>Third line</span></td>
with CSS:
.expanded {
display: none;
}
When you edit, get the notes to expand from the .expanded span:
var text = $('td:nth-child(6) .expanded', this).text();
After the edit, store the abbreviated and expanded result back into the appropriate spans:
$('td:nth-child(6) .expanded', this).text(edited_text);
$('td:nth-child(6) .abbreviated', this).text(abbreviated_text);

I meant to answer my own question a while ago but forgot. Here's how I solved it.
In the table display I had 1 displayed column with the truncated string and 1 hidden column with the complete string. I used the hidden column for the edit dialog. Simple and effective.

AngularJS: Custom directives not working with dirPagination

I am using AngularJS to create a page which contains a list of products that shows information such as a name, price, region etc. This is displayed kind of like an accordion with the name in the header and extra information in the body.
Since there could be a large amount of these items displayed I am using dirPagination (https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination) to paginate these items. My markup at the moment looks like this:
<div class="custom-list" dir-paginate="asset in assets | itemsPerPage: 10 track by $index">
<div class="custom-list-item" ng-class="{'tag-hover': isHoveredTag(asset)}">
<div class="custom-list-item-heading" ng-click="toggleShowAssetDetails(asset)">
<p class="col-lg-5">{{ asset.name }}</p>
<div class="col-lg-offset-2 col-lg-3 rating">
<rating value="asset.rating" />
</div>
<button ng-click="addAsset(asset)"><span class="glyphicon glyphicon-plus"></span></button>
<div class="clearfix"></div>
</div>
<div class="custom-list-item-content" style="display: none" animate="shouldShowAssetDetails(asset)">
...
</div>
</div>
</div>
As you can see I'm using paginate in a pretty standard way just looping through the items in an array and displaying 10 per page. I also have a directive called rating which looks at a value called rating in the item. This is a number from 1 - 5 which is used to display a star rating system next to the name. The directive looks like this:
var rating = function ($compile) {
return {
restrict: "E",
scope: {
value: "="
},
link: function (scope, element, attrs) {
scope.$watch(attrs.rating, function () {
for (var i = 1; i <= 5; i++) {
if (i <= scope.value) {
var starElement = angular.element("<span class=\"icon icon-crown\"></span>");
$compile(starElement)(scope);
element.append(starElement);
} else {
var emptyStarElement = angular.element("<span class=\"icon-empty icon-crown\"></span>");
$compile(emptyStarElement)(scope);
element.append(emptyStarElement);
}
}
})
}
}
}
This looks at the value and inserts the icons based on the value of rating (e.g if the rating was 2 the directive would insert two icon-crown icon spans and 3 icon-empty icon-crown icon spans.
This was working perfectly fine before I included the pagination. However now it will only work for the first 10 items. When you change the page, the rating will not change and just keep the same icons from the previous page, even if the values are different.
I understand this is because the directive sets everything at the beginning and it will not run when you change page because the items aren't reloading they are just being shown and hidden again. But the directive is manipulating the DOM so it doesn't update when the page changes.
The problem is I don't know how to resolve this. I thought about changing the directive to look for the pagination current page instead but then I don't have access to the current list item.
I'd appreciate any help on getting the directive to update the icons when the page is changed.
Update
Here's a link to a Plunker project showing the problem I'm having: http://plnkr.co/edit/VSQ20eWCwVpaCoS7SeQq?p=preview
This is a very stripped down version of the section on my app that I'm having an issue with. There's no styling included although I have kept the CSS class structure. I've also changed the icons to use bootstrap ones just to simplify the Plunker project.
The functionality is the same however. If you go from page 1 to page 2 notice how the stars remain the same despite that fact that the asset rating values are different. However if you go to page 3 and back to page 2 or 1 they will change. The reason this happens is because there are less items on page 3 and therefore when you go back to page 1 or 2 the remaining items will be called again to retrieve the rating values.

You simply need to remove or replace track by $index.
Tracking by $index will give you the following behavior:
There is an array of max 10 length that represents the items to show. The first item will have index 0.
You go to the next page and the items in the array are replaced.
The first item in the array will still have index 0. Since you are tracking by index and the index has not changed, AngularJS will not recreate the DOM node representing the item. Since the DOM node isn't recreated, the directive will not execute this time and the rating will not update.
If you go from page 3 to page 2, the directive will execute for the 7 last elements on page 2, since they didn't exist on page 3, so they are considered new this time.
If you really need to use track by you should use a property that is actually related to the object (and unique), for example:
dir-paginate="asset in assets | itemsPerPage: 10 track by asset.name"
Demo: http://plnkr.co/edit/A80tSEliUkG5idBmGe3B?p=preview

jquery manipulation post page load

I'm currently using a script on an ecommerce website that shows or hide a free shipping stamp based on a number(price). Initially the stamp shows for all products and i hide it where necessary. My problem is, the script reads from the 'regular price' and will display the stamp accordingly, but i have products with promotions that hides the regular price and displays the promo price then bringing the actual price of the product under the appropriate limit and i can't figure out a way to hide the free shipping stamp on those particular items.
I'm using the following to remove the tag if the price goes under 99, but with my hackish promotion price display, i cant figure out how to read that post load promo price display to apply the function as needed. I've tried replicating this script and applying it to the promo price div to no avail. Any suggestions as to how i can read a divs numerical contents post load and hide the stamp? I'm beginner to intermediate when it comes to jquery so help in layman's terms would be helpful.
$('#results-table .redprice, #pp-wrap #big-price span').each(function(){
var $this = jQuery(this);
var number=$this.html();
number=number.substring(1);
number=parseFloat(number);
if(number > 50){$this.parents('div.grid3wrapper, div.list3wrapper, #pp-wrap').addClass('over50');}
if(number > 99){$this.parents('div.grid3wrapper, div.list3wrapper, #pp-wrap').addClass('over99');}
if(number < 99){$this.parents('div.grid3wrapper, div.list3wrapper, #pp-wrap').addClass('under99').removeClass('freeshipping');}
});
Thank you.

A good idea would be to use html attribute for the real price.
something like
<span realP=12>16</span>
and then getting the number would be easier:
var number = $(this).attr("realP");
goog luck

Make option in a multiply select box extend options available

I have 4 tabels in phpmyadmin with the menu there is showed on main page, 1 for MENU, 1 for UNDERMENU, 1 for UNDERMENU2 and 1 for UNDERMENU3. The text from UNDERMENU2 is connected to the MENU id where it belong.
Take this as an example: MENU1 id=1, MENU2 id=2, in tabel MENU. UNDERMENU1 id=1 menu_id=2, UNDERMENU2 id=2 menu_id=1, for tabel UNDERMENU. UNDERMENU2_1 id=1 menu_id=1 undermenu_id=1, UNDERMENU2_2 id=2 menu_id=1 undermenu_id=2...... And so on. Hope you understand me.
Now what i want is that all the MENU's printed in my multiply select box with a + symbol to the left for the text, so the user can hit this + symbol to get all the UNDERMENU's printed below the MENU's + symbol ypu hitted and so on.
Illustration:
How can i do this ?

Javascript can't override that kind of default browser behavior. You'll need to build a "fake" select box and then you're free to do whatever you would like. Here is a good explanation and example of what's involved