Pete Lz Pete Lz - 4 months ago 25
HTML Question

Rails 5.0/Jquery Mobile Nav doesn't open anymore after one click on the proper button

I have been trying to solve the problem for quite a long time now but no success. The mobile nav is working properly but only when I reaload the Page on my mobile. After, one click on a list item, the nav button is not clickable anymore. There must be something I forgot or didn't do well. Can you check my code out ? Thanks in advance.

Here is my HTML :

<div id="inner-content">

<!-- .mobile-nav-container -->
<div class="mobile-nav-container"></div>

<!--button for the mobile navbar to open or close -->
<div class="mobile-nav-btn">
<img class="nav-open" src="https://image-source.png" alt="Nav Button Open" />
<img class="nav-close" src="https://image-source2.png" alt="Nav Button Close" />
</div>

<!--Navbar-->
<div class="items-navbar">
<nav class="rad-nav">
<!--Title or logo here-->
<div class="title-logo"><h3>Example</h3></div>

<!--Navigation menu-->
<ul class="rad-menu">
<li><a href="/page1" id="btn-nav">Page 1</a></li>
<li><a href="/page2" id="btn-nav">Page 2</a></li>
</ul>
</nav>
</div>

</div>


Here is my Jquery/JS code :

(function($) {
jQuery(document).ready(function() {

$('.mobile-nav-btn').click(function() {
if( $('nav').hasClass('active-nav') ) {
$('.mobile-nav-container').removeClass('active-nav');
$('.mobile-nav-btn').removeClass('active-nav');
$('nav').removeClass('active-nav');
$('.rad-menu li').removeClass('show-nav');

// Remove Page Crop
setTimeout(function(){
$('#inner-content').removeClass('crop'); // release the "proper" crop
$('#inner-content').height('auto'); // resets height for scolling
}, 300);

} else {
var windowHeight = $(window).height();
$('#inner-content').height(windowHeight); // sets height to cut page to visible window size
$('#inner-content').addClass('crop'); // "proper" crop
$('.mobile-nav-btn').addClass('active-nav');
$('.mobile-nav-container').addClass('active-nav');
$('nav').addClass('active-nav');


// Show me the links
var timer = 0;
$.each($('.rad-menu li'), function (i, s) {
timer = 100 * i;
setTimeout(function () {
$(s).addClass('show-nav');
}, timer); // show menu items on timer
});
}

});

$( window ).resize(function() {
if ($(window).width() > 700) {
$('.mobile-nav-container').removeClass('active-nav');
$('.mobile-nav-btn').removeClass('active-nav');
$('nav').removeClass('active-nav');
$('nav li').removeClass('show-nav');

// Remove Page Crop
setTimeout(function(){
$('#inner-content').removeClass('crop'); // release the "proper" crop
$('#inner-content').height('auto'); // resets height for scolling
}, 300);
}
});

});

}(jQuery));

Answer Source

With rails 5.0, turbolinks makes the app faster but pages are not reload and that's why the JS was not working anymore.

At the beginning of the JS code, instead of :

(function($) {
jQuery(document).ready(function() {
    #code

I've added :

$(document).on('turbolinks:load', function() {
   # code

This works fine now.