Pass dynamic content to bootstrap modal 3.2

Question

What i'm trying to do is to pass the data-id value to an external link via JQuery ajax. The modal will show up but the data-id attribute is not sending to the external link. I think something is wrong with my Jquery script. But i can't find it.

This is my link:

<a href="javascript:;" data-id="1" onclick="showAjaxModal();" class="btn btn-primary    btn-single btn-sm">Show Me</a>

This is my Jquery ajax script:

    <script type="text/javascript">
        function showAjaxModal()
        {
            var uid = $(this).data('id');

            jQuery('#modal-7').modal('show', {backdrop: 'static'});


            jQuery.ajax({
                url: "test-modal.php?id=" + uid,
                success: function(response)
                {
                    jQuery('#modal-7 .modal-body').html(response);
                }
            });
        }
        </script>

This is my code for the modal:

<div class="modal fade" id="modal-7">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Dynamic Content</h4>
            </div>

            <div class="modal-body">

                Content is loading...

            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-info">Save changes</button>
            </div>
        </div>
    </div>
</div>

Can anyone help me out here?

---

I want to load the content of the page found by test-modal.

The code of test-modal.php is simple, see below:

<?php
$uid = $_GET['id'];
echo id: '. $uid;
?>

I have tried to make a jsfiddle: http://jsfiddle.net/2dp12ft8/3/ but it's totally not working. I have changed the js code but it will still not work.

I see the modal showing up but only the word 'undefined' is showing up and not the content of the external file.

Answer 1

Dont mix onclick attributes with event handlers, its messy and can cause errors (such as mistaking the scope of this, which i believe is you main issue here).

If you are using jquery make use of it: First add a class to the links you want to attach the event to, here i use the class showme:

<a href="#;" data-id="1" class="btn btn-primary btn-single btn-sm showme">Show Me</a>

Then attach to the click event on those links:

<script type="text/javascript">
    jQuery(function($){
         $('a.showme').click(function(ev){
             ev.preventDefault();
             var uid = $(this).data('id');
             $.get('test-modal.php?id=' + uid, function(html){
                 $('#modal-7 .modal-body').html(html);
                 $('#modal-7').modal('show', {backdrop: 'static'});
             });
         });
    });
</script>

To access the variable in php:

$uid = $_GET['id']; //NOT $_GET['uid'] as you mention in a comment

Answer 2

Try the load method instead. I'm taking a guess here, but it seems like you want to actually load the contents of the page found at test-modal.php. If that's correct, replace your ajax call as follows:

function showAjaxModal()
    {
        var uid = $(this).data('id');
        var url = "test-modal.php?id=" + uid;
        jQuery('#modal-7').modal('show', {backdrop: 'static'});
        jQuery('#modal-7 .modal-body').load(url);

    }

If your test-modal.php page contains more than a fragment (e.g., it has html and body tags), you can target just a portion of the page by passing an id of the containing element for the content that you want to load, such as:

jQuery('#modal-7 .modal-body').load(url+' #container');

which would only load the contents of the element with the id container from your test-modal.php page into the modal-body.