2011-12-01 73 views
0

这是我在我的HTML页面的head标签加载facebox插件:一个Ajax请求后加载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; ?> 

我想要的是当用户点击div id =“single-result”时调用函数的一些ajax代码,以便它对从数据库获取数据并加载的php控制器进行ajax调用进入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>') 
    }) 
}) 

回答

0

这不是真的清楚你以后......

如果你想要的是让数据从AJAX POST被填充到facebox返回,只需调用facebox上的成功阿贾克斯后的回调:

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