使用Javascript将PHP变量传递到多个<span>标记</span>

时间：2011-10-15 16:26:33

标签： php jquery html

我一直在寻找类似的问题，但我找不到一个。 我正在尝试将twitter / facebook / rss粉丝的数量推到我的侧边栏中的<span>....</span>。

为了获得数字，我使用了一些PHP脚本。在一个单独的文件中，我有javascript，在我的sidebar.php文件中，我有<span>....</span>。 我试图调试一切，但我找不到我的错误。

在侧边栏中我使用：

<div id="social-bar">

                    <ul>
                        <li class="rss-count"><a href="http://feeds.feedburner.com/dewereldverzamelaar"><span>..........</span></a></li>
                        <li class="twitter-count"><a href="http://twitter.com/deverzamelaar"><span>..........</span></a></li>
                        <li class="facebook-count"><a href="http://www.facebook.com/dewereldverzamelaar"><span>..........</span></a></li>
                    </ul>

                <!--END #social-bar-->
                </div>

我的php文件让我的推特粉丝（例如）看起来像这样：

<?php
$screenName = 'deverzamelaar';
$getData = 'followers_count';

$xml = file_get_contents('http://twitter.com/users/show.xml?screen_name=' . $screenName);

if(preg_match('/' . $getData . '>(.*)</', $xml, $count) !=0)
echo "$count[1]";   
?>

最后你有jQuery脚本：

var count = 0;

jQuery('.rss-count span').load('http://www.dewereldverzamelaar.com/wp-content/developer/themes/gridlocked/includes/update-rss.php', function() {
        count++;
        tz_showSocial(count);

});
jQuery('.twitter-count span').load('http://www.dewereldverzamelaar.com/wp-content/developer/themes/gridlocked/includes/update-twitter.php', function() {
        count++;
        tz_showSocial(count);
});
jQuery('.facebook-count span').load('http://www.dewereldverzamelaar.com/wp-content/developer/themes/gridlocked/includes/update-facebook.php', function() {
        count++;
        tz_showSocial(count);
});

function tz_showSocial(count) {
if(count == 3)
    jQuery('#social-bar').fadeIn(200);
}

我知道php脚本有效，因为它们回应了适量的关注者。我认为jQuery也有效，因为计数器达到3并且div社交栏显示出来。但它不会显示追随者的数量，它一直显示.....。 我不是php / html或jQuery专家。我抓住了一些片段并尝试构建它的一些东西。 为什么回声没有进入<span></span>？我希望有人可以解释和帮助我。

问候 Jonas Smets

