I have a piece of Jquery code that once a user signups the first time and goes to the page where I have Jquery code loaded it doesn't work, but once I reload the page it displays fine. It seems as though this happens every time I make an account and then go to that page the code doesn't display.
I have included in my application.rb config.assets.precompile += %w( finder.js ) and rendered the Javascript in the html through <%= javascript_include_tag "finder.js" %>
What could be making the code not render upon signup, performance issues?
Here is my code:
Form.html.erb
<!-- multistep form -->
<div class="container">
<div class="row">
<div class="margin-top text-center">
<h2 class="bg-success">Answer each question, & we match you with your ideal career choice!</h2>
</div>
<div class="margin-little-top">
<form id="msform">
<fieldset id="firstField">
<h2 class="fs-title">Are you Technical or Creative?</h2>
<h3 class="fs-subtitle">This is step 1</h3>
<input type="button" name="technical" class="next action-button" value="Technical" />
<input type="button" name="creative" class="next action-button" value="Creative" />
</fieldset>
<fieldset id="technicalField">
<h2 class="fs-title">You walk into a room at a party, do you go to the center of the room or stay on the periphery?</h2>
<h3 class="fs-subtitle">This is step 2</h3>
<input type="button" name="algebra" class="next action-button" value="Algebra" />
<input type="button" name="geometry" class="next action-button" value="Geometry" />
<br>
<input type="button" name="previous" class="previous action-button" value="Previous" />
</fieldset>
<fieldset id="algebraField">
<h2 class="fs-title">Algebra</h2>
<input type="button" name="previous" class="previous action-button" value="Previous" />
</fieldset>
<fieldset id="geometryField">
<h2 class="fs-title">Geometry</h2>
<input type="button" name="previous" class="previous action-button" value="Previous" />
</fieldset>
<!------##################Sciences#####################---->
<fieldset id="creativeField">
<h2 class="fs-title">Creative</h2>
<h3 class="fs-subtitle">Do you like Chemistry or Biology?</h3>
<input type="button" name="chemistry" class="next action-button" value="chemistry" />
<input type="button" name="biology" class="next action-button" value="Biology" />
</fieldset>
<fieldset id="chemistryField">
<h2 class="fs-title">Chemistry</h2>
</fieldset>
<fieldset id="biologyField">
<h2 class="fs-title">Biology</h2>
</fieldset>
</form>
</div></div></div>
<!-- jQuery -->
<script src="http://thecodeplayer.com/uploads/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<!-- jQuery easing plugin -->
<script src="http://thecodeplayer.com/uploads/js/jquery.easing.min.js" type="text/javascript"></script>
<!-- Plugin JavaScript -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<%= javascript_include_tag "finder.js" %>
finder.js
//jQuery time
var current_fs, next_fs, previous_fs, maths_fs, science_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches
$(".next").click(function(){
if(animating) return false;
animating = true;
current_fs = $(this).parent();
if($(this).attr('name') == 'technical')
next_fs = $('#technicalField');
if($(this).attr('name') == 'algebra')
next_fs = $('#technicalField');
if($(this).attr('name') == 'geometry')
next_fs = $('#technicalField');
if($(this).attr('name') == 'creative')
next_fs = $('#creativeField');
if($(this).attr('name') == 'chemistry')
next_fs = $('#chemistryField');
if($(this).attr('name') == 'biology')
next_fs = $('#biologyField');
//activate next step on progressbar using the index of next_fs
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
//show the next fieldset
next_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale current_fs down to 80%
scale = 1 - (1 - now) * 0.2;
//2. bring next_fs from the right(50%)
left = (now * 50)+"%";
//3. increase opacity of next_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({'transform': 'scale('+scale+')'});
next_fs.css({'left': left, 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
$(".previous").click(function(){
if(animating) return false;
animating = true;
current_fs = $(this).parent();
previous_fs = $('#firstField');
//de-activate current step on progressbar
$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
//show the previous fieldset
previous_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale previous_fs from 80% to 100%
scale = 0.8 + (1 - now) * 0.2;
//2. take current_fs to the right(50%) - from 0%
left = ((1-now) * 50)+"%";
//3. increase opacity of previous_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({'left': left});
previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
$(".submit").click(function(){
return false;
});
