Can't figure out why textarea won't stay editable

The following jQuery code works as expected (per comments in the code) and essentially what it does is

  1. detects which table row is clicked,
  2. iterates through the table's rows and determines if the row has an input in it,
  3. if it does, grabs and stores the values of the textboxes and textarea in that row
  4. removes the elements from the tds in that row
  5. and replaces the inputs with labels with the stored values
  6. then, on the clicked row, the values of the labels are stored and
  7. the labels are replaced with inputs populated with the stored values

Here's the relevant jQuery:

// Detect row clicked and switch that row's labels to populated textboxes for editing
$('#tblBranchCoverage').on('click', 'tr', function () {

// When the following is commented out, the inputs work
//  If this block of code isn't commented, none of the rows inputs are editable
// First set any other rows back to labels if they have textboxes
$(this).parent().children('tr').each(function () {
    if ($(this).find('input').length > 0) {
        // Row has textboxes
        var county = $(this).find('#txtEditCounty').val(),
            state = $(this).find('#txtEditState').val(),
            zips = $(this).find('#txtEditZips').val(),
            $td = $(this).find('td');

        // Clear the cells first
        $td.html('');

        // Put the populated labels back in
        $(this).find('.countyCovered').text(county);
        $(this).find('.stateCovered').text(state);
        $(this).find('.zipsCovered').text(zips);
    }
});

// Only run this if there aren't already textboxes in the current row
if ($(this).find('input').length === 0) {
    // Get the values of the cells before the row is cleared
    var county = $(this).find('td.countyCovered').text(),
        state = $(this).find('td.stateCovered').text(),
        zips = $(this).find('td.zipsCovered').text();

    // Clear the text from the selected row
    $(this).find('.countyCovered, .stateCovered, .zipsCovered').text('');

    // Add textboxes to the cells populated with their respective values
    $(this).find('td.countyCovered').append('<input type="text" id="txtEditCounty" value="' + county + '" style="width: 111px;" /><br />' +
        '<input type="submit" id="btnSubmitCoverageEdits" value="Save Edits" /><br />' +
        '<input type="submit" id="btnCancelCoverageEdits" value="Cancel" />');
    $(this).find('td.stateCovered').append('<input type="text" id="txtEditState" value="' + state + '" max-length="2" style="width: 22px;" />');
    $(this).find('td.zipsCovered').append('<textarea id="txtEditZips" cols="100">' + zips + '</textarea>');

    // Size the textarea to its contents
    $('#txtEditZips').flexible();
}
return false;
});

As I said, the above functionality works as expected, with the exception that when one of the inputs in the row is clicked, the edit cursor immediately goes away (as if focus is immediately removed from the input). But when I comment out the first block of code (noted in the code), the inputs become editable as expected.

I set up a jsFiddle for this.

Answers


A simple solution to this will be adding the following lines to your code. DEMO HERE

$('#tblBranchCoverage').on('click', ':input', function (event) {
    event.stopPropagation();
});

This issue is happening because of event-bubbling in javascript. When you click on the input boxes, after performing the click on the input the event will be passed to the parent element. So we just need to stop event bubbling on all input controls. event.stopPropagation(); will help you to do that.


DEMO: http://jsfiddle.net/nHgXf/2/

Changed Javascript:

var editting = false;

// Detect row clicked and switch that row's labels to populated textboxes for editing
$('#tblBranchCoverage').on('click', 'tr', function () {
    if(!editting)
    {
        editting = true;
    // When the following is commented out, the inputs work
    //  If this block of code isn't commented, none of the rows inputs are editable
    // First set any other rows back to labels if they have textboxes
$(this).parent().children('tr').each(function () {
        if ($(this).find('input').length > 0) {
            // Row has textboxes
            var county = $(this).find('#txtEditCounty').val(),
                state = $(this).find('#txtEditState').val(),
                zips = $(this).find('#txtEditZips').val(),
                $td = $(this).find('td');

            // Clear the cells first
            $td.html('');

            // Put the populated labels back in
            $(this).find('.countyCovered').text(county);
            $(this).find('.stateCovered').text(state);
            $(this).find('.zipsCovered').text(zips);
        }
    });

    // Only run this if there aren't already textboxes in the current row
    if ($(this).find('input').length === 0) {
        // Get the values of the cells before the row is cleared
        var county = $(this).find('td.countyCovered').text(),
            state = $(this).find('td.stateCovered').text(),
            zips = $(this).find('td.zipsCovered').text();

        // Clear the text from the selected row
        $(this).find('.countyCovered, .stateCovered, .zipsCovered').text('');

        // Add textboxes to the cells populated with their respective values
        $(this).find('td.countyCovered').html('<input type="text" id="txtEditCounty" value="' + county + '" style="width: 111px;" /><br />' +
            '<input type="submit" id="btnSubmitCoverageEdits" value="Save Edits" /><br />' +
            '<input type="submit" id="btnCancelCoverageEdits" value="Cancel" />');
        $(this).find('td.stateCovered').html('<input type="text" id="txtEditState" value="' + state + '" max-length="2" style="width: 22px;" />');
        $(this).find('td.zipsCovered').html('<textarea id="txtEditZips" cols="100">' + zips + '</textarea>');

        // Size the textarea to its contents
        $('#txtEditZips').flexible();
    }
    }
    editting =false;
    return false;
});

Basically because you bound to the click event it continually was making all the javascript happen, and causing issues with the DOM and selections


Need Your Help

Is there any effort towards a scraper and bot freindly Internet?

web open-source web-scraping semantic-web

I am working on a scraping project for a company. I used Python selenium, mechanize , BeautifulSoup4 etc. libraries and had been successful on putting data into MySQL database and generating report...

Problems migrating .Net Web App from IIS 6 to another server running IIS 6

c# visual-studio-2008 iis migration iis-6

I have 2 servers and a local environment. Both the servers run IIS 6. I used the msdeploy (IIS 6 Migration Tool) to move the project from one server to the next. The code works fine on my local a...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.