Search code examples
htmldojocustom-data-attribute

Getting properties of dojo's dijit.InlineEditBox for ajax request


In essence I have the same problem as described in this question, but the accepted answer there is not fully working for me.

I want to have the id of the record I'm processing in an HTML-compliant data-myid attribute, then when the text in the text area is changed, I want call a function that will send an Ajax request containing the new value and data-myid to the server. This is important because there can be multiple inlineEditBoxes in a single page. The Ajax request part I'm fine with, is getting the proper values to send where I'm stuck.

So far, I know the end result of the HTML declaration will look something like this:

<span data-dojo-type="dijit.InlineEditBox"  data-dojo-props="editor:'dijit.form.Textarea'" data-myid="123" title="some title" id="test" >
<script type="dojo/connect" event="onChange" data-dojo-args="myid,value">
  console.log(myid + " changed to value " + value);
</script>1339598</span> 

But I have not been able to get this to work.


Solution

  • You can get the myId value through

    this.domNode.dataset.myid;
    

    ... in your onChange event.

    Example here : http://jsfiddle.net/psoares/ycEN7/

    A more portable solution is to use dojo/dom-attr instead though, like this :

    *HTML

    <div id="editBox" data-dojo-type="dijit/InlineEditBox"  
         data-dojo-props="editor:'dijit/form/Textarea'"
         data-myid="123" 
         title="some title">1339598</div>
    <div id="output"><div>`
    

    *Javascript :

    require(["dojo/dom",
         "dojo/dom-attr",
         "dojo/parser",
         "dojo/html",
         "dijit/registry",
         "dijit/InlineEditBox", 
         "dijit/form/Textarea",
        "dojo/domReady!"], 
    function(dom, domAttr, parser, html, registry){
        var editBox;
        parser.parse().then(function(instances){
            editBox = registry.byId("editBox");
            editBox.on("change", function(value){
               var myId = domAttr.get(this.domNode, "data-myid");
               html.set(dom.byId("output"), "Editor " + myId + "'s value changed to " + value); 
             });
        });
    });