update panel inside jquery dialog div not working

Question

that's my code :

 <div id="AddFriendDiv" style="display: none">
        <asp:TextBox ID="FriendParamtxt" runat="server"></asp:TextBox>
        <asp:UpdatePanel ID="upd" runat="server">
        <Triggers>
        <asp:AsyncPostBackTrigger ControlID="SearchFriend_btn" EventName="Click" />
        </Triggers>
          <ContentTemplate>
                <asp:Button ID="SearchFriend_btn" runat="server" OnClick="SearchFriend_btn_Click" Value="Search" />
                <asp:Repeater ID="FriendRequestRepeater" runat="server">
                    <ItemTemplate>
                        <table border="1">
                            <tr>
                                <td>
                                    <img src='<%#Eval("PROFILE_PIC") %>' width="35px" height="35px" alt='<%#Eval("NAME") %>' />
                                </td>
                                <td>
                                    <asp:Label ID="Name_lbl" runat="server" Text='<%#Eval("NAME") %>'></asp:Label>
                                </td>
                                <td>
                                    <input type="hidden" id="requestFriendID_hf" /><input type="button" id="addFreind"
                                        value="Send Request" />
                                </td>
                            </tr>
                        </table>
                    </ItemTemplate>
                </asp:Repeater>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>

client side :

 function SendFriendRequest() {

        var dialogOption = { title: "<u>Add Friend</u>", width: 280, height: 140, modal: false, resizable: false, draggable: true,
            maxHeight: 340, autoOpen: true, closeOnEscape: true
        };
        var DialogExtendOptions = { "close": true, "maximize": false, "minimize": true, "dblclick": 'minimize', "titlebar": 'transparent' };

        $("#AddFriendDiv").dialog(dialogOption).dialogExtend(DialogExtendOptions);
       $("#AddFriendDiv").show();


    }

server side :

protected void SearchFriend_btn_Click(object sender, EventArgs e)
{

   DataTable frdrequest= new DataTable();
    int clientID =int.Parse( UserID.Value.ToString());
    if (FriendParamtxt.Text != "")
    {
        frdrequest = SQLHelper.GetAllClientByParam(FriendParamtxt.Text, clientID);
      if (frdrequest.Rows.Count > 0)
      {
          FriendRequestRepeater.DataSource = frdrequest;
          FriendRequestRepeater.DataBind();
      }
    }
}

SendFriendRequest is beeing called form an a tag outside but the problem is that the button click event isn't firing when the main div is a dialog but when i changed it to normal div it work fine anyone know a solution for this ?

As I recall jQuery dialog removed div from main tree in HTML an puts it at the end of HTML - out of normal ASP.NET tree part. That's why postbacks are not working correctly. I've been fixing that by delegating all clicks to some hidden buttons outside of dialog div (copying necessary data to some hidden fields as well) but it is rather weak solution - may work for simple applications though — Jarek, May 15 '13 at 08:00
it work but it's postbacking it shouldn't do that i place a hidden buton outside the dialog div and i triggered the click of the search btn but it's doing a postback and the dilog div is gone due to postback — Sora, May 15 '13 at 08:20
If you put this hidden button inside update panel then it will cause only partial postback. My asp.net skills are a little bit rusty now, but I'm sure you can make it work — Jarek, May 15 '13 at 08:22

Maloric · Accepted Answer · 2013-05-15T08:35:12.200

8

The problem is that jQuery UI appends the dialog to the body, rather than the form. ASP.Net controls need to be inside the form in order to function, but thankfully this is easy to fix. Modify your jQuery like so:

$("#AddFriendDiv").dialog(dialogOption)
  .dialogExtend(DialogExtendOptions)
  .parent().appendTo($("form:first"));
$("#AddFriendDiv").show();

edited May 15 '13 at 08:35

answered May 15 '13 at 08:26

Maloric

5,525
3
31
46

6

It's ok, I'm just a regular guy. I put my pants on one leg at a time. – Maloric May 15 '13 at 08:43

score 2 · Answer 2 · answered May 15 '13 at 10:03

This will help you

        var dialog = $("#divModal").dialog({
            autoOpen: false,
            height: 515,
            width: 900,
            modal: true,
            draggable: false,
            resizable: false
        });
        dialog.parent().appendTo(jQuery("form:first"));

score 0 · Answer 3 · answered May 15 '13 at 07:59

Dear friend if you are using ajaxtoolkite and you are using updatepanel or scriptmanager then jquery make a conflict with it so you can use the following 2 method to make your code work properly the bellow code will solve your problem

    $(document).ready(function() {
// bind your jQuery events here initially
});

    var prm = Sys.WebForms.PageRequestManager.getInstance();

    prm.add_endRequest(function() {

// re-bind your jQuery events here

    });

update panel inside jquery dialog div not working

3 Answers3