jQuery UI Dialog with ASP NET button postback

Question

I have a jQuery UI Dialog working great on my ASP NET page   jQuery function         jQuery   dialog   dialog           draggable  true          resizable  true          show   Transfer           hide   Transfer           width  320          autoOpen  false          minHeight  10          minwidth  10              jQuery document  ready function         jQuery   button id   click function e            jQuery   dialog   dialog  option    position    e pageX   10  e pageY   10            jQuery   dialog   dialog  open                  My div    lt div id  dialog  style  text-align  left display  none   gt       lt asp Button ID  btnButton  runat  server  Text  Button  onclick  btnButton Click    gt   lt  div gt    But the btnButton Click is never called    How can I solve that   More information  I added this code to move div to form   jQuery   dialog   parent   appendTo jQuery  form first       But still without success

User · Answer

The     dialog   parent   appendTo    form first    solution works fine in IE 9  But in IE 8 it makes the dialog appear and disappear directly  You can t see this unless you place some alerts so it seems that the dialog never appears  I spend one morning finding a solution that works on both versions and the only solution that works on both versions 8 and 9 is       ui-dialog   prependTo  form      Hope this helps others that are struggeling with the same issue

User · Answer

Be aware that there is an additional setting in jQuery UI v1 10  There is an appendTo setting that has been added  to address the ASP NET workaround you re using to re-add the element to the form   Try       dialog   dialog        autoOpen  false       height  280       width  440       modal  true         appendTo    form

User · Answer

With ASP NET just use UseSubmitBehavior  false  in your ASP NET button    lt asp Button ID  btnButton  runat  server   Text  Button  onclick  btnButton Click  UseSubmitBehavior  false    gt           Reference  Button UseSubmitBehavior Property

User · Answer

You are close to the solution  just getting the wrong object  It should be like this   jQuery function         var dlg   jQuery   dialog   dialog                            draggable  true                           resizable  true                           show   Transfer                            hide   Transfer                            width  320                           autoOpen  false                           minHeight  10                           minwidth  10                              dlg parent   appendTo jQuery  form first

User · Answer

Use this line to make this work while using the modal true option   open  function  type  data             ui-widget-overlay   appendTo  form      this  parent   appendTo  form

User · Answer

Move the dialog the right way  but you should do it only in the button opening the dialog  Here is some additional code in jQuery UI sample       create-user   click function             dialog   parent   appendTo    form first            dialog   dialog  open         Add your asp button inside the dialog  and it runs well   Note  you should change the  lt button  to  lt input type button  to prevent postback after you click the  create user  button

User · Answer

I know this is an old question  but for anyone who have the same issue there is a newer and simpler solution  an  appendTo  option has been introduced in jQuery UI 1 10 0  http   api jqueryui com dialog  option-appendTo      dialog   dialog       appendTo   form

User · Answer

I just added the following line after you created the dialog       ui-dialog   prependTo  form

User · Answer

The solution from Robert MacLean with highest number of votes is 99  correct  But the only addition someone might require  as I did  is whenever you need to open up this jQuery dialog  do not forget to append it to parent  Like below   var dlg       questionPopup   dialog   open    dlg parent   appendTo    form first

User · Answer

The exact solution is       dialogDiv   dialog   other options         open  function  type  data              this  parent   appendTo  form

User · Answer

I didn t want to have to work around this problem for every dialog in my project  so I created a simple jQuery plugin  This plugin is merely for opening new dialogs and placing them within the ASP NET form    function                     This is a simple jQuery plugin that works with the jQuery UI        dialog  This plugin makes the jQuery UI dialog append to the        first form on the page  i e  the asp net form  so that        forms in the dialog will post back to the server                This plugin is merely used to open dialogs  Use the normal          fn dialog   function to close dialogs programatically                fn aspdialog   function             if  typeof   fn dialog      function               return           var dlg                if    arguments length    0                      arguments 0  instanceof String                     If we just want to open it without any options                we do it this way              dlg   this dialog    autoOpen   false                 dlg parent   appendTo  form first                dlg dialog  open                      else               var options   arguments 0               options autoOpen   false              options bgiframe   true               dlg   this dialog options               dlg parent   appendTo  form first                dlg dialog  open                        jQuery   lt  code gt  lt  pre gt    So to use the plugin  you first load jQuery UI and then the plugin  Then you can do something like the following       myDialog1   aspdialog       Simple     myDialog2   aspdialog  open       The same thing     myDialog3   aspdialog  title   My Dialog   width  320  height  240       With options    To be clear  this plugin assumes you are ready to show the dialog when you call it

User · Answer

divname   parent   appendTo    form first       Using this code solved my problem and it worked in every browser  Internet nbsp Explorer nbsp 7  Firefox 3  and Google Chrome  I start to love jQuery    It s a cool framework   I have tested with partial render too  exactly what I was looking for  Great    lt script type  text javascript  gt      function openModalDiv divname                    divname  dialog   autoOpen  false  bgiframe  true  modal  true                     divname  dialog  open                    divname  parent   appendTo    form first                function closeModalDiv divname                    divname  dialog  close           lt  script gt           lt input id  Button1  type  button  value  Open 1  onclick  javascript openModalDiv  Div1       gt           lt div id  Div1  title  Basic dialog   gt       lt asp UpdatePanel ID  UpdatePanel1  runat  server  gt          lt ContentTemplate gt            postback test lt br   gt             lt asp Button ID  but OK  runat  server  Text  Send request    gt  lt br   gt             lt asp TextBox ID  tb send  runat  server  gt  lt  asp TextBox gt  lt br   gt             lt asp Label ID  lbl result  runat  server  Text  prova  BackColor   ff0000 gt  lt  asp Label gt           lt  ContentTemplate gt       lt asp UpdatePanel gt       lt input id  Button2  type  button  value  cancel  onclick  javascript closeModalDiv  Div1       gt   lt  div gt

User · Answer

ken s answer above did the trick for me  The problem with the accepted answer is that it only works if you have a single modal on the page  If you have multiple modals  you ll need to do it inline in the  open  param while initializing the dialog  not after the fact   open  function type data      this  parent   appendTo  form        If you do what the first accepted answer tells you with multiple modals  you ll only get the last modal on the page working firing postbacks properly  not all of them

User · Answer

Fantastic  This solved my problem with ASP Button event not firing inside jQuery modal  Please note  using the jQuery UI modal with the following allows the button event to fire      Dialog Link     dialog link   click function              dialog   dialog  open            dialog   parent   appendTo    form first        return false        The following line is the key to get this working       dialog   parent   appendTo    form first

User · Answer

Primarily it s because jQuery moves the dialog outside of the form tags using the DOM  Move it back inside the form tags and it should work fine  You can see this by inspecting the element in Firefox

User · Answer

FWIW  the form first technique didn t work for me   However  the technique in that blog article did   http   blog roonga com au 2009 07 using-jquery-ui-dialog-with-aspnet-and html  Specifically  adding this to the dialog declaration     open  function type data          this  parent   appendTo  form

User · Answer

This was the clearest solution for me  var dlg2       dialog2   dialog           position   center           autoOpen  false          width  600          buttons                 Ok   function                       this  dialog  close                                Cancel   function                       this  dialog  close                                     dlg2 parent   appendTo  form first        dialog link2   click function        dlg2 dialog  open      All the content inside the dlg2 will be available to insert in your database  Don t forget to change the dialog variable to match yours

[c#] jQuery UI Dialog with ASP.NET button postback

Examples related to c#

Examples related to asp.net

Examples related to jquery

Examples related to jquery-ui

Examples related to postback