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

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.