Geek asks and answers

JQuery Close Dialog Conflict with ASP.NET UpdatePanel

I have an ASP.NET UpdatePanel with the following:

<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>

Pretty simple, actually. Nothing more than the div that I use for the jQuery Dialog popup, the ASP.NET single-column GridView control, and the ASP.NET button for asynchronous postbacks.

Here is the click event that handles the asynchronous postback for 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);
    }
}

: GridView (. ); , jQuery Dialog ( , . , ). javascript (jquery) ScriptManager , , - .

EDIT: , jQuery .

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);
    }
}
+5
3

, JQuery UI, UpdatePanel.

btnAddSupplier_Click UpdatePanel.
btnSelectSupplier_Click 2 divs id divSuppliers, ( UpdatePanel , UpdatePanel DOM html, ).

console.log, .
js: console.log($('#divSuppliers'))

+2

, ?

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

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

. , . , , , - , , , .

EDIT . , :

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

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 });

});

,

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

, script , .

:

$(function () {

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

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

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

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

, : ASP.NET UpdatePanel jQuery, .

I would only go in that direction because I thought it would take less time to create AJAX using the .NET ScriptManager and UpdatePanel controls, and not all of this in jQuery. At the moment, it seems like I was wrong because I go back and tear out the .NET trash and replace it with all jQuery. Therefore, all the time that I thought I would save was gone like the wind.

The moral of the story: do not mix them if you do not need.

0
source

More articles:


All Articles