2013-03-08 210 views
1

我使用對話框作爲搜索區域。用戶點擊添加圖標,對話框彈出文本框和小搜索圖標。當在文本框中點擊搜索圖標或按下輸入時,我想開始搜索。jquery對話框關閉IE

在FF 19中完美工作,但在IE 9中,當我按下Enter按鈕時,對話框關閉。 我測試了一個獨立的HTML頁面,簡單的對話框,文本框和IE 9工作正常。 因此,我的代碼中有東西觸發IE 9關閉對話框。

我在對話框上沒有form。它會對結果進行AJAX調用,當返回結果時,對話框上會出現一個「添加」按鈕,通過複選框將選定結果添加到主頁面下方的列表框中。

我已經閱讀了一堆關於堆棧溢出問題的一個按鈕被綁定到輸入按鈕等對話框,所以我刪除了「添加」按鈕。我也刪除了文本框的.keypress代碼(即關閉搜索AJAX函數),但仍然在按下輸入按鈕對話框時關閉。

我在對話框中做了一個beforeClose: function(event, ui),並提醒一些事件信息,當警報框打開時,我看到對話框上的close button (x)有焦點。

我會如何追溯什麼是觸發關閉按鈕時,我按下輸入?我試圖在IE調試器,beforeClose和beforeClose函數中放置斷點,但IE不會在那裏破壞。我不能在FF中重新創建問題,它具有更好的調試器。下面我的代碼

片段:

$('#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>'); 
       }); 

      } 
     }); 
    }); 

對話框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> 
+0

你使用對話框的插件嗎? – 2013-03-08 08:32:01

+0

請在提問時發佈您的代碼。謝謝。 – darshanags 2013-03-08 08:34:07

+0

@darshanags ...我已經添加了我的代碼摘錄,我認爲這是問題的一部分 – Shaakir 2013-03-08 09:29:06

回答

2

首先,你可以嘗試 「event.preventDefault();」在「beforeClose」函數中查看是否停止了關閉。在使用chromes調試器檢查「beforeClose」函數中的「event.originalEvent.originalEvent」時,我看到當我使用「Esc」鍵時,它添加了「keyCode」屬性「27」和「type」屬性「keydown」 。當你點擊右上角的「x」時,它會添加一個「類型」屬性「click」,它會告訴你「srcElement」是什麼,顯然它是一個mouseevent。

我建議你看看那裏的線索,應該告訴你到底什麼是關閉對話框。你提到IE在「beforeClose」事件中沒有中斷?你可以登錄來控制該事件的任何數據或做任何警報?

+0

「event.preventDefault();」確實停止關閉對話框。我可以看到「x」在這一點上確實有重點。 當我做一個「警報(event.originalEvent。「我得到了」[object MouseEvent]「 – Shaakir 2013-03-08 09:21:54

+0

它可能是」enter「,那麼也許是關閉它,查找上面描述的」keyCode「屬性。console.log(event.originalEvent.originalEvent.keyCode)或alert (event.originalEvent.originalEvent.keyCode)將event.preventDefault()放在那裏,但將console.log放在event.preventDefault() – jjay225 2013-03-08 09:26:41