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"> </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
Post a Comment