1

I'm having a problem with my modal. I want a modal to display each post's comments, so I created a link and a modal which are in a post.each loop. The problem is that it seems like the modal and the link are not 'linked'. The modal is displaying the content like it should but... the links don't work and each modal is displaying under each link even before any clicking. And sorry if it is a big mistake, I am pretty new to this.

My Modal:

<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title"></h4>
    </div>
    <div class="modal-body">
    </div>
    <div class="modal-footer">
        <a href="#" class="btn btn-white" data-dismiss="modal">Close</a>
        <a href="#" class="btn btn-primary">Button</a>
        <a href="#" class="btn btn-primary">Another button...</a>
    </div>
  </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

My link:

<a  href="#" data-toggle="modal" data-target="#myModal" class="btn btn-xs btn-primary"><span class="glyphicon glyphicon-comment"></span> Comment</a>

My JS:

$('[data-toggle="ajaxModal"]').on('click',
          function(e) {
            $('#ajaxModal').remove();
            e.preventDefault();
            var $this = $(this)
              , $remote = $this.data('remote') || $this.attr('href')
              , $modal = $('<div class="modal" id="ajaxModal"><div class="modal-body"></div></div>');
            $('body').append($modal);
            $modal.modal({backdrop: 'static', keyboard: false});
            $modal.load($remote);
          }
        );
David
  • 4,665
  • 4
  • 34
  • 60
Yohan
  • 145
  • 1
  • 10
  • your js code is targeting `data-toggle="ajaxModal"` but your link `data-toggle` is `modal`, error there? – kasperite Aug 23 '16 at 02:26
  • It is not, to be honest I tried to refer to a SO post that did not use the same link as me, is that my problem ? – Yohan Aug 23 '16 at 02:28
  • you didn't add `hide` or `fade` class to the modal div, that's why it's showing up before any clicking. If you can set up a jsfiddle for this, I can take a look – kasperite Aug 23 '16 at 02:41
  • I added the hide and now it is just a problem of modal not appearing, here is how the jsfiddle looks like: https://jsfiddle.net/9b5vmwbv/ – Yohan Aug 23 '16 at 02:49
  • See https://jsfiddle.net/9b5vmwbv/1/, you didn't wrap the `modal-dialog` div with `modal` div so that's the error – kasperite Aug 23 '16 at 03:03
  • But now the content <% post.content %> is not displaying each different post :/ – Yohan Aug 23 '16 at 03:09
  • you are using rails as backend?tbh, I don't understand what your js code does without better context. – kasperite Aug 23 '16 at 03:13
  • This is my initial problem: http://stackoverflow.com/questions/38924578/how-to-display-different-posts-using-modals?noredirect=1#comment65206981_38924578 – Yohan Aug 23 '16 at 03:16
  • And this is where someone told me to go to load content via AJAX: http://stackoverflow.com/questions/19663555/bootstrap-3-how-to-load-content-in-modal-body-via-ajax/27718674#27718674 I used the last answer to get my modal and my JS. – Yohan Aug 23 '16 at 03:17
  • ok, that's clearer. And yes, as rightly said by the guy, you need to load the content to the modal via ajax. Did you try to do it? – kasperite Aug 23 '16 at 03:25
  • Kind of, but I think that I should try that part again, and I have to sleep rn, is that ok if I come on here later to tell you how it went ? – Yohan Aug 23 '16 at 03:27

0 Answers0