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
Post a Comment