jQWidgets Forums
jQuery UI Widgets › Forums › Plugins › Validator, Drag & Drop, Sortable › Simple Validation using JQX Tabs
This topic contains 2 replies, has 1 voice, and was last updated by fredmichel 9 years, 11 months ago.
Viewing 3 posts - 1 through 3 (of 3 total)
-
Author
-
Hi there,
I am trying to use the validation in a JQX Tabs widget for something very simple: a BMI calculator. Everything works when I am on the first tab, but the second I go on the Second Tab, the validation is no longer working. I have changed the hooks and wrote a new function to call my validation and calculate the result…but no matter what I try it doesn’t seem to work. Even the Button is not working…and it does’t seem to be linked to any JavaScript at all.
Maybe there is something I am missing. I did this thing all over again at least 3 times.
Here is the link to a test page:
and here is the complete code. It would be very appreciated if someone could tell me what is wrong with this.
Thanks a lot.
<!DOCTYPE html> <html lang="en"> <head> <meta name="keywords" content="BMI Calculator,Calculateur IMC,GymBuddy,GymBuddCanada" /> <meta name="description" content="Calculateur IMC GymBuddy" /> <meta content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/> <meta name="msapplication-tap-highlight" content="no" /> <title id='Description'>Calculateur IMC GymBuddy</title> <link rel="stylesheet" href="jqwidgets3.8.0/jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="jqwidgets3.8.0/jqwidgets/styles/jqx.windowsphone.css" type="text/css" /> <link rel="stylesheet" href="jqwidgets3.8.0/jqwidgets/styles/jqx.blackberry.css" type="text/css" /> <link rel="stylesheet" href="jqwidgets3.8.0/jqwidgets/styles/jqx.android.css" type="text/css" /> <link rel="stylesheet" href="jqwidgets3.8.0/jqwidgets/styles/jqx.mobile.css" type="text/css" /> <script type="text/javascript" src="jqwidgets3.8.0/scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="jqwidgets3.8.0/scripts/demos.js"></script> <script type="text/javascript" src="jqwidgets3.8.0/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="jqwidgets3.8.0/jqwidgets/jqxtabs.js"></script> <script type="text/javascript" src="jqwidgets3.8.0/jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="jqwidgets3.8.0/jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="jqwidgets3.8.0/jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="jqwidgets3.8.0/jqwidgets/jqxvalidator.js"></script> <script type="text/javascript" src="jqwidgets3.8.0/jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="jqwidgets3.8.0/jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="jqwidgets3.8.0/jqwidgets/jqxmaskedinput.js"></script> <script type="text/javascript" src="jqwidgets3.8.0/jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="jqwidgets3.8.0/jqwidgets/jqxnotification.js"></script> <script type="text/javascript" src="jqwidgets3.8.0/jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> $(document).ready(function () { //Standard Section $("#jqxNotification").jqxNotification({ width: "100%",height: "100%", appendContainer: "#bmicontainer", opacity: 0.9, autoClose: false, template: "info" }); // create jqxTabs. $('#jqxTabs').jqxTabs({ height: '100%', width: '80%', reorder: true, enableDropAnimation: false }); $('#openNotification').jqxButton({ width: 60, height: 25 }); $('#openNotification').on('click', function () { $('#bmiForm').jqxValidator('validate'); var heightFeet = parseInt($('#feetInput').val()); var heightInches = parseInt($('#inchesInput').val()); var weightPds = parseFloat($('#weightInput').val()); if ($.isNumeric(heightFeet) && $.isNumeric(heightInches) && $.isNumeric(weightPds) ){ var result = (weightPds / Math.pow((heightFeet * 12)+heightInches,2)) * 703; var resultoFixed = result.toFixed(2); $('#bmitext').html("Votre IMC est"); //$('#result').html(resultoFixed); $('#notificationContent').html(resultoFixed); $('#bmicontainer').empty(); $('#jqxNotification').jqxNotification("open"); } else { alert("Tous les champs sont obligatoires et doivent seulement contenir des chiffres.") } }); $('.text-input').jqxInput({width: '95%'}); // initialize validator. $('#bmiForm').jqxValidator({ hintType: 'label', animationDuration: 0, rules: [ { input: '#feetInput', message: 'Taille en pieds obligatoire!', action: 'keyup, blur', rule: 'required' }, { input: '#feetInput', message: 'Valeurs permises entre (1 et 7)', action: 'keyup', rule: 'length=1,1' }, { input: '#inchesInput', message: 'Taille en pouces obligatoire!', action: 'keyup, blur', rule: 'required' }, { input: '#inchesInput', message: 'Valeurs permises entre (1 et 11)', action: 'keyup', rule: 'length=1,2' }, { input: '#weightInput', message: 'Poids en livres obligatoire', action: 'keyup, blur', rule: 'required' }, { input: '#weightInput', message: 'Valeurs permises entre (100 et 999)', action: 'keyup', rule: 'length=3,3' } ] }); <!--------------------------------------------------------------------------------------------------------------------------------> <!-------------------------------------------------------METRIC CALCULATION-------------------------------------------------------> <!--------------------------------------------------------------------------------------------------------------------------------> $('#jqxNotificationmetric').jqxNotification({ width: "100%",height: "100%", appendContainer: "#bmicontainermetric", opacity: 0.9, autoClose: false, template: "info" }); $('#openNotificationmetric').jqxButton({ width: 60, height: 25 }); // $('#openNotificationmetric').on('click', function () { $('#bmiFormMetric').jqxValidator('validate'); var heightMeter = $('#meterInput').val(); var heightCm = $('#cmInput').val(); var weightKg = $('#weightInputkg').val(); if ($.isNumeric(heightMeter) && $.isNumeric(heightCm) && $.isNumeric(weightKg) ){ var heightConverted = parseFloat(heightMeter.concat(".",heightCm)); var resultmetric = (parseFloat(weightKg) / Math.pow(heightConverted,2)); var resulMetrictoFixed = resultmetric.toFixed(2); alert(resulMetrictoFixed); $('#bmitextmetric').html("Votre IMC est"); $('#resultMetric').html(resulMetrictoFixed); $('#notificationContentMetric').html(resulMetrictoFixed); $('#bmicontainerMetric').empty(); $('#jqxNotificationMetric').jqxNotification("open"); } else { alert("Tous les champs sont obligatoires et doivent seulement contenir des chiffres.") } }); // $('.text-input').jqxInput({width: '95%'}); // initialize validator. $('#bmiFormMetric').jqxValidator({ hintType: 'label', animationDuration: 0, rules: [ { input: '#meterInput', message: 'Taille en mètres obligatoire!', action: 'keyup, blur', rule: 'required' }, { input: '#meterInput', message: 'Valeurs permises entre (1 et 2)', action: 'keyup', rule: 'length=1,1' }, { input: '#cmInput', message: 'Taille en centimètres obligatoire!', action: 'keyup, blur', rule: 'required' }, { input: '#cmInput', message: 'Valeurs permises entre (10 et 99)', action: 'keyup', rule: 'length=2,2' }, { input: '#weightInputkg', message: 'Poids en Kg obligatoire', action: 'keyup, blur', rule: 'required' }, { input: '#weightInputkg', message: 'Valeurs permises entre (50 et 200)', action: 'keyup', rule: 'length=2,3' } ] }); }); </script> </head> <body class='default'> <div id='jqxWidget'> <table width="100%" border="0" cellpadding="4"> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td align="center" valign="middle"> <div id="container" style="float: center"> <div id='jqxTabs'> <ul style='margin-left: 30px;'> <li>Impérial</li> <li>Métrique</li> </ul> <!--Imperial Start--><div> <div id="standardBMI"> <form id="bmiForm" action="./"> <table class="standardBMI-table"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td><strong>Taille</strong></td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td><input type="text" id="feetInput" class="text-input" /></td> <td><span style="text-align: center; font-weight: bold;">pi</span></td> </tr> <tr> <td> </td> <td> </td> <td><input type="text" id="inchesInput" class="text-input" /></td> <td align="left" style="text-align: left; font-weight: bold;">po</td> </tr> <tr> <td> </td> <td> </td> <td style="text-align: center; font-weight: bold;"> </td> <td style="text-align: center; font-weight: bold;"> </td> </tr> <tr> <td> </td> <td> </td> <td align="left" style="text-align: left; font-weight: bold;">Poids</td> <td style="text-align: center; font-weight: bold;"> </td> </tr> <tr> <td> </td> <td> </td> <td><input type="weight" id="weightInput" class="text-input" /></td> <td><strong>lb</strong></td> </tr> <tr> <td style="text-align: center;"> </td> <td style="text-align: center;"> </td> <td style="text-align: left;"><input type="button" value="Calculer" id="openNotification" /></td> <td style="text-align: center;"> </td> </tr> <tr> <td style="text-align: center;"></td> <td style="text-align: center;"></td> <td style="text-align: center;"> <div id="jqxNotification"> <div id="bmitext"></div> <div id="notificationContent"></div> </div> </td> <td style="text-align: center;"> </td> </tr> <tr> <td align="right" style="text-align: center;"></td> <td align="right" style="text-align: center;"></td> <td align="right" style="text-align: right;"> <div id="bmicontainer" style="width: '95%'; height: 70px; text-align:center; margin-top: 15px; background-color: #C2191C; border: 1px dashed #000000; overflow: hidden;"> </div> </td> <td align="right" style="text-align: center;"> </td> </tr> <tr> <td align="right" style="text-align: center;"></td> <td align="right" style="text-align: center;"></td> <td align="right" style="text-align: right;"></td> <td align="right" style="text-align: center;"> </td> </tr> </table> </form> </div> <!--Imperial End--></div> <!--*******************************************************************************************************--> <!--Metric Start--><div> <div id="metricBMI"> <form id="bmiFormMetric" action="./"> <table class="metricdBMI-table"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td><strong>Taille</strong></td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td><input type="text" id="meterInput" class="text-input" /></td> <td><span style="text-align: center; font-weight: bold;">pi</span></td> </tr> <tr> <td> </td> <td> </td> <td><input type="text" id="cmInput" class="text-input" /></td> <td align="left" style="text-align: left; font-weight: bold;">po</td> </tr> <tr> <td> </td> <td> </td> <td style="text-align: center; font-weight: bold;"> </td> <td style="text-align: center; font-weight: bold;"> </td> </tr> <tr> <td> </td> <td> </td> <td align="left" style="text-align: left; font-weight: bold;">Poids</td> <td style="text-align: center; font-weight: bold;"> </td> </tr> <tr> <td> </td> <td> </td> <td><input type="weight" id="weightInputkg" class="text-input" /></td> <td><strong>lb</strong></td> </tr> <tr> <td style="text-align: center;"> </td> <td style="text-align: center;"> </td> <td style="text-align: left;"><input type="button" value="Calculer" id="openNotificationmetric" /></td> <td style="text-align: center;"> </td> </tr> <tr> <td style="text-align: center;"></td> <td style="text-align: center;"></td> <td style="text-align: center;"> <div id="jqxNotificationMetric"> <div id="bmitextmetric"></div> <div id="notificationContentMetric"></div> </div> </td> <td style="text-align: center;"> </td> </tr> <tr> <td align="right" style="text-align: center;"></td> <td align="right" style="text-align: center;"></td> <td align="right" style="text-align: right;"> <div id="bmicontainerMetric" style="width: '95%'; height: 70px; text-align:center; margin-top: 15px; background-color: #C2191C; border: 1px dashed #000000; overflow: hidden;"> </div> </td> <td align="right" style="text-align: center;"> </td> </tr> <tr> <td align="right" style="text-align: center;"></td> <td align="right" style="text-align: center;"></td> <td align="right" style="text-align: right;"></td> <td align="right" style="text-align: center;"> </td> </tr> </table> </form> </div> <!--Metric End--></div> <br /> </div> </div> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> </div> </body> </html>I found the problem…seems like JQX doesn’t like me using the 2 jqxNotification calls. It works with only 1.
Good to know.
Hmmm not even correct with my last reply. I think it was just the naming convention being bad for the 2 different Notification Calls. Now it works…
-
AuthorPosts
Viewing 3 posts - 1 through 3 (of 3 total)
You must be logged in to reply to this topic.