Load page using modal ajax + jquery

Question

I can't for the life of me figure out how to load external page in a modal popup box. I'm using modal popup box from http://dinbror.dk/bpopup/

Since I'm a newb with javascript I can't figure out the documentation. I can load a regular popup box, that's easy for me, but when it comes to loading ajax in modal, I have no idea where to declare this in the html document:

$('element_to_pop_up').bPopup({
            contentContainer:'.content',
            loadUrl: 'test.html' //Uses jQuery.load()
        });

This script supposed to load test.html in a popup, and it does not. It loads a blank popup box instead.

Here is what I tried to do to make this work:

<button id="my-button">Pop it Up</button>
<div id="element_to_pop_up">

<!-- Ajax Javascript that supposed to popup in modal-->
<script>$('element_to_pop_up').bPopup({
            contentContainer:'.content',
            loadUrl: 'test.html' //Uses jQuery.load()
        });</script>

</div>

Any ideas what I'm screwing up?

Possible duplicate? http://stackoverflow.com/questions/3837166/jquery-load-modal-dialog-contents-via-ajax — DrewRobertson93, Feb 27 '14 at 23:55
I think it would be a duplicate if that question was using the same jQuery plugin. — jkw4703, Feb 27 '14 at 23:56

score 1 · Answer 1 · answered Feb 27 '14 at 23:38

Try finding the element using the # char, because you are trying to find by id.

<script>
    $(document).ready(function() { 
        $('#element_to_pop_up').bPopup({
            contentContainer:'.content',
            loadUrl: 'test.html' //Uses jQuery.load()
        });
    });
</script>

jkw4703 · Accepted Answer · 2014-02-28T00:09:28.570

1

You are close. What you are missing is you need to bind an onclick event to your button and put it inside of the $(document).ready like so:

<script>
$(document).ready(function() {
$('#my-button').bind('click', function(e) {

        // Prevents the default action to be triggered. 
        e.preventDefault();

        // Triggering bPopup when click event is fired
        $('#element_to_pop_up').bPopup({
            contentContainer:'.content',
            loadUrl: 'test.html' //Uses jQuery.load()
        });
    });
});
</script>

edited Feb 28 '14 at 00:09

answered Feb 27 '14 at 23:55

jkw4703

352
3
17

Awesome that worked great. Now I have a better understanding about how this works. – user5248 Feb 28 '14 at 00:17
Glad I could help. If it worked please mark it as answered. ^_^ – jkw4703 Feb 28 '14 at 00:18
I'd like to know if there is a way to extend this script. Namely. I want this to work for several popups without duplicating javascript for every #my-button1, #my-button2 and #element_to_pop_up1, #element_to_pop_up2. Anotherwords is there a way to bind all the ajax events without duplicating javascript code, which I think will overload the page if I do. – user5248 Feb 28 '14 at 03:32

score 1 · Answer 3 · answered Jul 22 '14 at 16:28

This is the test page you want:

<html>
    <head> 
        <style>
         #element_to_pop_up { display:none; }
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/x.x.x/jquery.min.js"></script>
<script src="http://dinbror.dk/bpopup/assets/jquery.bpopup-0.9.4.min.js"></script>
<script>
;(function($) {
    $(function() {
        $('#my-button').bind('click', function(e) {
            e.preventDefault();
            $('element_to_pop_up').bPopup({
                contentContainer:'.content',
                loadUrl: 'test.html' //Uses jQuery.load()
                });
        });
     });
 })(jQuery);
</script>

    </head>
    <body>

        <!-- Button that triggers the popup -->
        <button id="my-button">POP IT UP</button>
        <!-- Element to pop up -->
        <div id="element_to_pop_up">Content of popup</div>

    </body>
</html>

Load page using modal ajax + jquery

3 Answers3