Add current pages id as label to all sub pages via jQuery in user macro

[onkeldom]

Hey community,

I'm trying to write a user macro, which adds the id of the current page to all sub pages via jQuery.

The current code looks like this:

#set($label="$content.id")

<script>
 AJS.toInit(function() {
 AJS.$('#updatetm').click(
 function() { 
 #foreach ( $child in $content.getChildren() )
 jQuery.post(contextPath + "/json/addlabelactivity.action", 
 {"entityIdString": "$child.id", "labelString": "$label", "atl_token": jQuery("#atlassian-token").attr("content") }, 
 function() { console.log("$child.id updated!"); });
 #end
 });
 });
</script>

The code itself gets called by clicking an aui-button: 

<button class="aui-button aui-button-primary" id="updatetm">Update Pages</button>

My problem at the moment is, that the content within the foreach loop changes during the execution.. it even changes outside the script section (rendering the $label variable useless).

I've ran a test with 5 cascaded sub pages:

Test (main page - ID: 25166773)
|__Test FP (ID: 25166775)
|  |__Test SP (ID: 25166778)
|
|__Test FP2 (ID: 25166782)
|  |__Test SP2 (ID: 25166784)
|
|__Test SP3 (ID: 25166780)

The test (and the logs on the console) shows that - reaching the second level in hierarchy - the content switches from the initial parent page to the "current" parents:

Current child: 25166775
Label: 25166773
Content ID: 25166773
Current child: 25166780
Label: 25166773
Content ID: 25166773
Current child: 25166782
Label: 25166773
Content ID: 25166773
Current child: 25166778
Label: 25166775
Content ID: 25166775
Current child: 25166784
Label: 25166782
Content ID: 25166782

Any ideas why this is happening and how to prevent it? Is my jQuery wrong? Every idea and/or help is appreciated.

Cheers,

Dom

[Davin Studer]

I would avoid putting the velocity foreach inside your javascript. I think maybe a better way would be to use your velocity foreach to create a JavaScript array. Then you can just write normal JavaScript. Also, I've found that wrapping my JavaScript in a CDATA block inside a user macro works better.

<script type="text/javascript">
//<![CDATA[
    Your script here.
//]]>
</script>

[Melissa C]

Davin,  

Can you shed some insight on my question? 

Melissa

[onkeldom]

Hi David,

still struggeling with this. I'm trying to add the sub pages id to a JS array, but there are still some issues:

 var children = [];
 var contentid = $content.id;
 #foreach ( $child in $content.getChildren() )
 children.push($child.id);
 #end
 console.log("Array length: " + children.length);
 console.log("Current child: " + children[i]);
 console.log("Label: $label");
 console.log("Content ID: " + contentid);

Strange thing here... there is no loop around the log commands, but still there are 3 outputs:

Array length: 3
Current child: 25166775
Label: 25166773
Content ID: 25166773
Array length: 1
Current child: 25166778
Label: 25166775
Content ID: 25166775
Array length: 1
Current child: 25166784
Label: 25166782
Content ID: 25166782

I really don't get it here. Why is the JS code called 3 times?!

[Melissa C]

Hi Dom, 

I'm also looking for a related solution.  In my case I have a User Macro that contains a field that my users have to add a DocumentNumber. I would like to add this DocumentNumber as the a Label from the Macro. 

Another user posted some code (see link below). Their code adds a submit button, there a user can enter a value and click on a button to add it to the page.  I was looking to have this update in the Macro but can't seem to figure this out. 

Any ideas ?

Melissa

Question: 49491 - How do add labels to current page

[Davin Studer]

What do you mean by " I was looking to have this update in the Macro but can't seem to figure this out. "

[onkeldom]

Hi Melissa,

I also stumbled over this code and used it initially - worked like a charm.

## @noparams
<script>
var addLabel = function(label) {
 jQuery.post(contextPath + "/json/addlabelactivity.action", {"entityIdString": "$content.id", "labelString": label, "atl_token": jQuery("#atlassian-token").attr("content") }, function() {
 jQuery("#label-to-add").val("");
 });
}
</script>
<form class="aui" onsubmit="return false;">
 <input id="label-to-add" class="text">
 <button class="aui-button aui-button-subtle" onclick="addLabel(jQuery('#label-to-add').val());">
 <span class="aui-icon aui-icon-small aui-iconfont-add">Add </span>
 </button>
</form>