Add HTML code inside of a JS var that contains an HTML element

Question

I need to add a list of task after to click one row in a html table I'm using knockout js. the problem is that I'm just adding de last task from my data in a row and I need to add a new TR inside my element "$taskSelected" for each task. Here is my code

  self.retrieveTask = function(data, event) {
                if (event.type=="click") {
                    var id = data.Id;
                    var $taskSelected = event.currentTarget.parentElement.nextElementSibling;
                    $.get("@Url.Action("Method", "Controller")", { id: id })
                        .done(function(data) {
                            $.each(data, function(key, value) {
                                var html = "<tr><td>" +
                                    "</td>" +
                                    "<td>" +
                                    "  <div >" +
                                    + value.Type +
                                    "</div> " +
                                    "</td>" +
                                    "<td>" +
                                    " <div >" +
                                    value.Id +
                                    "</div> " +
                                    "</td>" +
                                   "</tr>";
                                $taskSelected.innerHTML=html;

                            });

                        }).fail(function() {
                            alert("error");
                        });
                };

            }

the var $taskSelected contains another row "<tr> </tr>" basically Ii want to nested rows. Some advises please

You can't nest rows : "Permitted content: Zero or more <td> or <th> elements, or a mix of them". If you try to create a nested row, the opening tag of a "child" row will close the "parent" row, and create a new row. — Teemu
– Teemu, Commented Sep 1, 2016 at 15:41

hellojebus · Accepted Answer · 2016-09-01 17:20:49Z

1

Try this:

 self.retrieveTask = function(data, event) {
            if (event.type=="click") {
                var id = data.Id;
                var $taskSelected = event.currentTarget.parentElement.nextElementSibling;
                $.get("@Url.Action("Method", "Controller")", { id: id })
                    .done(function(data) {
                        var html = "";
                        $.each(data, function(key, value) {
                            html += "<tr><td>" +
                                "</td>" +
                                "<td>" +
                                "  <div >" +
                                + value.Type +
                                "</div> " +
                                "</td>" +
                                "<td>" +
                                " <div >" +
                                value.Id +
                                "</div> " +
                                "</td>" +
                               "</tr>";

                        });
                       $taskSelected.innerHTML=html;

                    }).fail(function() {
                        alert("error");
                    });
            };

        }

All I did was move var html outside of your each loop. This makes sure that all your previous HTML stays inside the variable, otherwise you are overwriting html each time you run through the loop (This is why you're only outputting the last one ;) ).

answered Sep 1, 2016 at 17:20

hellojebus

3,6731 gold badge23 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

UserEsp Over a year ago

Thanks for your answer indeed it was wrong with the scope, by the way my worst error here was the structure of my table as Teemu says. I fix it changed the structure of my table and add after the current row with $(html).insertAfter($taskSelected). Thanks again.

Collectives™ on Stack Overflow

Add HTML code inside of a JS var that contains an HTML element

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related