Passing PHP variables into multiple <span> tags with Javascript

I've been looking around for a similar question, but I couldn't find one. I'm trying to push the number of twitter/facebook/rss followers to a <span>....</span> in my sidebar.

To get the numbers I use some php scripts. In a separate file I have the javascript and in my sidebar.php file I've got the <span>....</span>. I've tried to debug everything but I can't find my mistake.

In the sidebar I use:

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

My php files to get my twitter followers (for example) looks like this:

<?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]";   
?>

Last you have the jQuery script:

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);
}

I know the php scripts work because they echo the right amount of followers. I think the jQuery also works because the counter reaches 3 and the div social-bar shows up. But it won't show the amount of followers, it keeps showing the ..... . I'm not a php/html or jQuery specialist. I've grabbed some snippets and tried to build something of it. How come the echo doesn't go to the <span></span>? I hope someone can explain and help me.

Greetings Jonas Smets

Here the edited version, remember its already in a "jQuery(document).ready(function() {" because there are a lot of other scripts (from the wordpress theme) being loaded:

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);

With this version of the code there is definitely something happening: http://www.developer.dewereldverzamelaar.net The page loads fine but goes blank? It has something to do with the jQuery script, if I take the script out the page loads fine.

If you need any extra info, please let me know. Jonas Smets

////////////////////////////////////////////////// Still not working, this is what I have right now:

    /* 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 */

Right now the page still reloads to a blank one. When I take out my jQuery code everything works fine again. I have no idea what I could do to make it work.

Jonas

Oke, for some reason its working now. Don't know what i've changed. For people having the same question, this is the jQuery code that works, I didn't change my php and html code, they were fine from the start:

/* 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 all. Jonas Smets

Seems to me like you are executing the jQuery code before the DOM is fully loaded, and that might include the sidebars.

Try placing all your jQuery code inside a $(document).ready(function(){ jquery code }); block.

1. Are you sure those URL's are correct (in the JS code)? I can't load them...
2. Is the page you are trying to run the JS code also served from www.dewereldverzamelaar.com? Because if not, it absolutely will not work, because of the same origin policy.

I think the best way to work out what the problem is would be to add some error handling in your callback function. This is fairly simple, since jQuery will helpfully pass the XMLHTTPRequest object into the callback as the third parameter.

For example, here is how I would write that code...

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);
});