How can I remove a label from a page using the javascript?

Matt Albone January 16, 2013

I have two radio buttons in order to label each page as either 'Internal' or 'External' as a page is created/edited. These labels will alter be used to filter searches

I've found I'm able to add an appropriate label from the radio button selection using the following:

var dialogLabelList = $("#dialog-label-list");
AJS.Labels.addLabel($('input:radio[name=intOrExt]:checked').val(), dialogLabelList.attr("entityid"), dialogLabelList.attr("entitytype"));

Where the radio buttons are:

<div id="label-int-or-ext">
                    <input type="radio" id="intOrExt" name="intOrExt" value="page-int">Internal<br>
		    <input type="radio" id="intOrExt" name="intOrExt" value="page-ext">External<br> 
                </div>

Each time a page is edited, i need to be able to remove the old 'page-int' or 'page-ext' label, and replace it with whatever has been selected that time. I've found the code that removes the labels in the normal way and tried to use that here, but it won't seem to work:

AJS.Labels.removeLabel($('input:radio[name=intOrExt]')[1].val(), dialogLabelList.attr("entityid"), dialogLabelList.attr("entitytype"));

and

AJS.Labels.removeLabel("page-int", dialogLabelList.attr("entityid"), dialogLabelList.attr("entitytype"));

Anyone know the correct way to go about this?

Thanks in advance

Matt

6 answers

1 accepted

Comments for this post are closed

Community moderators have prevented the ability to post new answers.

Post a new question

1 vote
Answer accepted
Scott Selberg
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
February 9, 2015

This seems to be working with Confluence 5.7.  I wanted a drop down button which would force one and only one label from a set to be include.  (I want to track page state.)

AJS.toInit(function(){
   AJS.$("#page-state-note").click( function(e){
      e.preventDefault();
      setPageStateLabel( "note" );
   });
   AJS.$("#page-state-draft").click( function(e){
      e.preventDefault();
      setPageStateLabel( "draft" );
   });
   AJS.$("#page-state-reviewed").click( function(e){
      e.preventDefault();
      setPageStateLabel( "reviewed" );
   });
   AJS.$("#page-state-finalized").click( function(e){
      e.preventDefault();
      setPageStateLabel( "finalized" );
   });
   AJS.$("#page-state-has-errors").click( function(e){
      e.preventDefault();
      setPageStateLabel( "has-errors" );
   });
   AJS.$("#page-state-incomplete").click( function(e){
      e.preventDefault();
      setPageStateLabel( "deprecated" );
   });
})
function setPageStateLabel( labelToSet )
{
   var labels = $(".aui-label-split-main");
   var states = ["draft", "note", "reviewed", "finalized", "has-errors", "incomplete", "deprecated"];
   var niceNames = {};
   niceNames["note"]       = "Note";
   niceNames["draft"]      = "Draft";
   niceNames["reviewed"]   = "Reviewed";
   niceNames["finalized"]  = "Finalized";
   niceNames["has-errors"] = "Has Errors";
   niceNames["incomplete"] = "Incomplete";
   niceNames["deprecated"] = "Deprecated";
   for( var i = 0; i < states.length; i++ ){
      if( states[i] == labelToSet ){
         AJS.Labels.addLabel( states[i], AJS.params.pageId, AJS.params.contentType);
         $("#page-state-button").html( niceNames[states[i]] );
      } else {
         for(var j = 0; j < labels.length; j++ ){
            if( states[i] == $(labels[j]).html() ){
               AJS.Labels.removeLabel( $(labels[j]).closest("li") , AJS.params.pageId, AJS.params.contentType);
            }
         }
      }
   }
}

 

 

Chris_Stewart August 28, 2017

This is exactly what I've been looking for but I'm having trouble getting the html (user interface) to work. Does anyone have any suggestions to help? I'm fairly new to JavaScript. So, I'm not sure that I'm using the correct triggers. Any suggestions are greatly appreciated.

2 votes
JamieA
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
January 16, 2013

I've only ever been able to do this with these "frothers" by removing and re-adding the whole element after changing the value. There presumably is a refresh method but I haven't found (not looked in the last year or so though).

Example:

if (field.parent().hasClass("frother-control-renderer")) {
	console.log("set value to : " + setValue);
	// add/remove your labels here
	field.val(setValue);
	field.parent().find(".multi-select").remove();

	// modify aui-field-versionspicker to whatever the labels picker class is
	if (field.closest(".frother-control-renderer").hasClass("aui-field-versionspicker")) {
		new AJS.MultiSelect({
			element:field,
			itemAttrDisplayed:"label",
			errorMessage:AJS.params.multiselectVersionsError // find the right param here
		});
	}
}

IshanL
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
July 18, 2016
AJS.$("$fieldId").trigger('clearSelection');

 

 

or

 

AJS.$("$fieldId").trigger('removeOption', descriptor);

 

 

1 vote
Scott Oliver October 19, 2015

What I've found was needed when a page is in create mode (not edit), use

AJS.Labels.addLabel(label_str, AJS.Meta.get("draft-id"), AJS.Meta.get("content-type"));

 

0 votes
IshanL
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
July 18, 2016
AJS.$("$fieldId").trigger('clearSelection');

 

 

or

 

AJS.$("$fieldId").trigger('removeOption', descriptor);

 

 

0 votes
chintu Parameshwar May 6, 2015

It solved by 

if (field.parent().hasClass("frother-control-renderer")) {
    console.log("set value to : " + setValue);
    // add/remove your labels here
    field.val(setValue);
  //  field.parent().find(".multi-select").remove(); --REMOVED
 
    // modify aui-field-versionspicker to whatever the labels picker class is
    if (field.closest(".frother-control-renderer").hasClass("aui-field-versionspicker")) {
        new AJS.MultiSelect({
            element:field,
            itemAttrDisplayed:"label",
            errorMessage:AJS.params.multiselectVersionsError // find the right param here
        });
    }
field.prev().prev().remove(); //--ADDED
}
0 votes
chintu Parameshwar May 5, 2015

Hi Jamie,

Your snippet worked in JIRA 5.2, but not in 6.3. It is not removing existing multi-select(in my case components). And it's adding one more multi-select box. So with this code snippet we are seeing two boxes. Could you please suggest?

 

Thanks.

Comments for this post are closed

Community moderators have prevented the ability to post new answers.

Post a new question

TAGS
AUG Leaders

Atlassian Community Events