jQuery dialogowe 'Zamknij' konflikt z ASP.NET UpdatePanel

Question

Mam ASP.NET UpdatePanel z następujących czynności:

<asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional"> 
<ContentTemplate> 
    <%-- jQuery dialog - Suppliers --%> 
    <div id="divSuppliers" style="display: none;"> 
     <asp:ListBox ID="lstSuppliers" runat="server" SelectionMode="Single" Rows="10" Width="100%" 
      DataValueField="SupplierID" DataTextField="SupplierName"> 
     </asp:ListBox> 
     <br /><br /> 
     <asp:Button ID="btnSelectSupplier" runat="server" Text="Select 2" OnClick="btnSelectSupplier_Click" /> 
    </div> 

    <asp:GridView ID="gvSuppliers" runat="server" AutoGenerateColumns="false" SkinID="gvSkin" 
     DataKeyNames="SupplierID" EmptyDataText="No Existing User Roles"> 
     <Columns> 
      <asp:TemplateField HeaderText="Supplier Name"> 
       <ItemTemplate> 
        <asp:Label ID="lblSupplierName" runat="server" Text='<%# Eval("SupplierName") %>'></asp:Label> 
       </ItemTemplate> 
      </asp:TemplateField> 
     </Columns> 
    </asp:GridView> 

    <asp:Button ID="btnAddSupplier" runat="server" Text="Add Supplier" 
     Visible="false" OnClick="btnAddSupplier_Click" /> 

</ContentTemplate> 
<Triggers> 
    <asp:AsyncPostBackTrigger ControlID="btnSelectSupplier" /> 
</Triggers> 
</asp:UpdatePanel> 

dość proste, naprawdę. Nic więcej niż element div, którego używam dla mojego okna dialogowego jQuery Dialog, kontrolka ASP.NET GridView z jedną kolumną i przycisk ASP.NET dla asynchronicznych wywołań zwrotnych.

Oto zdarzenie click, które obsługuje asynchroniczny odświeżenie dla btnSelectSupplier.

protected void btnSelectSupplier_Click(object sender, EventArgs e) { 

    // +=+=+=+=+=+=+=+=+=+=+=+=+=+=  
    // WORKS JUST FINE 
    List<SupplierItem> suppliers = new List<SupplierItem>();  

    foreach (int i in lstSuppliers.GetSelectedIndices()) { 
     suppliers.Add(
      new SupplierItem { SupplierID = Convert.ToInt32(lstSuppliers.Items[i].Value), SupplierName = lstSuppliers.Items[i].Text }); 
     lstSuppliers.Items[i].Selected = false; 
    } 

    gvSuppliers.DataSource = suppliers; 
    gvSuppliers.DataBind(); 

    // +=+=+=+=+=+=+=+=+=+=+=+=+=+= 
    // DOES NOT WORK!! 
    string jq = "$('#divSuppliers').dialog('close');"; 

    ScriptManager sm = ScriptManager.GetCurrent(this); 
    if (sm != null && sm.IsInAsyncPostBack) { 
     ScriptManager.RegisterClientScriptBlock(
      this, typeof(Page), Guid.NewGuid().ToString(), 
      jq, true); 
    } 
} 

PROBLEM: GridView zaktualizuje dobrze podczas asynchronicznego odświeżenie strony (patrz zdarzenia click wyżej); jednak okno dialogowe jQuery odmawia zamknięcia (ponownie, zobacz zdarzenie powyżej i gdzie mówi NIE DZIAŁA). Rejestruję javascript (jquery) za pomocą ScriptManagera na stronie, więc powinno to być uruchamianie i zamykanie okna dialogowego, ale z jakiegoś powodu tak się nie dzieje.

EDYCJA: Kod, który otwiera okno dialogowe jQuery i sprawia, że ​​jest modalny.

