Discussions
Categories
- 196.7K All Categories
- 2.2K Data
- 235 Big Data Appliance
- 1.9K Data Science
- 449.9K Databases
- 221.6K General Database Discussions
- 3.8K Java and JavaScript in the Database
- 31 Multilingual Engine
- 549 MySQL Community Space
- 478 NoSQL Database
- 7.9K Oracle Database Express Edition (XE)
- 3K ORDS, SODA & JSON in the Database
- 532 SQLcl
- 4K SQL Developer Data Modeler
- 186.9K SQL & PL/SQL
- 21.3K SQL Developer
- 295.4K Development
- 17 Developer Projects
- 138 Programming Languages
- 292.1K Development Tools
- 104 DevOps
- 3.1K QA/Testing
- 645.9K Java
- 28 Java Learning Subscription
- 37K Database Connectivity
- 153 Java Community Process
- 105 Java 25
- 22.1K Java APIs
- 138.1K Java Development Tools
- 165.3K Java EE (Java Enterprise Edition)
- 17 Java Essentials
- 158 Java 8 Questions
- 85.9K Java Programming
- 79 Java Puzzle Ball
- 65.1K New To Java
- 1.7K Training / Learning / Certification
- 13.8K Java HotSpot Virtual Machine
- 94.2K Java SE
- 13.8K Java Security
- 203 Java User Groups
- 24 JavaScript - Nashorn
- Programs
- 398 LiveLabs
- 37 Workshops
- 10.2K Software
- 6.7K Berkeley DB Family
- 3.5K JHeadstart
- 5.6K Other Languages
- 2.3K Chinese
- 170 Deutsche Oracle Community
- 1.1K Español
- 1.9K Japanese
- 230 Portuguese
Composite component and jquery: oj-pending-subtree-hidden

Hi guys,
I'm trying to change a composite component style using jquery selectors.
Following is our code for the component:
<!-- ko foreach: leaderList --><div class="oj-flex oj-sm-flex-items-initial oj-sm-justify-content-center"> <div class="oj-flex oj-sm-flex-direction-column"><leaderboard-card data-bind="attr: { id: 'leaderboardCard-' + $index()}" position="[[position]]" name="[[name]]" profile-image="[[profileImage]]" target="[[target]]" actual="[[actual]]" is-me="[[isMe]]" style="" valign="middle"></leaderboard-card> </div></div><!-- /ko -->
As you can see we have several components (leaderboard-card) which are dependent on the observeableArray leaderlist
In our code, we are trying to change the style of one of these components by using a JQuery selector as follows:
$('#leaderboardCard-0')jQuery.fn.init [leaderboard-card#leaderboardCard-0.oj-pending-subtree-hidden] 0: leaderboard-card#leaderboardCard-0.oj-pending-subtree-hidden length: 1 __proto__: Object(0)
As you can see, the DOM element 'leaderboard-card' with id 'leaderboardCard-0' is returned by the JQuery selector but none of the children are available.
This code is executed right after the leaderlist observable array is updated.
We can see on the returned element from the JQuery selector that it contains a class 'oj-pending-subtree-hidden'.
This is preventing us from accessing any of the children of this element that we need to manipulate the style with css.
With checking the oj reference, we noticed there is an oj-complete class. These classes may indicate whether the element is rendering or already rendered.
Do you know if there is any way after an observable is updated of being notified so we can manipulate the elements before/after its rendered?
Is there an event notifying that an element has been passed from 'oj-pending-subtree-hidden' to 'oj-complete'?
Thanking you in advance
Answers
-
You should not be trying to manipulate the styling of the internals of a component from the outside. Please contact the help resources that you have available internally and we'll point you to the relevant guidelines on this.
-
Thanks for your response. Can you please point me in the direction of internal resources?
-
-
Yes - is this the correct forum for my question?
-
Hi Louise,
I have sent you an email that lists all of the "internal" resources that you can use as an Oracle employee.
Thanks,
--jb
-
As an Oracle employee, you should be using the internal resources available to you for asking these types of questions. Please move your question there.