Jquery dialog box closes IE

Question

I'm using the dialog box as a search area. User clicks on add icon, and dialog pops up with text box and little search icon. When search icon is clicked, or enter is pressed while in the textbox, I would like to begin search.

Works perfectly in FF 19, but in IE 9 the dialog box closes when I press enter button. I tested with a standalone HTML page , and simple dialog, with text box, and IE 9 works fine. So there is something in my code triggering IE 9 to close the dialog box.

I don't have a form on dialog box. It does an AJAX call for result, and when results returned , there is an "Add" button on the dialog box to add the selected results, via checkboxes, to a listbox below on the main page.

I have read a couple of queries here on Stack overflow of problems with one button on the dialog box being bound to the enter button etc, so i removed the "Add" button. I removed the .keypress code for text box too (that fires off the search AJAX function), but still when pressing enter button dialog closes.

I did a beforeClose: function( event, ui ) in the dialog box, and alert some event info, and while the alert box is open, I see that the close button (x) on the dialog has focus.

How would i go about tracing back what is triggering the close button when i press enter? I tried to put breakpoint in IE debugger, at the beforeClose, and inside the beforeClose function, but IE simply does not break there. And I cannot recreate the problem in FF, which has better debugger.

snippet of my code below:

$('#dialog_add_assign_to').dialog({  
        autoOpen: false, 
        closeOnEscape: false,
        /*open: function(event, ui) { $(".ui-dialog-titlebar-close", $(this).parent()).hide(); },*/

        modal: true,  
        resizable: true,
        minWidth: 600,
        buttons: {  
            "Add": function() {
                $('.dialog_add_assign_to_result_checkboxes').each(function() { 
                    if ($(this).is(':checked') ) {
                        $('#' + $('#dialog_add_assign_to').data("type") + '_id').append('<option value="' + $(this).attr('id') + '">' + $(this).attr('ref_name') + ' (' + $(this).attr('ref_country') + ')</option>'); 
                    }
                 });
            },
            "cancel": function() {
                $(this).dialog( "close" );
            }
        },
        beforeClose: function( event, ui ) {
            $('#dialog_add_assign_to_result > tbody:last').empty();
            alert(event.originalEvent.originalEvent  );
            event.preventDefault();
        }
    });  


    //When user presses enter, fire off the search function (search icon click)
    $("#txt_search").keypress(function(e) {
        if (e.keyCode == $.ui.keyCode.ENTER) {
              $("#search_assigned_to").click();
        }
    });

    //Click on the icon to start AJAX search call
    $("#search_assigned_to").click(function () {           
        $('#dialog_add_assign_to_result > tbody:last').empty();

        $.ajax({
            type :'GET',
            url : 'get_ajax_data.php?type=search_' + $('#dialog_add_assign_to').data("type") + '&search_text=' + $("#txt_search").val(),
            dataType : 'xml',
            success : function(xml_results) {
                $('#dialog_add_assign_to_result > tbody:last').append('<tr><td><?=_NAME?></td><td><?=_COUNTRY?></td><td></td></tr>');
                console.log(xml_results);
                $(xml_results).find('search_' + $('#dialog_add_assign_to').data("type")).each(function(){
                    var int_id = $(this).find("id").text();
                    var str_name = $(this).find("name").text();
                    var str_country = $(this).find("country_name").text();

                    if (int_id == '----') {
                        var str_tmp =  '';
                    } else {
                        var str_tmp = '<input type="checkbox" class="dialog_add_assign_to_result_checkboxes" ref_name="' + str_name + '" ref_country="' + str_country + '"  id="' + int_id + '" />';
                    }

                    $('#dialog_add_assign_to_result > tbody:last').append('<tr><td>' + str_name + '</td><td>' + str_country + '</td><td>' + str_tmp + '</td></tr>');
                });

            }
        });
    });

The dialog HTML :

<div id="dialog_add_assign_to">
    <input type="text" id="txt_search" name="txt_search" /><img class="img_16" id="search_assigned_to" src="/images/tray/magnify.gif" />
    <table id="dialog_add_assign_to_result"><tbody></tbody></table>
</div>

Answer 1

First you could try "event.preventDefault();" in the "beforeClose" function to see if that stops the closing. Upon inspecting "event.originalEvent.originalEvent" within the "beforeClose" function using chromes debugger I see when I use the "Esc" key, it adds a "keyCode" property of "27" and a "type" property of "keydown" . When you click the "x" on the top right it adds a "type" property of "click" and it tells you what the "srcElement" is and that it was a mouseevent obviously.

I suggest you look there for clues, should tell you exactly what is closing the dialog. You mentioned IE does not break in the "beforeClose" event? Can you log to console any data from that event or do any alerts?