Add current pages id as label to all sub pages via jQuery in user macro
Asked by 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


Answers:
author: Davin Studer
body: 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>
```

comments: author: Melissa C
body: Davin,

Can you shed some insight on my question?

Melissa


author: onkeldom
body: 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?!


author: Melissa C
body: 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](https://community.atlassian.com/t5/Confluence-questions/How-to-add-labels-to-the-current-page-in-a-self-written-user/qaq-p/49491#M87480)

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


author: onkeldom
body: 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>
```


Tags: developer

jql

user-macro