2015-08-23 3 views
1

жереха нажатие кнопки не обстрел JQuery диалогового

<asp:Button ID="btnShowPopup" runat="server" Text="Show popup" /> 
 
    <div id="dialog" style="display: none"> 
 
     <table> 
 
      <tr> 
 
       <td> 
 
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td> 
 
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 
 
       </td> 
 
       <td> 
 
        <asp:Label ID="Label1" runat="server"></asp:Label> 
 
       </td> 
 
      </tr> 
 
     </table> 
 
    </div>

<script type="text/javascript"> 
 
    $(function() { 
 
     $("[id*=btnShowPopup]").click(function() { 
 
      ShowPopup(); 
 
      return false; 
 
     }); 
 
    }); 
 

 
    function ShowPopup() { 
 
     $("#dialog").dialog({ 
 
      title: "Test", 
 
      width: 500, 
 
      buttons: { 
 
       Close: function() { 
 
        $(this).dialog('close'); 
 
       } 
 
      }, 
 
      modal: true 
 
     }); 
 
    } 
 
</script>
Я пытаюсь передать значение textBox1 в Label1 на моем button1 мыши event.But, к сожалению, кнопка жерех нажмите событие не стреляя по модальному диалогу. Дайте мне решение, чтобы исправить это правильно.

+0

сколько кнопок одного и того же типа, у вас на вашей странице? – RRK

+0

В настоящее время у меня есть две кнопки на моей странице. Один для показа модального диалога и другой для отправки значений – thilim9

+0

Можете ли вы показать onclick funtion – vijayP

ответ

0

Попробуйте следующий код:

function ShowPopup() { 
      var dlg = $("#dialog").dialog({ 
       title: "Test", 
       width: 500, 
       buttons: { 
        Close: function() { 
         $(this).dialog('close'); 
        } 
       }, 
       modal: true 
      }); 
      dlg.parent().appendTo($("form:first")); 
     } 

Благодаря обратной передачи всплывающего окна будут потеряны. Чтобы показать всплывающее окно снова на постбэка мы не можем поддерживать скрытое поле

<head runat="server"> 

    <title></title> 
    <script type="text/javascript" src="content/js/jquery-1.10.2.js"></script> 
    <script type="text/javascript" src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
    <script type="text/javascript"> 
$(function() { 
      $("[id*=btnShowPopup]").click(function() { 
       ShowPopup(); 
       return false; 
      }); 

      $('#Button1').click(function() { 
       $('#hdnPostback').val(true); 
      }); 

      if ($('#hdnPostback').val() == 'true') { 
       $('#hdnPostback').val(false); 
       ShowPopup(); 
      } 
     }); 

     function ShowPopup() { 
      var dlg = $("#dialog").dialog({ 
       title: "Test", 
       width: 500, 
       buttons: { 
        Close: function() { 
         $(this).dialog('close'); 
        } 
       }, 
       modal: true 
      }); 
      dlg.parent().appendTo($("form:first")); 
     } 
    </script> 
</head> 
<body > 
    <form id="form1" runat="server"> 
    <asp:Button ID="btnShowPopup" runat="server" Text="Show popup" /> 
    <div id="dialog" style="display: none"> 
     <table> 
      <tr> 
       <td> 
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <asp:TextBox ID="TextBox1" runat="server" Text=""></asp:TextBox> 
       </td> 
       <td> 
        <asp:Label ID="Label1" runat="server"></asp:Label> 
       </td> 
      </tr> 
     </table> 
     <asp:HiddenField runat="server" ID="hdnPostback" Value="false" /> 
    </div> 
    </form> 
</body> 

В случае мастер-страниц - ИД клиента динамически генерируется (так идентификатор скрытого управления больше не hdnPostback)

на основе этого кода необходимо изменить что-то вроде этого:

$(function() { 
      $("[id*=btnShowPopup]").click(function() { 
       ShowPopup(); 
       return false; 
      }); 

      var hdnPostbackID = '<%= hdnPostback.ClientID %>' 

      $('#Button1').click(function tt() { 
       $('#' + hdnPostbackID).val(true); 
      }); 

      if ($('#' + hdnPostbackID).val() == 'true') { 
       $('#' + hdnPostbackID).val(false); 
       ShowPopup(); 
      } 
     }); 


     function ShowPopup() { 
      var dlg = $("#dialog").dialog({ 
       title: "Test", 
       width: 500, 
       buttons: { 
        Close: function() { 
         $(this).dialog('close'); 
        } 
       }, 
       modal: true 
      }); 
      dlg.parent().appendTo($("form:first")); 
     } 
+0

Это работа для меня . Но модальный диалог исчез, когда я нажимаю кнопку, даже если я ставлю модальный: true. Как я могу предотвратить ее при нажатии кнопки? – thilim9

+0

Всплывающее окно теряется, поскольку страница перезагружается из-за обратной передачи. – Taleeb

+0

Как решить эту проблему? Можно ли вызвать функцию всплывающего окна на событии button1 onclientclick? – thilim9

0

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent"> 
 
    <asp:Button ID="btnShowPopup" runat="server" Text="Show popup" /> 
 
    <div id="dialog" style="display: none"> 
 
     <table> 
 
      <tr> 
 
       <td> 
 
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td> 
 
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 
 
       </td> 
 
       <td> 
 
        <asp:Label ID="Label1" runat="server"></asp:Label> 
 
       </td> 
 
      </tr> 
 
     </table> 
 
     <asp:HiddenField runat="server" ID="hdnPostback" Value="false" /> 
 
    </div> 
 
</asp:Content>

<script type="text/javascript"> 
 
     $(function() { 
 
      $("[id*=btnShowPopup]").click(function() { 
 
       ShowPopup(); 
 
       return false; 
 
      }); 
 

 
      $('#Button1').click(function tt() { 
 
       $('#hdnPostback').val(true); 
 
      }); 
 

 
      if ($('#hdnPostback').val() == 'true') { 
 
       $('#hdnPostback').val(false); 
 
       ShowPopup(); 
 
      } 
 
     }); 
 

 

 
     function ShowPopup() { 
 
      var dlg = $("#dialog").dialog({ 
 
       title: "Test", 
 
       width: 500, 
 
       buttons: { 
 
        Close: function() { 
 
         $(this).dialog('close'); 
 
        } 
 
       }, 
 
       modal: true 
 
      }); 
 
      dlg.parent().appendTo($("form:first")); 
 
     } 
 

 
</script>

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