Uploaded image for project: 'Confluence Data Center'
  1. Confluence Data Center
  2. CONFSERVER-33227

JavaScript Components' "data-target" attribute is not working correctly

    XMLWordPrintable

Details

    Description

      The method bind from the file autocomplete-content.js is not setting correctly the values in the given field as the specification says.

      https://developer.atlassian.com/display/CONFDEV/JavaScript+Components

      • data-template: a template used to populate the value for the input
      • data-target: a target element selector to update its value with the value provided by data-template.
        This is typically useful when you want to display the user's full name in the input field but submit the username
        to the server, so another input element needs to be updated.
      <div class="field-group">
        <label for="autocompleteField">Autocomplete Field</label>
        <input class="text autocomplete-space" id="autocompleteField" name="autocompleteField" data-max="10" data-none-message="No results" data-template="{key}" data-target="#deptSpace">
      		                    
        <label for="deptSpace">Target</label>
        <input type="hidden" class="text" id="deptSpace" name="deptSpace">
      </div>
      

      What is happening if you run the code is that as soon as you click on the desired value you want the original field will get the data-template (in this case

      {key}

      ) value and the target field will get the default value

      {name}

      .

      This all happens as I said inside the bind function:

      var bind = function(input, contentTypes, valueTemplate, displayHandler) {
      
              var $input = $(input),
                  boundKey = "data-autocomplete-content-bound";
      
              if ($input.attr(boundKey))
                  return;
      
              if (typeof contentTypes == "string")
                  contentTypes = [contentTypes];
      
              $input.attr(boundKey, "true").attr("autocomplete", "off");
              var typesString = contentTypes.join(","),
                  maxResults = $input.attr("data-max") || 10,
                  alignment = $input.attr("data-alignment") || "left",
                  spaceKey = $input.attr("data-spacekey"),
                  noResults = $input.attr("data-none-message"),
                  searchLinkMessage = $input.attr("data-search-link-message"),
                  template = $input.attr("data-template") || valueTemplate,
                  targetSelector = $input.attr("data-target"),
                  dropDownTarget = $input.attr("data-dropdown-target"),
                  dropDownPosition = null;
      
              if (dropDownTarget) {
                  dropDownPosition = $(dropDownTarget);
              }
              else {
                  dropDownPosition = $("<div></div>");
                  $input.after(dropDownPosition);
              }
              dropDownPosition.addClass("aui-dd-parent autocomplete");
      
              $input.focus(function () {
                  // Some places like the Link Browser allow a select element to change the space.
                  // The autocomplete should re-cache the spaceKey on focus.
                  spaceKey = $input.attr("data-spacekey");
              });
      
              $input.quicksearch(AJS.REST.getBaseUrl() + "search/name.json", null, {
                  onShow: function() {
                      $input.trigger("open.autocomplete-content", { contentTypes: contentTypes});
                  },
                  makeParams : function(val) {
                      var params = {
                          "max-results": maxResults,
                          pageSize: maxResults,
                          type: typesString,
                          query: val
                      };
                      if (spaceKey) {
                          params.spaceKey = spaceKey;
                      }
                      return params;
                  },
                  dropdownPlacement: function(dd) {
                      dropDownPosition.append(dd);
                  },
                  makeRestMatrixFromData : makeRestMatrixFromData,
                  addDropdownData : function (matrix) {
                      if (!matrix.length) {
                          if (noResults) {
                              matrix.push([{
                                  name: noResults,
                                  className: "no-results",
                                  href: "#"
                              }]);
                          }
                      }
                      if (searchLinkMessage) {
                          var value = AJS.escapeHtml($input.val());
                          var searchPrompt = AJS.format(searchLinkMessage, value);
                          matrix.push([{
                              className: "search-for",
                              name: searchPrompt,
                              href: "#"
                          }]);
                      }
                      return matrix;
                  },
                  ajsDropDownOptions : {
                      alignment: alignment,
                      displayHandler: displayHandler,
                      selectionHandler: function (e, selection) {
                          AJS.debug("autocomplete-content: ajsDropDownOptions.selectionHandler");
                          if (selection.find(".search-for").length) {
                              $input.trigger("selected.autocomplete-content", { contentTypes: contentTypes, searchFor: $input.val() });
                              return;
                          }
                          if (selection.find(".no-results").length) {
                              AJS.log("no results selected");
                              this.hide();
                              e.preventDefault();
                              return;
                          }
      
                          var contentProps = selection.data("properties");
      
      // HERE!!!!!!
                          $input.val(AJS.template(template).fillHtml(contentProps.restObj));
      
                          if (targetSelector) {
                              var value = AJS.template(valueTemplate).fillHtml(contentProps.restObj);
                              $(targetSelector).val(value);
                          }
      
      // UNTIL HERE
      
                          $input.trigger("selected.autocomplete-content", { contentTypes: contentTypes, content: contentProps.restObj, selection: selection });
                          this.hide();
                          e.preventDefault();
                      }
                 }
              });
          };
      

      Workaround/Fix

      Use the following code instead

      if (targetSelector) {
                          	$input.val(AJS.template(valueTemplate).fillHtml(contentProps.restObj));
                              var value = AJS.template(template).fillHtml(contentProps.restObj);
                              $(targetSelector).val(value);
                          } else {
                          	$input.val(AJS.template(template).fillHtml(contentProps.restObj));    	
                          }
      

      Attachments

        Activity

          People

            Unassigned Unassigned
            a0d74c6231e9 Pablo Culebras
            Votes:
            3 Vote for this issue
            Watchers:
            4 Start watching this issue

            Dates

              Created:
              Updated:
              Resolved: