2013-07-26 4 views
0

У меня есть модальное диалоговое окно JQuery, который становится создан динамически:JQuery Диалог не закрывает

$("#body").append(("<div class=openDialog id= newdialog><div id=dialogbody></div></div>")); 
$('#newdialog').dialog(
    { 
     autoOpen: false, 
     dialogClass: "no-close", 
     modal: true, 
     width: 400, 
     height: 375, 
     resizable: false, 
     closeOnEscape: false 
    }); 

После этого я рендеринга частичный вид в диалоговом

$('#newdialog').dialog('open'); 
    $.ajax(
       { 
        type: "POST", 
        url: "/controller/Add", 
        success: function (data) { 
         $('#dialogbody').html(data); 
        } 
       }); 

Но когда я пытаюсь закройте этот диалог со следующим: он не закрывается:

$('#newdialog').dialog('close'); 

Так что я попробовал следующее, и он получает закрыто:

$('#newdialog').parent('div').remove(); 
$('#newdialog').closest('.div').remove(); 
$("#newdialog").dialog('destroy').remove(); 

Но после этого элементы управления родительскими страницами будут недоступны для редактирования.

Если удалить

closeOnEscape: false 

и я снова нажмите ESC после закрытия будет редактируемые ...

Любой есть какие-либо подсказки/предложения, чтобы преодолеть эту проблему?

+0

@Matt Я удалил запятую из диалогового окна, когда я только что отредактировал его –

+0

Вы видите ошибки в разделе консоли инструментов Dev –

+0

@Scott, без запятой [closeOnEscape: false] тоже то же самое .. – Sreeraj

ответ

0

У меня есть альтернативное решение для этого.

1. Вместо того, чтобы создавать все время. Динамический div размещает один div и в следующий раз, если его не существует. Создайте его. и

$ (документ) .ready (функция() {

 $("#btnCreate").click(function() { 
     if ($('#newdialog).length == 0) { 
      alert('missing'); 
      $("#body").append("<div id=newdialog title=Add Product style=overflow: hidden;background-color:Yellow;border-bottom-width:5;background-color:Red></div>"); 
     } 
     InitializeDialog($("#newdialog")); 

     $("#newdialog").dialog("open"); 
    }); 



    //Method to Initialize the DialogBox 
    function InitializeDialog($element) { 


     $element.dialog({ 
      autoOpen: false, 
      width: 400, 
      resizable: true, 
      draggable: true, 
      title: "Product Operation", 
      model: true, 

      closeOnEscape: false, 
      open: function (event, ui) { 
       //Load the Partial View Here using Controller and Action 
       $element.load('/Prodcontroller/AddProduct'); 
      }, 

      close: function() { 
       $(this).dialog('close'); 
      } 

     }); 

    } 
});"); 

и время закрытия

$ ('# departmentdialog') диалог ('закрыть').

$('#newdialog).parent('div').remove(); 
$('#newdialog).closest('.div').remove(); 

это сработало для меня ... Спасибо каждому

Смежные вопросы