Table Filter and User Macro not working properly. Filter shows code. Edited

[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.

[Andrey Khaneev _StiltSoft_]

Hi @Aurelio Haro,

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 to the whole Confluence or some specific spaces.
2. Replace the <select> element with some kind of dropdown element.

Also, I recommend you to try Handy Status macro from the Handy Macros app instead of custom macro - it works fine with the Table Filter and Charts app. Maybe you already have this one. Here is the demo site.