Javascript - Input not Keeping Values?

Question

I have table in a razor-generated View. A search box allows users to perform (you guessed it) a search operation by POSTing an AJAX request to a specified controller. The returned result is a PartialView (containing the new table + a pager) and I replace the existing table+pager with it.

There is also a button to add rows (with two input fields + a save button) to the table. I want to "persist" those rows locally before the search is performed and then append them back to the table once I get the results from the AJAX request.

In my script you can see that I find all the "unsaved" rows (class .new-element-row) and add them to an array before sending the search request. Then, after replacing the existing table with the new one, I append them again to the table:

newElements = new Array(); // unsaved rows

$(document).ready(function () {

        $('#searchbox').keyup(function () {

            var keyWords = $("#searchbox").val();

            ////////////////////////////////////////////////
            // Persist the non-saved rows///////////////////
            $("tr.new-element-row").each(function () {
                $this = $(this);
                var elem = $this[0];
                newElements.push(elem);
            });
            ////////////////////////////////////////////////

            // Send the search request
            $.ajax({
                url: '@(Url.Action("ActionName", "ControllerName"))',
                data: 'searchString=' + keyWords,
                cache: false,
                success: function (html) {

                    // Replace table with the one from the search results
                    $("#tableContainer").html(html);

                    ////////////////////////////////////////////////
                    // Re-append the unsaved rows to the new table//
                    newElements.forEach(function (entry) {
                        $("#table").append(entry.outerHTML);
                    });
                    ////////////////////////////////////////////////

                    // Clear...
                    newElements = new Array();
                    (...)
                }
            });

        });
});

It almost works well (i.e. rows are saved and appended again), if it wasn't for the fact that the input fields of the re-appended rows don't keep the text that I had inputted.

What am I doing wrong? I'm probably missing something obvious, but I can't find out what it is.

user1987392 · Accepted Answer · 2014-03-19 11:17:51Z

1

The problem is that you are pushing back not the element itself, but its HTML. If you enter something into the text input, its HTML code does not change, although the DOM object sure does.

Not sure why you are using outerHTML here, but it seems that the simpliest fix is to remove it and just append the elements:

newElements.forEach(function (entry) {
    $("#table").append(entry);
});

edited Mar 19, 2014 at 11:17

user1987392

4,0194 gold badges39 silver badges63 bronze badges

answered Mar 19, 2014 at 11:11

Andrei

56.8k10 gold badges92 silver badges114 bronze badges

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

1 Comment

user1987392 Over a year ago

Yup, that's it, I knew it had to be something simple. I had outerHTML because previously I was (incorrectly) trying to append directly to the $("#tableBody") and it would only work that way. Will mark as accepted after the minimum 5 min interval, thanks!

Collectives™ on Stack Overflow

Javascript - Input not Keeping Values?

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