javascript - Issue with dirty form jQuery plugins -
i having trouble using 2 plugins. have tried:
https://github.com/snikch/jquery.dirtyforms
https://github.com/codedance/jquery.areyousure
in code using:
<script> $(funtion() { $('form').dirtyforms(); }); </script> or
<script> $(funtion() { $('form').areyousure(); }); </script> within header , when change elements of form , try refresh no dialouge. struggling work out how can tell if it's being called @ all.
i can't life of me work. ideas?
below view source example of page in:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link rel="stylesheet" href="styles/header.css?v=1.0"> <link rel="stylesheet" href="styles/content.css?v=1.0"> <link rel="stylesheet" href="styles/footer.css?v=1.0"> <link rel="stylesheet" href="styles/jquery.datetimepicker.css?v=1.0"> <script src="scripts/jquery191.min.js"></script> <script src="scripts/mdetect.js" type="text/javascript"></script> <script type="text/javascript"> if(mobileesp.detecttieriphone() == true) { var metatag=document.createelement('meta'); metatag.name = "viewport" metatag.content = "width=device-width, initial-scale=0.4, maximum-scale=1.0, user-scalable=1" document.getelementsbytagname('head')[0].appendchild(metatag); } if(mobileesp.detecttiertablet() == true) { var metatag=document.createelement('meta'); metatag.name = "viewport" metatag.content = "width=device-width, initial-scale=0.75, maximum-scale=1.0, user-scalable=1" document.getelementsbytagname('head')[0].appendchild(metatag); } </script> <script type="text/javascript" src="scripts/jquery.tablesorter.js"></script> <script type="text/javascript" src="scripts/jquery.tablesorter.widgets.js"></script> <script type="text/javascript" src="scripts/widget-print.js"></script> <script src="https://maps.googleapis.com/maps/api/js?key=aizasybthoxfuejyei11nqpw3rrjhjj_yjcdv-e&callback=initmap"></script> <script src="scripts/jquery.datetimepicker.full.min.js"></script> <script src="scripts/jquery.form.js"></script> <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.dirtyforms/2.0.0/jquery.dirtyforms.min.js"></script> <script type="text/javascript" language="javascript"> <!-- function hidecontent(d) { document.getelementbyid(d).style.display = "none"; } function showcontent(d) { document.getelementbyid(d).style.display = "block"; } function reversedisplay(d) { if(document.getelementbyid(d).style.display == "none") { document.getelementbyid(d).style.display = "block"; } else { document.getelementbyid(d).style.display = "none"; } } //--> </script> <script> $(document).ready(function(){ $("bodyshopaddress").each(function(){ var embed ="<iframe width='200' height='200' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' style='margin-left:30px;' src='https://maps.google.com/maps?&q="+ encodeuricomponent( $(this).text() ) +"&output=embed&iwloc'></iframe>"; $(this).html(embed); }); }); </script> <script> $(funtion() { $('form').dirtyforms(); }); </script> <!--[if lt ie 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div class="container"> <div class="mainheader"> ... </div> <div class="logged_container"> ... </div> <div class="navigation_container"> ... </div> <div style="position:absolute; top:0; right:0; margin-right:10px; margin-top:5px; background-color:#4771a5; border-radius:3px; padding:5px; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 25px rgba(82, 168, 236, 0.7);"> <form id="myform" action="" method="post"> <input type='text' size='20' name='poke' placeholder='magic poking stick' style="margin-right:5px; vertical-align:middle; text-align:center;"> <input type='submit' name='badboypoke' value='' class='submit' title='search' maxlength="3" style='background-image:url("img/bms121.png"); vertical-align:middle;' > </form> </div> <script> $(document).ready(function() { $('#repairernetworktable').tablesorter({ widthfixed : true, headertemplate : '{content} {icon}', // add icon various themes widgets: [ 'stickyheaders', 'filter', 'print' ], widgetoptions: { stickyheaders_attachto : '.wrapper', print_title : '', // option > caption > table id > "table" print_dataattrib : 'data-name', // header attrib containing modified header name print_rows : 'f', // (a)ll, (v)isible or (f)iltered print_columns : 's', // (a)ll, (v)isible or (s)elected (columnselector widget) print_extracss : '', // add css definitions popup window here print_stylesheet : 'styles/tableprint.css', // add url of print stylesheet print_callback : function(config, $table, printstyle){ $.tablesorter.printtable.printoutput( config, $table.html(), printstyle ); } } }); $('.print').click(function(){ $('.tablesorter').trigger('printtable'); }); } ); </script> <div class="content"> <div class="contenttableview"> <a href="#" class="print" style="float:right; margin-right:20px;"> <img src="img/bms91.png" alt="" height="16" style="vertical-align:top; padding-right:5px;">print</a> </div> <br /><br /> <div class="gridviewcontainer wrapper"> <table id="repairernetworktable" class="tablesorter"> ... </table> </div> <br /> <div class="tabbedviewcontainer"> <div class="tabbednavcontainer"> <div style="position: relative; top: 50%; transform: translatey(-50%);"> <form action="" method="post"> <a style="text-decoration:underline !important;" href="repairer_network.php?repnetid=9&repnettab=info">info</a> <a href="repairer_network.php?repnetid=9&repnettab=workproviders">work providers / brokers</a> <a href="repairer_network.php?repnetid=9&repnettab=bodyshops">bodyshops</a> <input name="submitinfo" type="submit" value="change repairer network's info" /> </div> </div> <div style="text-align:left; padding-left:10px; padding-top:10px;"> <span style="font-size: 12px; font-weight:bold;">repairer network info: </span> <br /> <hr size='1' style=" margin: 5px 10px 5px 0; "> <table style="float:left;"> <tr> <td>name: </td> <td><input name="businessname" type="text" size="30" value="ai claims solutions (uk) ltd"/> </td> </tr> <tr> <td>email: </td> <td><input name="businessemail" type="text" size="30" value=""/></td> </tr> <tr> <td>phone: </td> <td><input name="businessphone" type="text" size="30" value=""/></td> </tr> </table> </form> </div> </div> <br /> </div> <div class="footer"> ... </div> </div> </body> </html>
it's simple use. add following line page's ready function: $('form').areyousure(); are sure? - light "dirty forms" jquery plugin
$(document).ready(function(){ $('form').areyousure(); }); that's plugin says... listen element $('form') (you use id or class) , when "event" "areyousure()" occurs, plugin trigger...
Comments
Post a Comment