5

So, I have following code in my Tridion Extension for ComponentView window:

$evt.addEventHandler(view.properties.controls.fieldBuilder, "load", function () {
  var field = this.getField("keyword_field");
  console.log(field.getElement().innerHTML);
});

and console shows something like that:

<div>
  <div class="keywordselect">
    <div class="content"></div>
    <div class="buttons" style="visibility: hidden;">
      <div class="button add" id="buttonAdd" title="Add" style="-webkit-user-select: none;">
        <span class="text">&nbsp;</span>
      </div>
    </div>
  </div>
</div>

so I can't see select content which load later:

<div>
  <div>
    <div class="keywordselect">
      <div class="content">
        <select size="5" multiple="true">
          <option value="value">value</option>
        </select>
      </div>
      <div class="buttons" style="visibility: hidden;">
        <div class="button add" id="buttonAdd" title="Add" style="-webkit-user-select: none; visibility: visible;">
          <span class="text">&nbsp;</span>
        </div>
      </div>
    </div>
  </div>
</div>

The question is: how I can hook to this event when select load itself? I've tried $evt.addEventHandler(field, "load", func) and $evt.addEventHandler(field.getInputControl(), "load", func), but without any luck unfortunately.

4

The thing is that Field builder has its field, and in this case “load” event means that field builder is loaded, with the fields, but fields are not loaded by itself.

In case of Keyword field, it uses XSLT transformation to render field view.

Unfortunately Keyword select control does not fire any events which might help in this case. Thus I would suggest to extend _onItemDraw method from \WebUI\Editors\CME\Controls\KeywordSelect\KeywordSelectControl.js

Eric gave a good reply on how it can be possibly done in a similar post: https://tridion.stackexchange.com/a/1856/206

The extended code will look like:

(function ()
{
    var overridenKeywordSelectControl$_onItemDraw = Tridion.Controls.KeywordSelectControl.prototype._onItemDraw;
    Tridion.Controls.KeywordSelectControl.prototype._onItemDraw = function KeywordSelectControl$_onItemDraw()
    {
        // Call original method
        overridenKeywordSelectControl$_onItemDraw.apply(this);


        // Do an action you need
        var element = this.properties.container;
        console.log(element.innerHTML);

        // Or fire event which you can handle elsewhere
        this.fireEvent("extension_oncontroldrawn");
    };
})();
| improve this answer | |
  • I've implemented a bit workaround: var checkInputCtrlLoad = function() { if(!field.getInputControl().properties.isDrawn) { console.log("Field is not loaded yet."); setTimeout(checkInputCtrlLoad, 50); } else{ console.log("Field is loaded already."); } }; setTimeout(checkInputCtrlLoad, 50); But your solution is more elegant for sure. Thanks – Vitaliy Nov 29 '13 at 11:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.