这里编辑的版本，记得它已经在“jQuery（document）.ready（function（）{”因为有很多其他脚本（来自wordpress主题）被加载：

var count, loadCallback;

count = 0;
loadCallback = function(response, status, request) {
  // Since you use the same code in all the callbacks, you might as well
  // only declare the function once. Since we're doing that, we might as
  // well merge tz_showSocial into here as well...
  if (request.status != 200) {
    alert('Oh no! Something went wrong with the update! (HTTP '+request.status+')');
  }
  count++;
  if (count > 2) {
    jQuery('#social-bar').fadeIn(200);
  }
};

// As Dvir Azulay correctly points out, you should execute the AJAX calls
// in the ready event

  jQuery('.rss-count span').load('/includes/update-rss.php', loadCallback);
  jQuery('.twitter-count span').load('/includes/update-twitter.php', loadCallback);
  jQuery('.facebook-count span').load('/includes/update-facebook.php', loadCallback);

使用此版本的代码肯定会发生一些事情：http://www.developer.dewereldverzamelaar.net 页面加载正常但是空白？它与jQuery脚本有关，如果我把脚本拿出来，页面加载就好了。

如果您需要任何额外信息，请告诉我们。 Jonas Smets

/////////////////////////////////////////////// /// 仍然没有工作，这就是我现在所拥有的：

    /* here are some variables I've added for my script: */
    var count, loadCallback;

    count = 0;
        /*-----------------------------------------------------------------------------------

            Custom JS - All front-end jQuery

        -----------------------------------------------------------------------------------*/


        /*-----------------------------------------------------------------------------------*/
        /*  Remove JavaScript fallback class
        /*-----------------------------------------------------------------------------------*/

        jQuery('#container').removeClass('js-disabled');

        /*-----------------------------------------------------------------------------------*/
        /*  Let's get ready!
        /*-----------------------------------------------------------------------------------*/

        jQuery(document).ready(function() {
    /* here you get some other scripts the theme uses */

    /* here my script start */
    loadCallback = function(response, status, request) {
      // Since you use the same code in all the callbacks, you might as well
      // only declare the function once. Since we're doing that, we might as
      // well merge tz_showSocial into here as well...
      if (request.status != 200) {
        alert('Oh no! Something went wrong with the update! (HTTP '+request.status+')');
      }
      count++;
      if (count > 2) {
        jQuery('#social-bar').fadeIn(200);
      }
    };

    // As Dvir Azulay correctly points out, you should execute the AJAX calls
    // in the ready event

      jQuery('.rss-count span').load('http://developer.dewereldverzamelaar.net/wp-content/themes/gridlocked/includes/update-rss.php', loadCallback);
  jQuery('.twitter-count span').load('http://developer.dewereldverzamelaar.net/wp-content/themes/gridlocked/includes/update-twitter.php', loadCallback);
  jQuery('.facebook-count span').load('http://developer.dewereldverzamelaar.net/wp-content/themes/gridlocked/includes/update-facebook.php', loadCallback);


    /* again one other script the theme uses */
    /* at the end this script closes the document.ready  function closes */

现在页面仍然重新加载为空白页面。当我拿出我的jQuery代码时，一切正常。我不知道我能做些什么才能让它发挥作用。

纳斯

Oke，由于某种原因，它现在正在工作。不知道我改变了什么。对于有相同问题的人来说，这是jQuery代码可以工作，我没有改变我的php和html代码，从一开始就很好：

/* Some Variables outside the document.ready function */
var count, loadCallback;
count = 0;
/*-----------------------------------------------------------------------------------*/
/*  Let's get ready!
/*-----------------------------------------------------------------------------------*/

jQuery(document).ready(function() {


/*-----------------------------------------------------------------------------------*/
/*  Social Count Script
/*-----------------------------------------------------------------------------------*/


loadCallback = function(response, status, request) {
  // Since you use the same code in all the callbacks, you might as well
  // only declare the function once. Since we're doing that, we might as
  // well merge tz_showSocial into here as well...
  if (request.status != 200) {
    alert('Oh no! Something went wrong with the update! (HTTP '+request.status+')');
  }
  count++;
  if (count > 2) {
    jQuery('#social-bar').fadeIn(200);
  }
};

// As Dvir Azulay correctly points out, you should execute the AJAX calls
// in the ready event

  jQuery('.rss-count span').load('http://developer.dewereldverzamelaar.net/wp-content/themes/gridlocked/includes/update-feedburner.php', loadCallback);
  jQuery('.twitter-count span').load('http://developer.dewereldverzamelaar.net/wp-content/themes/gridlocked/includes/update-twitter.php', loadCallback);
  jQuery('.facebook-count span').load('http://developer.dewereldverzamelaar.net/wp-content/themes/gridlocked/includes/update-facebook.php', loadCallback);

/* Some other scripts go here, at the end the document.ready function is closed. */

Thnx全部。 Jonas Smets

2 个答案:

答案 0 :(得分：2)

在我看来，就像你在DOM完全加载之前执行jQuery代码一样，这可能包括侧边栏。

尝试将所有jQuery代码放在$(document).ready(function(){ jquery code });块中。

答案 1 :(得分：1)

  1. 您确定这些网址是否正确（在JS代码中）？我无法加载它们......
  2. 您尝试运行JS代码的页面是否也来自www.dewereldverzamelaar.com？因为如果没有，由于same origin policy。
    3. ，它绝对不会起作用

    我认为解决问题的最佳方法是在回调函数中添加一些错误处理。这很简单，因为jQuery将有助于将XMLHTTPRequest对象作为第三个参数传递给回调。

    例如，以下是我将如何编写该代码... 

    var count, loadCallback;

count = 0;
loadCallback = function(response, status, request) {
  // Since you use the same code in all the callbacks, you might as well
  // only declare the function once. Since we're doing that, we might as
  // well merge tz_showSocial into here as well...
  if (request.status != 200) {
    alert('Oh no! Something went wrong with the update! (HTTP '+request.status+')');
  }
  count++;
  if (count > 2) {
    jQuery('#social-bar').fadeIn(200);
  }
};

// As Dvir Azulay correctly points out, you should execute the AJAX calls
// in the ready event
$(document).ready(function() {
  $('.rss-count span').load('http://www.dewereldverzamelaar.com/wp-content/developer/themes/gridlocked/includes/update-rss.php', loadCallback);
  $('.twitter-count span').load('http://www.dewereldverzamelaar.com/wp-content/developer/themes/gridlocked/includes/update-twitter.php', loadCallback);
  $('.facebook-count span').load('http://www.dewereldverzamelaar.com/wp-content/developer/themes/gridlocked/includes/update-facebook.php', loadCallback);
});
相关问题
最新问题