关于fancybox的Ajax刷新

时间:2014-09-28 16:10:00

标签: php sql ajax fancybox

我有像这样生成div的内容......

<div class="messagecount">
<?php
$mesagecount = $wpdb->get_var($wpdb->prepare("SELECT COUNT(*) FROM " . $wpdb->base_prefix . "messages WHERE message_to_user_ID = %d", $user_ID));
echo $messagecount;
?>
</div>

我也使用fancybox弹出一条消息,我有回调设置,这样当我关闭fancybox时我可以调用一个命令,但现在我希望能够刷新messagecount div而不刷新页面。

我可以使用ajax与fancybox close回调结合使用吗?

1 个答案:

答案 0 :(得分:0)

是。 首先,分配给您的div id&#34; messagecount&#34;。 然后,在文档的head部分输入以下代码:

<script>
function ajaxRequest(){
 var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"]
 if (window.ActiveXObject){
  for (var i=0; i<activexmodes.length; i++){
   try{
    return new ActiveXObject(activexmodes[i])
   }
   catch(e){
   }
  }
 }
 else if (window.XMLHttpRequest)
  return new XMLHttpRequest()
 else
  return false
}
</script>

现在,创建load.php并输入:

<?php
$mesagecount = $wpdb->get_var($wpdb->prepare("SELECT COUNT(*) FROM " . $wpdb->base_prefix . "messages WHERE message_to_user_ID = %d", $user_ID));
echo $messagecount;
?>

要重新加载该框,只需将以下代码放在其后:

<a href="#"  onclick="sending(); return false;">Reload</a>
<script>
    function sending(){
    document.getElementById("messagecount").innerHTML="Refreshing"
    var mypostrequest=new ajaxRequest()
    mypostrequest.onreadystatechange=function(){
     if (mypostrequest.readyState==4){
      if (mypostrequest.status==200 || window.location.href.indexOf("http")==-1){
       document.getElementById("messagecount").innerHTML=mypostrequest.responseText
      }
      else{
       document.getElementById("messagecount").innerHTML='Woops! An error occurred. Please check your Internet connection and try again.';
      }
     }
    }
    mypostrequest.open("GET", "load.php", true)
    mypostrequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
    }
</script>