In AEM 6.1, with a structure like this:
- Page
- form node
- parsys
- node 1
- node 2
- ...
- node n
The original form has the following code which works
<div data-sly-resource="${ 'parsys' # resourceType='foundation/components/parsys' }" data-sly-unwrap>
I'm trying to update the form component that injects something before the last node n. On the form node, I have the following code:
<div data-sly-list.children="${resource.listChildren}">
<div data-sly-list.fields="${children.listChildren}">
<div data-sly-test=${fieldsList.last}> DO SOMETHING BEFORE LAST NODE</div>
<div data-sly-resource="${fields}"></div>
</div>
</div>
The data-sly-resource seems to cause the server to hang, with very high cpu usage while the browser is waiting for response. I have to terminate the server process and restart it.
I have tried <div data-sly-resource="${fields # resourceType = fields.resourceType}"></div> but it doesn't seem to render the fields as expected.
Is this the right way of iterating through nodes?
Update: Looked in the massive error.log file, and it seems the CPU spike was caused by infinite loop of RecursionTooDeepException - which I don't see where the recursion is.
According to the Sightly documentation on the Resource block statement, you need to pass in a path to the resource, either relative or absolute. I was able to make your code work by changing <div data-sly-resource="${fields}"></div> to <div data-sly-resource="${fields.path}"></div>.
<div data-sly-list.children="${resource.listChildren}">
<div data-sly-list.fields="${children.listChildren}">
<div data-sly-test=${fieldsList.last}> DO SOMETHING BEFORE LAST NODE</div>
<div data-sly-resource="${fields.path}"></div>
</div>
</div>
If you haven't already downloaded the Sightly REPL, I would highly suggest it to test and debug scenarios such as this one.
I would create a Sling Model and return the data from child nodes as a list from it.
See this link for reference https://sling.apache.org/documentation/bundles/models.html#collections
Related
When testing with Vitest/Jest:
I'm wrapping my JSX with the Vuetify <v-dialog> component,
<v-dialog>
<div id="test">
Hello world!!
</div>
</v-dialog>
which seemingly teleports the node's content outside of the virtual-DOMs "reach", so when we try to console.log the wrapper.html() (the mounted custom component), instead of it console logging the DOM structure, it returns this:
<!---->
<!--teleport start-->
<!--teleport end-->
<!---->
This is not very helpful when trying to test the component.
Is it possible to get and mount segments of the virtual-DOM only? I mean I only wish to mount this node:
<div id="test">
Hello world!!
</div>
I've recently begun as an Ops dev on an AEM project, and we have a component (a table, that has a title, some copy and a field where the author can author some HTML to represent the contents of a table, with and elements. This, for whatever reason, has to sit within a component, called ArticleContainer. The title should have an H1 tag if the table is at the top of the page, and an H2 tag if it's anywhere lower down. I've tried using data-sly-test thus:
<sly data-sly-test.topOfPage="${table.firstPosition==true}">
<h1 data-sly-test="${table.headerCopy}" class="heading fontH2 headingLinear headingThick">
<span class="tableHeadingWrapper">${table.headerCopy # context='html'}</span>
</h1>
</sly>
<sly data-sly-test="${!topOfPage}">
<h2 data-sly-test="${table.headerCopy}" class="heading fontH2 headingLinear headingThick">
<span class="tableHeadingWrapper">${table.headerCopy # context='html'}</span>
</h2>
</sly>
Now, this kind of processing has worked elsewhere where the component doesn't sit within a container, but it seems that if it's in a container it always picks up the non-topOfPage condition. I assume there might be a way to maybe do the test within the container component & pass it down into the table component? How would one go about this, or if it's not possible, is there another method by which one might achieve this?
There are two things here:
What does table.firstPosition return? You should be able to debug this in your Sling Model or POJO and probably need to adjust the logic to account for intermediary containers.
HTL/Sightly has a data-sly-element that allows you to change the HTML element based on an expression, you could make your code shorter (and easier to maintain):
<h1 data-sly-test="${table.headerCopy}" data-sly-element="${table.firstPosition ? 'h1' : 'h2'}" class="heading fontH2 headingLinear headingThick">
<span class="tableHeadingWrapper">${table.headerCopy # context='html'}</span>
</h1>
Thanks for the help. I'm trying to use a jQuery selector to watch for a click on a group of elements, that start with particular characters. I have come up with the following code, but I must be missing something. If I hard code the ID (ie. $("#test_1")...), the code works:
<body>
<div id="content">
<div id="parentcontainer">
<div id="test_1"></div>
</div>
</div>
</body>
<script>
$(window).load(function(){
$("#statusbar").text("Ready");
$("#parentcontainer").click(function(){alert("parent clicked");});
$("#btnaddelement").click(function(){alert("Add Button Clicked");});
$("[name^='test_']").click(function(e){e.stopPropagation();
alert("Child Clicked");});
});
</script>
You are selecting on $("[name^='test_']") which will give you elements who have a name attribute that start with test_. You need to select on $("[id^='test_']") for elements with an id that start with test_. That is one example of what you are getting with your hard-coded success of $('#test_1') -- an element whose id attribute is test_1.
Also, be aware if you are not already that xpath is the language used for selectors, so you can do all kinds of incredible selection if you become familiar with it.
Yes, you missed something. Change the div's attribute id to name will work
<div name="test_1"></div>
Actually, class was used more frequently.
And there are an opinion I want to improve the code.
Try to use the jquery's $(document).ready instead of DOM's load. Because load will wait for all the sources to be loaded compeletely before the js code can be executed, for example, all the photos are downloading ok.
I hope this help!
I have a repeating component in wicked which needs to be added and deleted as per the user requirement. The maximum number of component is predefined. So I am adding the components at start up and hiding and showing based on need. I am required to change the arrangement of the components in the HTML markup when there is any deletion of the component. I use JavaScript for this. I want to know if wicket would lose hold of the components if I do this.
<div wicket:id="borrowerTabs" id="borrowerTabs">
<span wicket:id="borrowerTab1" id="borrowerTab1" ></span>
<span wicket:id="borrowerTab2" id="borrowerTab2" ></span>
<span wicket:id="borrowerTab3" id="borrowerTab3" ></span>
<span wicket:id="borrowerTab4" id="borrowerTab4" ></span>
<button wicket:id="addBorrower" id="addBorrower" type="button"></button>
<button wicket:id="deleteBorrower" id="deleteBorrower" onclick="updateUIForDeleteBorrower()" type="button"></button>
</div>
If delete the borrowerTab3, contents inside borrowerTab4 will be replacing the contents inside borrowerTab3 and the model objects too will be swapped though I do not do a target.add(borrowerTab3). Now while form submission, I am not getting the values of the fields inside borrowerTab3.
I'm not sure if it helps but try component.setVisible(false) in your java code to hide it.
I've got a page where messages and associated elements (responses, forwards, etc) all share a class based on the database id of the parent.
For example
<pre>
<div id="recentMessages">
<div id="a3" class="message a3">this is a message</div>
<div id="a5" class="message a5">this is another message</div>
</div>
<div id="recentComments">
<div id="a3" class="comment a3">this is a comment</div>
<div id="a5" class="comment a5">this is another comment</div>
</div>
<div id="recentActions">
<div id="a3" class="action a3">tim posted a new message</div>
<div id="a4" class="action a4">sara forwarded a message to john</div>
</div>
</pre>
at times I need to remove all elements with the same id, so I originally had
jQuery('div#'+id).remove();
but that would sometimes not remove all the ids because ids are supposed to be unique.
So I added the id as a class. now I use
jQuery('div.'+id).remove();
but this seems to be about 80% effective, and sometimes the divs aren't being removed.
I'm not sure if the issue is because the div has more than one class, but I need the classes because that is how I refer to the elements when somebody clicks.
For instance,
jQuery('div.message').click(function(){
get the id, send it to the server and get the message
});
is there something wrong I'm doing here? or is there a better way to do this?
Looks like this was an issue where a function was being called using a variable which had already been defined. I didn't realize this would cause a problem.
For instance:
jQuery('div','div#recentActions').click(function(){
var removeId=jQuery(this).attr('id').replace('','a');
removeDiv(removeId);
});
function removeDiv(removeId){
jQuery('div#a'+removeId).remove();
}
I can't say for sure this was the issue, but changing the function to:
function removeDiv(cancelId){
jQuery('div#a'+canceld).remove();
}
seems to be working.