php - Why is jquery dialog-message refreshing my page unwantedly (inside form) -


i trying embed simple jquery dialog-message form. dialog should show additional information , not interact form in way except beeing called via button inside form.

my problem following: if dialog called inside form whole page gets refreshed instantly, not showing dialog @ , clearing form fields. if button outside form working fine.

the dialog content being loaded via templates this:

<script> $(function() {     var dlg = $( "#dialog-message" ).dialog({         autoopen: false,         width: '80%',         closeonescape: false,         modal: true,         buttons: {             ok: function() {                 $( ).dialog( "close" );             }         },         open: function() {             // content laden...             $("#dialog-message").load('template.html', function() {}).dialog()         }     });     $( "#opener" ).click(function() {         $( "#dialog-message" ).dialog( "open" );     }); }); </script> 

the form integration:

<form method="post" name="post" action="index.php?site=bewerbung">   <table width="100%" border="0" cellspacing="1" cellpadding="2" bgcolor="$border">    ...    </tr>     <tr bgcolor="$bg1">     <td height="25">&nbsp;</td>     <td><input class="input" type="checkbox" name="rules" id="rules" value="1" /><button id="opener">regeln</button></td>   </tr>  </table> </form> 

your button submits form, need prevent default button action via javascript:

$("#opener").on('click', function(e) {     dlg.dialog("open");     e.preventdefault(); }); 

you don't mentioned jquery (ui) version using. code above newer versions. here's demo.


Comments

Popular posts from this blog

SPSS keyboard combination alters encoding -

Add new record to the table by click on the button in Microsoft Access -

javascript - jQuery .height() return 0 when visible but non-0 when hidden -