javascript - Bootstrap modal not opening when coming to the page from an internal link -


i couldn't come better title, sorry!

the homepage of rails 4 app grid of images open modal on click, works fine when load website first time. if go profile page , press home button on navbar or "back home" on profile modals don't come anymore, clicking on thumbnails adds '#' url without happening.

the thing 2 links have in common both of them 'link_to root_path', can't see how break modals.

my bootstrap gems:

gem 'bootstrap-sass'   gem 'font-awesome-rails' 

here's modal partial (i tried past code in index without rendering partial same issue)

<div id="mymodal" class="modal fade" tabindex="-1" role="dialog">   <div class="modal-dialog" style="width:40%; min-width: 300px">   <div class="modal-content">     <div class="modal-header">         <button type="button" class="close" data-dismiss="modal">×</button>         <h3 class="modal-title">heading</h3>     </div>     <div class="modal-body" style="padding-left: 20px;">         <div class="modal-image" style="float: left;" >         </div>          <div class="modal-infos" style="padding-left: 10px;float: left;">         </div>            <div style="clear:both"></div>     </div>     <div class="modal-footer">         <button class="btn btn-default" data-dismiss="modal">close</button>     </div>    </div>   </div> </div> 

here's js function

$(function() {     $('.pop').click(function(){     $('.modal-image').empty();     $('.modal-infos').empty();     var title = $(this).attr("title");     var price = $(this).attr("price");     var location = $(this).attr("location");     var heading = [title, " (", price, "€)"].join('')     $('.modal-title').html(heading);     $($(this).parents('div').html()).appendto('.modal-image');     var infos = ["<li>location: ", location, "</li><br><li>price: ",price,"€</li><br><br>"].join('')     $(infos).appendto('.modal-infos');     $('#mymodal').modal({show:true});     }); }); 

thanks eugen putting me on right track mentioning jquery issue turbolinks. fix problem declared "ready" variable in assets/javascripts/dealsmodal.js, set equal script , called .on('page:load', ready) this:

var ready; ready = function dealsmodal(){     $("body").on("click", '.pop', function(){      ... function goes here  };  $(document).ready(ready); $(document).on('page:load', ready); 

if reason don't want this, can disable turbolinks assets/javascripts/application.js removing //= require turbolinks.


Comments

Popular posts from this blog

javascript - AngularJS custom datepicker directive -

javascript - jQuery date picker - Disable dates after the selection from the first date picker -