Загрузка модального окна facebox после ajax-запроса - PullRequest
0 голосов
/ 01 декабря 2011

это то, что у меня есть в заголовках тегов моей html-страницы для загрузки плагина facebox:

<!-- 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>

это код моего 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; ?>

что я естьwanting, это некоторый ajax-код, который вызывает функцию, когда пользователь нажимает на div id = "single-result", чтобы он сделал ajax-вызов php-контроллеру, который получает данные из базы данных, а затем загружает представление в faceboxмодальное окно.

Часть, в которой я не уверен, - как заставить его загружаться в модальное окно facebox, я знаю, как использовать вызовы ajax, чтобы заставить его отправлять данные в файл и затем загружать представление в определенныйdiv на странице, я просто хочу, чтобы он загружал его в модальное окно вместо определенного div на странице.

Возможно ли это вообще?(также я использую codeigniter для фреймворка php)

вот мой ajax-код, который загружает результаты запроса ajax в div с правым содержимым, когда пользователь нажимает на 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 -->

Как я могу изменить этот код выше, чтобы он работал при переходе в модальное окно facebox?Я знаю, что Facebox предоставляет этот код ниже, но я понятия не имею, что с ним делать?

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

1 Ответ

0 голосов
/ 01 декабря 2011

Не совсем понятно, к чему вы стремитесь ...

Если вы хотите, чтобы данные, возвращаемые из ajax POST, заполнялись в facebox, просто вызовите facebox при успешном обратном вызовесообщение ajax:

    $("#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);
            })
        });

альтернативно, похоже, что если вы хотите, чтобы при загрузке сообщения загружалась графика в facebox, вы можете поместить ajax POST в функцию facebox:

$("#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);
            })
        });
    })
})
...