jQuery .val () does not return the updated value for textarea

advertisements

I have a popup dialog that is intended to allow users to paste data from an Excel sheet in to be parsed by a server-side script. (Long story.) However, I discovered today while working on a completely different issue that if you try to use it multiple times without refreshing the page, jQuery will just keep on submitting whatever was in the textbox the first time you submitted it.

Here's a fiddle showing the problem: http://jsfiddle.net/prjg4u6w/3/

Run it, click the "Upload" button, and type "foo". Then hit the "Upload" button again and type "bar". The result is just concatenating whatever text you type in, so obviously it should say "foo bar", but it comes out as "foo foo". Happens on both Chrome 37 and Firefox 32.

I suspect it might be something about the way I'm creating the dialog box:

$("#tabs").on('click', '#uploadTSV', function () {
    var opts = {
        title: 'Upload TSV',
        appendTo: '#tabs',
        width: 500,
        datatype: 'html',
        buttons: [{
            text: 'Hold on to Your Butts',
            click: function () {
                uploadTSV();
                $(this).dialog("close");
            }
        }, {
            text: 'Cancel',
            click: function () {
                $(this).dialog("close");
            }
        }]
    };
    var dia = $("<div></div>");
    var txt = '<p>Paste file here</p><textarea id="uploadTSVText" style="width: 100%; height: 50px;"></textarea>';
    dia.html(txt).dialog({
        title: opts.title,
        appendTo: opts.appendTo,
        width: opts.width,
        buttons: opts.buttons
    });
});

But I can't see why that should make a difference, and am hesitant to muck about with it when I don't understand the problem.


You are creating a new identical dialog every time #uploadTSV is clicked. Your uploadTSV() function is selecting the value from the first instance of $('#uploadTSVText'), which is always going to be the first one you opened.

You can create an instance of the modal and re-use it if you configure it properly. In this example I just set autoOpen to false and created a close function to clear out your textbox every time the dialog is closed.

see it working here: http://jsfiddle.net/prjg4u6w/9/

    // Paste in a TSV file for processing on the server
    function uploadTSV() {
        var data = $("#uploadTSVText").val();
        console.log(data);
        $("#result").html($("#result").html() + " " + data)
    }
     var opts = {
            title: 'Upload TSV',
            appendTo: '#tabs',
            width: 500,
            datatype: 'html',

            buttons: [{
                text: 'Hold on to Your Butts',
                click: function () {
                    uploadTSV();
                    $(this).dialog("close");
                }
            }, {
                text: 'Cancel',
                click: function () {
                    $(this).dialog("close");
                }
            }]
        };
        var dia = $("<div></div>");
        var txt = '<p>Paste file here</p><textarea id="uploadTSVText" style="width: 100%; height: 50px;"></textarea>';
        var mydialog = dia.html(txt).dialog({
            title: opts.title,
            appendTo: opts.appendTo,
            autoOpen:false,
            close: function(){$("#uploadTSVText").val('')},
            width: opts.width,
            buttons: opts.buttons
        });

    // Dialog box
    $("#tabs").on('click', '#uploadTSV', function () {
        mydialog.dialog('open');
    });