protected void btnAddSupplier_Click(object sender, EventArgs e) { 
    lstSuppliers.ClearSelection(); 
    lstSuppliers.DataSource = Suppliers.GetAllSuppliers(); 
    lstSuppliers.DataBind(); 

    string jq = "var dlg = $('#divSuppliers').dialog({ modal: true, draggable: true, title: 'Suppliers', width: 500 }); dlg.parent().appendTo($('form:first'));"; 

    ScriptManager sm = ScriptManager.GetCurrent(this); 
    if (sm != null && sm.IsInAsyncPostBack) { 
     ScriptManager.RegisterClientScriptBlock(
      this, typeof(Page), Guid.NewGuid().ToString(), 
      jq, true); 
    } 
} 

Answer 1

Element div używany w oknie dialogowym jQuery UI powinien znajdować się poza panelem UpdatePanel.

Na btnAddSupplier_Click tworzysz okno dialogowe i przenosisz je poza panel UpdatePanel.
Po btnSelectSupplier_Click masz 2 elementy div z identyfikatorem divSuppliers, przeniesionym i jednym received from server (mechanizm UpdatePanel pozwala na częściowe aktualizacje strony poprzez przebudowanie całego DOM UpdatePanel z html zwrócony z serwera).

Proponuję również użyć console.log, aby pomóc w debugowaniu.
Dodaj do okna dialogowego zamykania js: console.log($('#divSuppliers'))

Answer 2

Czy rozważałeś pójście prostszą trasą i powiązanie zdarzenia ze stroną przycisku przycisku, aby zamknąć okno dialogowe?

$(function() { 
    $('#btnSelectSupplier').click(function() { 

     $('#divSuppliers').dialog('close'); 
    }); 
}); 

Przepływ jest nadal taki sam z perspektywy użytkownika. Klikają przycisk, a okno dialogowe się zamyka. Kod po stronie serwera będzie działał po zamknięciu okna dialogowego, ale ponieważ nie ma żadnej logiki po stronie serwera, która decyduje, czy chcesz zamknąć okno dialogowe, czy nie po kliknięciu, może to pasować do twoich potrzeb.

EDYTOWANIE Widzę twój problem. Uruchomiona do problemu, ponieważ zamiast otwarcie istniejącego okna, jesteś przedefiniowanie okno na kliknięcie:

string jq = "var dlg = $('#divSuppliers').dialog({ modal: true, draggable: true, title: 'Suppliers', width: 500 }); dlg.parent().appendTo($('form:first'));"; 

Zamiast chcesz zdefiniować okno w funkcji document.ready.

$(function() { 
    //define the div as a dialog. By default, it will not open until you tell it to 
$('#divSuppliers').dialog({ modal: true, draggable: true, title: 'Suppliers', width: 500 }); 

}); 

Na kliknięcia, należy otworzyć go jak ten

$('#divSuppliers').dialog('open'); 

Znów możesz to zrobić po stronie klienta zamiast próbować wcisnąć skrypt do strony, na razie po stronie serwera, ale to zależy od Ciebie.

Najprostszy pełne rozwiązanie:

$(function() { 

$('#divSuppliers').dialog({ modal: true, draggable: true, title: 'Suppliers', width: 500 }); 

$('#btnAddSupplier').click(function() { 

    $('#divSuppliers').dialog('close'); 
}); 
$('#btnSelectSupplier').click(function() { 

    $('#divSuppliers').dialog('open'); 
}); 
}); 

Answer 3

Więc oto rozwiązanie: nie próbuj mieszać przy użyciu ASP.NET UpdatePanel z okna dialogowego jQuery, ponieważ po prostu nie grać ładnie razem.

Poszedłem tylko w tym kierunku, ponieważ myślałem, że zajmie mi to mniej czasu na uzyskanie AJAX w miejscu za pomocą .Manager ScriptManager i UpdatePanel .NET zamiast robić to wszystko w jQuery. W tym momencie wygląda na to, że się myliłem, ponieważ wracam i wyrzucam śmieci .NET i zastępuję je jQuery. Więc cały ten czas, który myślałem, że mogę uratować, zniknął jak wiatr.

Morał z historii: nie mieszaj dwóch, jeśli nie musisz.