Loading a facebox modal window after an ajax request

Question

this is what i have in the head tags of my html page to load the facebox plugin:

<!-- This is for the facebox plugin to work -->
<link href="<?php echo base_url();?>styles/facebox/src/facebox.css" media="screen" rel="stylesheet" type="text/css" />
<script src="<?php echo base_url();?>styles/facebox/lib/jquery.js" type="text/javascript">  </script>
<script src="<?php echo base_url();?>styles/facebox/src/facebox.js" type="text/javascript"></script>
<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('a[rel*=facebox]').facebox({
            loadingImage : "<?php echo base_url();?>styles/facebox/src/loading.gif",
            closeImage   : "<?php echo base_url();?>styles/facebox/src/closelabel.png"
         })
    })
</script>

this is the code for my div

<?php if(isset($$j)) : foreach($$j as $row) : ?>
    <div class="single-result" id="single-result">
        <div class="name"><?php echo $row->Name; ?></div>
        <div class="description"><?php echo $row->Description; ?></div>
    </div>
<?php endforeach; ?>
<?php else : ?>
    error here
<?php endif; ?>

what i am wanting, is some ajax code that calls a function when the user clicks on the div id="single-result" so that it makes an ajax call to a php controller that gets the data from the database and then loads the view into a facebox modal window.

The part i am unsure about is how to make it load into a facebox modal window, l know how to use ajax calls to make it send data to a file and then load a view into a certain div on the page, l just want it to load it into the modal window instead of a certain div on the page.

Is this possible at all? (also i am using codeigniter for the php framework)

here is my ajax code which would load the ajax request results into the content-right div when the user clicks on div.

<script type="text/javascript">
                $("#single-result").click(function() {

                    var form_data = {
                        ajax: '1',
                        itemcode: "<?php echo $row->id; ?>"
                    };


                    $.ajax({
                        url: "<?php echo site_url('ajax/item_info_right'); ?>",
                        type: 'POST',
                        data: form_data,
                        success: function(msg) {
                            $('#content-right').html(msg);
                        }
                    });

                    return false;
                });
                </script>
                <!-- END -->

how do i modify this code above to make it work with going into a facebox modal window? I know facebox provides this code below, but i have no idea what to do with it?

jQuery.facebox(function() { 
    jQuery.get('code.js', function(data) {
        jQuery.facebox('<textarea>' + data + '</textarea>')
    })
})

Answer 1

It's not really clear what you're after...

If what you want is to have the data returned from the ajax POST to be populated into a facebox, simply call facebox on the success callback of the ajax post:

    $("#single-result").click(function() {
        var form_data = {
            ajax: '1',
            itemcode: "<?php echo $row->id; ?>"
        };


        $.ajax({
            url: "<?php echo site_url('ajax/item_info_right'); ?>",
            type: 'POST',
            data: form_data,
            success: function(msg) {
                jQuery.facebox(msg);
            })
        });

alternatively, it looks like if you want the facebox loading graphics while the post is processed, you can wrap the ajax POST in facebox function:

$("#single-result").click(function() {
    jQuery.facebox(function() { 
        var form_data = {
            ajax: '1',
            itemcode: "<?php echo $row->id; ?>"
        };
        $.ajax({
            url: "<?php echo site_url('ajax/item_info_right'); ?>",
            type: 'POST',
            data: form_data,
            success: function(msg) {
                jQuery.facebox(msg);
            })
        });
    })
})