Select box use with .mouseup return false issue

Question

I am following this tutorial:

http://www.9lessons.info/2011/03/live-table-edit-with-jquery-and-ajax.html

My addition is most content is ajax/json/dynamic. I have added a select box which is also populated dynamically. When I try to select something in the select dropdown it automatically closes. I assume due to this:

$(".editbox").mouseup(function(){
    return false
});

I have tried to use some variation on this:

$('input[type=select]').click(function(event){event.stopPropagation()});

But I am further down the rabbit hole than my current understanding allows. Any suggestions would be greatly appreciated.

Answer 1

You can solve this by wrapping the code in your tr's click event with an if statement that checks which element was actually clicked. This will cause your code to only hide/show the inputs when the user clicks directly on a <td> or <span> with the appropriate class. That will allow you to get rid of the '.editbox' mouseup event handler.

jsFiddle (The first row in the fiddle displays a select box instead of just two inputs so you can see that this code works. The ajax call is also commented in the fiddle.)

$(document).ready(function() {
    $(".edit_tr").click(function(e) {
        if ($(e.target).hasClass('edit_td') || $(e.target).hasClass('text')) {
            var ID = $(this).attr('id');
            $("#first_" + ID).hide();
            $("#last_" + ID).hide();
            $("#first_input_" + ID).show();
            $("#last_input_" + ID).show();
        }
    }).change(function() {
        var ID = $(this).attr('id');
        var first = $("#first_input_" + ID).val();
        var last = $("#last_input_" + ID).val();
        var dataString = 'id=' + ID + '&firstname=' + first + '&lastname=' + last;
        $("#first_" + ID).html('<img src="load.gif" />'); // Loading image
        if (first.length > 0 && last.length > 0) {

            $.ajax({
                type: "POST",
                url: "table_edit_ajax.php",
                data: dataString,
                cache: false,
                success: function(html) {
                    $("#first_" + ID).html(first);
                    $("#last_" + ID).html(last);
                }
            });
        }
        else {
            alert('Enter something.');
        }

    });

    // Outside click action
    $(document).mouseup(function(e) {
        if (!$(e.target).hasClass('editbox')) {
            $(".editbox").hide();
            $(".text").show();
        }
    });

});

The relevant code above is:

$(".edit_tr").click(function(e) {
    if ($(e.target).hasClass('edit_td') || $(e.target).hasClass('text')) {
        var ID = $(this).attr('id');
        $("#first_" + ID).hide();
        $("#last_" + ID).hide();
        $("#first_input_" + ID).show();
        $("#last_input_" + ID).show();
    }
})

Don't forget to remove this code:

$(".editbox").mouseup(function() {
    return false
});

Edit: You'll need to do something similar in the 'document' click handler. Except here, you're ignoring the clicks if the target has the 'editbox' class.

// Outside click action
$(document).mouseup(function(e) {
    if (!$(e.target).hasClass('editbox')) {
        $(".editbox").hide();
        $(".text").show();
    }
});