Table Filter and User Macro not working properly. Filter shows code.
Asked by Aurelio Haro:

Hi,

I have a User Macro that I found in the forum for a Dropdown Menu.

I have customized it to fit my current needs and it works perfectly.

Now I'm trying to display the dropdown in a Table using the Properties Properties macro.

The filter is showing part of the Java script behind the Macro, instead of the current state of the dropdown.

```
## @Param DropdownId:title=Unique dropdown ID|type=string|required=true|default=1|desc=If more than one dropdown in page, change this to a unique name.
## @Param Label:title=Label|type=string|desc=Enter dropdown label, if desired

#set ( $DateCreated = $action.dateFormatter.formatGivenString("hhmmssms", $content.getCreationDate()) )


#set ( $dropdownId = "" )
#set ( $dropdownId = "dropdown-" + $paramDropdownId + $DateCreated)
#set ( $label = "" )
#set ( $label = $paramLabel )
#set ( $toplabel = "" )
#if ( $label == "" )
#set ( $toplabel = "top-label" )
#end
#set ( $pageId = $content.id )
#set ( $options = $body.split("\n") )
<form class="aui $toplabel">
<div class="field-group">
#if ( $label != "" )
<label for="$dropdownId">$label</label>
#end
<select class="select" id="$dropdownId" name="$dropdownId">
#foreach ( $option in $options )
#set ( $option = $option.trim().replaceAll('"', '' ) )
<option value="$option">$option</option>
#end
</select>
</div>
</form>
<script>
AJS.toInit(function() {
var canEdit = true;

#if ( $permissionHelper.canEdit($userAccessor.getUserByName($req.remoteUser), $content) )
jQuery("#$dropdownId").change(function() {
var dropdownObject = this;
jQuery.ajax({
url: contextPath + "/rest/api/content/${pageId}/property/${dropdownId}",
success: function(dropdownData) {
dropdownData.value = jQuery(dropdownObject).val();
dropdownData.version.number += 1;
jQuery.ajax({
contentType: 'application/json',
type: 'PUT',
url: contextPath + "/rest/api/content/${pageId}/property/${dropdownId}",
data: JSON.stringify(dropdownData)
});
},
error: function(response) {
var dropdownData = {};
dropdownData.key = "$dropdownId";
dropdownData.value = jQuery(dropdownObject).val();
jQuery.ajax({
contentType: 'application/json',
type: 'POST',
url: contextPath + "/rest/api/content/${pageId}/property",
data: JSON.stringify(dropdownData)
});
}
});
});
#else
canEdit = true;
#end

jQuery.ajax({
url: contextPath + "/rest/api/content/${pageId}/property/${dropdownId}",
success: function(dropdownData) {
jQuery("#$dropdownId").val(dropdownData.value);
if (!canEdit) {
jQuery("#$dropdownId").prop( "disabled", true );
}
}
});
});
</script>


```

Do I have to edit anything on my code to prevent this from happening?

Thank you.


Answers:
author: Andrey Khaneev _StiltSoft_
body: Hi [@Aurelio Haro](/t5/user/viewprofilepage/user-id/4106808),

Yes, this is expected behavior: select option, as well as js code placed within a table cell, are returned as the text content of the cell, that's why you see it in filters.

It is possible to fix in your macro:

1. Remove the script from the user macro and load it separately to the page header. You can [add your script](https://confluence.atlassian.com/confkb/how-to-use-javascript-in-confluence-313458839.html) to the whole Confluence or some specific spaces.
2. Replace the \<select\> element with some kind of [dropdown](https://docs.atlassian.com/aui/8.4.0/docs/dropdown.html) element.

Also, I recommend you to try [Handy Status](https://docs.stiltsoft.com/display/HMFC/How+to+use+Handy+Status+macro) macro from the [Handy Macros](https://marketplace.atlassian.com/apps/1214971/handy-macros-for-confluence?hosting=server&tab=overview) app instead of custom macro - it works fine with the [Table Filter and Charts](https://marketplace.atlassian.com/apps/27447/table-filter-and-charts-for-confluence?hosting=server&tab=overview) app. Maybe you already have this one. Here is the [demo site](https://demo.stiltsoft.com/display/HM/Handy+Status?os_username=guest1&os_password=guest1).


Tags: confluence-server

page-property

server

user-macro