0

I have this modal

    <!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Choose Recipients from Address book </h4>
      </div>
      <div class="modal-body">
        <?php echo $output; ?>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

that i am using to list all blog posts comments.The comments are displayed fine but i now want to view individual comments say comment 1 by clicking the link for that particular comment and load that comment from on the modal.

Upon trying to load that comment,the modal is immediately closing and thus not able to view the comment from within the modal.

Is there a solution that enables me load another php script from within the modal?.

  • This might help http://stackoverflow.com/questions/19663555/bootstrap-3-how-to-load-content-in-modal-body-via-ajax – Dan Aug 22 '14 at 15:59
  • Is it possible without using ajax just like in an ordinary parent window without any ajax?.That is what i would have preferred. –  Aug 22 '14 at 16:03

1 Answers1

0

If you want to avoid AJAX, your best option is to put your PHP in a separate file and display it via a frame.

Another option is to integrate jQuery into your PHP, so that when a link is clicked, display content changes. This is a basic idea of what I mean:

$(document).ready(function() {
 var e = $('#testModal').find('.modal-body');
 var f = '<a class="comment">Link 1</a>';
 e.html(f);
 $('.comment').click(function() {
  $(this).parent().html('This is your comment.<br /><br /><a class="return">Return</a>');
 });
 $(e).on('click', '.return', function() {
  e = $(this).parent().html(f);
 });
});

It can be seen working at: http://jsfiddle.net/Lc0vm9o7/

This is a REALLY basic example. You can utilize PHP to generate as many variables as you would require, to take the load off the clients browser by generating via jQuery.

I would recommend using the PHP in a frame, though. It would be significantly less messy to not have jQuery thrown throughout your PHP.

Christopher Esbrandt
  • 1,198
  • 9
  • 22
  • Iframe is an alternative i am likely to explore more into the future.I also found `data-backdrop="static" ` to be useful. –  Aug 28 '14 at 19:21
  • I'm actually working on a modal-centering/GoogleDocs/iframe script. Mostly working. Crossing out the GoogleDocs bit and it's fairly simple to create a modal with an iframe as the content. Just make sure you tack "seamless" onto it, makes it easy to blend the frame into the page. :) – Christopher Esbrandt Aug 28 '14 at 19:24
  • I tried displaying jquery datatables table using iframe inside a modal and it worked.I ran into murky waters when i tried selecting some rows from the datatables in the iframe and passing it to the modal parent window.That's when the rain started beating me,ahem,my trust in that iframe method. –  Aug 28 '14 at 19:27
  • Using iframes wouldn't require jQuery. My code example was to avoid iframes. With an iframe structure, you would build your PHP page for displaying just the content of the modal as if all you wanted on that page was the content. It would then act entirely separate from the actual page that has the modal, because it would be an entirely different page. – Christopher Esbrandt Aug 28 '14 at 19:30
  • I understand you.I have also found that you could actually pass data to the parent from the iframe http://stackoverflow.com/questions/4689145/pass-jquery-variables-between-iframe-and-parent but somehow,i am hesitant to take a dive into the world iframes in this age of html5. –  Aug 28 '14 at 19:34
  • lol, I can understand that. I grew up using tables for templating (so precise and never a question of what does where). Yes, you can pass data between parent and frame, however, this is a HIGHLY limited ability. Bare in mind, the page displayed in the frame is still an entirely separate page from the parent. As for not learning frames, I can't say I agree with that. Despite the massive improvements with what we can do in HTML5, framing won't be disappearing anytime soon. – Christopher Esbrandt Aug 28 '14 at 19:39