After .load() Reset Textbox with User Entered Value using JavaScript and jQuery

Question

My function below calls a partial view after a user enters a filter-by string into the text box '#DocId' . When the user is done typing, the partial view is displayed with filtered data. Since my textbox needs to be in the partial view, when user is done entering a filter-by string and is shown the filtered data, the textbox is reset and the user entered data is lost. How can I set the value of the textbox back to the user entered string after the partial view is displayed?

I'm pretty sure I need to use .val() but I can't seem to get this to work.

$(function() {
    $('#DocId').live('keyup', function() {
        clearTimeout($.data(this, 'timer'));
        var val = $(this).val();
        var wait = setTimeout(function() { $('#tableContent').load('/CurReport/TableResults', { filter: val }, 500) }, 500);
        $(this).data('timer', wait);
    });
});

Thank you,

Aaron

Answer 1

You can store the ID, then call that selector and set the value back, like this:

$(function() {
    $('#DocId').live('keyup', function() {
        clearTimeout($.data(this, 'timer'));
        var val = $(this).val(), id = this.id;
        var wait = setTimeout(function() {
          $('#tableContent').load('/CurReport/TableResults', { filter: val });
          $("#" + id).val(val);
        }, 500);
        $(this).data('timer', wait);
    });
});

Alternatively, since you're passing the filter to the server, have the server populate this when rendering the partial view, this may be a much more straight-forward approach.