Jquery UI Dialog within another Dialog postback not working RSS

• • Reply
  

  k80sg

  Member

  310 Points

  340 Posts

  Jquery UI Dialog within another Dialog postback not working

  Dec 18, 2012 04:02 PM|LINK

  I have a child Jquery UI Dialog which pops up upon clicking a button in the master Dialog, however the$("[id*=btnSend]").click(); in the click function is not working in the child (#IssueMsg) dialog. It works if I place it in the parent Dialog (#Issue) instead or if I remove the Modal in the child dialog. Anyone can help? Thanks.

  // Master Dialog:
           $(function() {
                  $("#Issue").dialog({
                      height: 580,
                      width: 1000,
                      modal: true,
                      closeOnEscape: true,
                      position: "center",
                      autoOpen: false,
                      show: {
                          effect: 'fade',
                          duration: 200
                      },
                      hide: {
                          effect: 'fade',
                          duration: 200
                      },
                      resizable: false,
                      closeText: 'X',
                      buttons: [{
                          text: "Get Selected",
                          click: function() {
                              var cb = document.getElementsByTagName('input');
                              for (var i = 0; i < cb.length; i++) {
                                  if (cb[i].getAttribute('type') == "checkbox") {
                                      if (cb[i].checked == true) {
                                          $("#IssueMsg").dialog('open');
                                          $("#IssueMsg").scrollTop($("#IssueMsg").scrollTop() - 1000);
                                          return;
                                      }
                                  }
                              }
                              new Messi('You have not selected anyone, please select at least one member.', { title: 'Opps!', titleClass: 'anim error', buttons: [{ id: 0, label: 'Close', val: 'X' }] });
                          }
                      }]
                  });
                  $("#Issue").parent().appendTo($("form#form1"));
              });
  
  // Child Dialog:
            $(function () {
                  $("#IssueMsg").dialog({
                      height: 310,
                      width: 460,
                      modal: true,
                      closeOnEscape: true,
                      position: "center",
                      autoOpen: false,
                      show: {
                          effect: 'fade',
                          duration: 200
                      },
                      hide: {
                          effect: 'fade',
                          duration: 200
                      },
                      resizable: false,
                      closeText: 'X',
                      buttons: [{
                          text: "Send",
                          click: function() {
                                $('#<%=hdnIncludeMsg.ClientID %>').val(true);
                                $("[id*=btnSend]").click();
                          }
                      }, {
                          text: "Skip",
                          click: function() {
                                $('#<%=hdnIncludeMsg.ClientID %>').val(false);
                                $("[id*=btnSend]").click();
                          }
                      }]
                  });
                  $("#IssueMsg").parent().appendTo($("form#form1"));
              });
  
         <asp:Button ID="btnSend" runat="server" onclick="btnSend_Click" style="display: none" />

  
  
  

• • Reply
  

  hector_anton...

  Member

  82 Points

  27 Posts

  Re: Jquery UI Dialog within another Dialog postback not working

  Dec 18, 2012 05:29 PM|LINK

  Please include the definition of the object you are trying to open. This looks like your division or object is taking the ID of the parent and appending it to it. If your control is running at server the ID will changed based on how deep the control is set. If you are using .NET 4.0 change the ClientIDMode="Static" so the ID of your control will always be what you need. To see if this is the case, your ID changed, do a view source and look for your object. You will see there what the ID is. Your jQuery selector is specific as to what ID is looking for and .NET apends a lot of extra junk to it.

  If you are using .NET before 4.0 that you cannot set a static ID, then you want to add an attribute to your object.

  This is what I do in those cases:

  <asp:TextBox runat='server' id='myId' rel='MyID' />

  Then in my script selector I do something like this:

  jQuery('input[rel*=MyID]')

   

  Good luck.

  • Marked as answer by Yanping Wang - MSFT on Dec 24, 2012 02:38 AM