Using Javascript / jquery in a page template
-
Development Site: vstar.jlbworks.net/calculate-2/
Old client site: vanstar.com
I am in the process of extracting a calculator function from an old site for a client, the function is mostly javascript plugged right into the template but also script called from the wp directory:
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/javascripts/jquery.shuffleLetters.js"></script>
I didn’t want to edit my template files So i downloaded a plugin that allows me to place javascript right into a page called: code embed.
The plugin works and the HTML / JS that I embeded is preforming how it is suppose to for the most part wit the exception of the last part that is utilizing the shuffleLetters.js script.
The main problem is the server is halting performance because it detects mod security issues generated through the script I am trying to run.
How do I prevent that?The next issue is weather or not the code is calling the script in the directory correctly?
on page HTML:
<div class="entry"> <div class="page-title"> <h2>Compute Your Commute</h2> </div> <div class="page-entry"> <p>Calculate your cost of commuting in your car and compare with a VanStar commute. *</p> <div id="calculator"> <form action="" method=""> <div class="calculator-container"> <h4>Your commute and driving habits.</h4> <span class="stripe"> <label for="calc-commute-distance">What is your daily round trip commute distance in miles from home to work?</label> <input type="text" name="calc-commute-distance" id="calc-commute-distance"><br> </span> <span> <label for="calc-work-days">How many days per month do you normally work? (fulltime=21)</label> <input type="text" name="calc-work-days" id="calc-work-days"><br> </span> <span class="stripe"> <input type="submit" id="calc-submit" value="Submit"> </span> </div> </form> <div class="calculator-container three-quarter"> <h4>Your Commute Expense in Personal Car</h4> <span class="stripe"> <label for="calc-fuel-cost">Your monthly fuel costs</label> <input type="text" name="calc-fuel-cost" id="calc-fuel-cost" value="$"><br> </span> <span> <label for="calc-maint-cost">Your monthly maintenance and tire costs</label> <input type="text" name="calc-maint-cost" id="calc-maint-cost" value="$"><br> </span> <span class="stripe" for="calc-month-direct"> <label>Your monthly direct commuting costs (including maintenance)</label> <input type="text" name="calc-month-direct" id="calc-month-direct" value="$"><br> </span> <span for="calc-year-direct"> <label>Your yearly direct commuting costs (including maintenance)</label> <input type="text" name="calc-year-direct" id="calc-year-direct" value="$"><br> </span> <span class="stripe" for="calc-van-month"> <label><strong style="color: red;">Estimated monthly VanStar costs</strong></label> <input type="text" name="calc-van-month" id="calc-van-month" value="$"><br> </span> <span for="calc-van-year"> <label><strong style="color: red;">Estimated yearly VanStar costs</strong></label> <input type="text" name="calc-van-year" id="calc-van-year" value="$"> </span> <span class="stripe" for="calc-year-savings"> <label><strong style="color: red;">Estimated yearly savings by using VanStar</strong></label> <input type="text" name="calc-year-savings" id="calc-year-savings" value="$"> </span> </div> </div> </div> </div> </div> <div id="calculator-savings"> You could save <div id="calculator-savings-figure">$0</div> a year by using VanStar! </div> <div class="clearfix"></div> <p style="text-align: center;"><a href="vstar.jlbworks.net">Click here to return to the Home page.</a></p> <p><small>* Calculations based on figures provided by AAA. <a href="https://newsroom.aaa.com/tag/your-driving-costs">Read more here..</a></small></p> %CODE1%
JS in a custom field:
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/javascripts/jquery.shuffleLetters.js"></script> <script type="text/javascript"> (function($){ $('#calculator #calc-submit').on('click', function(){ var $this = $(this), $commuteDistance = $('#calc-commute-distance'), $workDays = $('#calc-work-days'), $fuelCosts = $('#calc-fuel-cost'), $maintenanceCosts = $('#calc-maint-cost'), $monthlyDirectCost = $('#calc-month-direct'), $yearlyDirectCost = $('#calc-year-direct'), $monthlyVanCost = $('#calc-van-month'), $yearlyVanCost = $('#calc-van-year'); $yearlySavings = $('#calc-year-savings'); $fuelCosts.val('$' + Math.round($commuteDistance.val() * $workDays.val() * .1234) ); $maintenanceCosts.val('$' + Math.round($commuteDistance.val() * $workDays.val() * .054) ); $monthlyDirectCost.val('$' + Math.round(($commuteDistance.val() * $workDays.val() * .1234) + ($commuteDistance.val() * $workDays.val() * .054)) ); $yearlyDirectCost.val('$' + Math.round((($commuteDistance.val() * $workDays.val() * .1234) + ($commuteDistance.val() * $workDays.val() * .054)) * 12) ); $monthlyVanCost.val('$' + Math.round($commuteDistance.val() * $workDays.val() * .43 / 9) ); $yearlyVanCost.val('$' + Math.round(($commuteDistance.val() * $workDays.val() * .43 / 9) * 12) ); $yearlySavings.val('$' + Math.round(((($commuteDistance.val() * $workDays.val() * .1234) + ($commuteDistance.val() * $workDays.val() * .054)) * 12) - (($commuteDistance.val() * $workDays.val() * .43 / 9) * 12)) ); $('.calculator-container.three-quarter, .calculator-container.three-quarter .stripe').animate({ 'width' : '700px' }, 300, function(){ $('#calculator-savings').fadeIn(); $('#calculator-savings-figure').shuffleLetters({ 'text' : $yearlySavings.val() }); }); return false; }); })(jQuery); </script>
- The topic ‘Using Javascript / jquery in a page template’ is closed to new replies.