domConstruct place button not firing

Question

I am creating table rows dynamically using dojo domConstruct. One of the column contains a button for delete function.But i dont know how to connect onclick event for the delete button. Below is my js code for creating the row.

domConstruct.place("<tr class='test'><td>" +
    " Account name"+ XXXX+" "+" Account number is is $" + data1 +
    "</td><td><input type ='button' onclick='deleteFunction(this);' value='remove' id=" +
    buttonId + "/></td></tr>","tradeInValue","");

So now how i connect it to

on(dom.byId("buttonId"),"click",function(){

// my code goes in here


});

I have no clue here. Basically i need to remove the row from a table on click of a button. I am using dojo in javascript file.

Updated.

o

n(dom.byId("submitButton"), "click", function(evt){

        var name=registry.byId("name").get('value');
        var detail = registry.byId("manufacturer").get('value');
        var id=registry.byId("model").get('value');
        var make=registry.byId("shaft").get('value');

            var xhrArgs={
                    url:"./name/getValue",
                    content:{name:name,detail:detail,id:id,make:make},
                    handleAs:"json",
                    load:function(data){

                        var data1=data/100;
                        var row=domConstruct.create("tr",null,"tradeInValue");
                        domConstruct.create("td",{innerHTML:" Name
"+ detail+" "+id+"  Value is $"+data1},row);
                        var actions=domConstruct.create("td",null,row);
                        var btn=domConstruct.create("input",{
                            id:idRow,
                            type:"button",
                            value:"Remove"
                        },actions);

                        btn.addEventListener("click", function(evt) {
                              console.log("Deleting");
                              console.log(evt.target.parentNode.parentNode.idRow);
                              domConstruct.destroy(evt.target.parentNode.parentNode);
                            });

                        var test={ 
                                "name" : name,
                                "detail"  : detail,
                                "id" :id,
                                "tradePrice" :data,
                                "make":make

                        };

                        tradeDetails.clubDetails.push(test);

                        }
                    }



            var deferred=dojo.xhrPost(xhrArgs);

        }
    });

On my research I found that I can use on(dom.byId("tableId"),'.child-selector:click',function(e){ console.log("imhere"); }); But my problem how can I link child selector to button inside the table? — sanvica, Oct 01 '15 at 21:54

g00glen00b · Accepted Answer · 2015-10-02T10:57:36.073

1

The easiest way is to create your DOM nodes individually, for example:

var row = domConstruct.create("tr", null, "myData");
domConstruct.create("td", { innerHTML: person.id }, row);
domConstruct.create("td", { innerHTML: person.name }, row);
var actions = domConstruct.create("td", null, row);
var btn = domConstruct.create("input", {
  type: "button",
  value: "Remove"
}, actions);

This allows you to easily attach event handlers to btn, while still preserving context and still having access to the data you're working with, for example:

btn.addEventListener("click", function() {
  console.log("Deleting", person);  
});

To delete the row itself you could use the Event.target property, which gives you access to the button node itself. If you use the Node.parentNode property, you can eventually access the row itself, and then you can remove it using dojo/dom-construct::destroy()

For example:

btn.addEventListener("click", function(evt) {
  domConstruct.destroy(evt.target.parentNode.parentNode);
});

A full example can be found on JSFiddle.

edited Oct 02 '15 at 10:57

answered Oct 02 '15 at 06:58

g00glen00b

41,995
13
95
133

Thanks a lot!! It worked. But I dont have predefined array of data. I create rows dynamically from the database. So now how do I get the rowid or row data when it is deleted. Once the row is created I add them to an array. So when it is deleted how do I delete from the array? – sanvica Oct 02 '15 at 13:59
Well, in the example on JSfiddle you can see that I still have access to the outer scopes and that I can access the object `person` that contains the ID. I suspect that you have to do something similar, but without the exact code I can't tell for sure. If you need the ID attribute of an element you can always use `Element.id`: https://developer.mozilla.org/en-US/docs/Web/API/Element/id – g00glen00b Oct 02 '15 at 14:05
I have my updated post with code in it. Basically, on click of a submit button, it fetches some value from database and creates a row and corresponding details are pushed to an array.When the row is deleted by clicking remove button the corresponding row details should be spliced from the array.how do it do it.I cannot loop through the table and find the data, as all the data I dont display to the user. – sanvica Oct 02 '15 at 15:00

domConstruct place button not firing

1 Answers1