Soundplayer not working with an AJAX-ed Wordpress Theme

Chris Bracco's Avatar

Chris Bracco

26 Oct, 2010 09:51 PM

Hey guys!

This is Chris Bracco, the writer of Tight Mix Blog. I've sung your praises and reached out to you guys several times before. Today, I'm trying to integrate your Sound Player into an artist's website, and I've hit a snag, which sucks because the artist really loves your player, and so do I.

:)

I'm not a programmer by any means, so I'm not really sure what is causing the issue here. However, I'm also not a novice (or idiot lol), and I can understand and navigate through code just fine.

I'll do my best to describe my problem.

I created a Wordpress theme from scratch, and applied the following AJAX functionality (originally provided by Chris Coyier) to it:

`$(function() {

$(".home li.home").removeClass("home").addClass("current_page_item");
$("#inside").append("<img src='/images/ajax-loader.gif' id='ajax-loader' />");

var $mainContent = $("#main"),
    URL = '',
    siteURL = "http://" + top.location.host.toString(),
    $internalLinks = $("a[href^='"+siteURL+"']"),
    hash = window.location.hash,
    $ajaxSpinner = $("#ajax-loader"),
    $el, $allLinks = $("a");

function hashizeLinks() {
    $("a[href^='"+siteURL+"']").each(function() {
        $el = $(this);

        // Hack for IE, which seemed to apply the hash tag to the link weird
        if ($.browser.msie) {
            $el.attr("href", "#/" + this.pathname)
            .attr("rel", "internal");
        } else {
            $el.attr("href", "#" + this.pathname)
             .attr("rel", "internal");
        }
    });
};

hashizeLinks();  

$("a[rel='internal']").live("click", function() {
    $ajaxSpinner.fadeIn();
    $mainContent.animate({ opacity: "0.1" });
    $el = $(this);
    $(".current_page_item").removeClass("current_page_item");
    $allLinks.removeClass("current_link");
    URL = $el.attr("href").substring(1);
    URL = URL + " #inside";
    $mainContent.load(URL, function() {
        $el.addClass("current_link").parent().addClass("current_page_item");
        $ajaxSpinner.fadeOut();
        $mainContent.animate({ opacity: "1" });
        hashizeLinks();   
    });
});

$("#searchform").submit(function(e) {
    $ajaxSpinner.fadeIn();
    $mainContent.animate({ opacity: "0.1" });
    $el = $(this);
    $(".current_page_item").removeClass("current_page_item");
    $allLinks.removeClass("current_link");
    URL = "/?s=" + $("#s").val() + " #inside";
    $mainContent.load(URL, function() {
        $ajaxSpinner.fadeOut();
        $mainContent.animate({ opacity: "1" });
        hashizeLinks();   
    });
    e.preventDefault();
});

if ((hash) && (hash != "#/")) {
    $("a[href*='"+hash+"']").trigger("click");
}

});`

I've placed the Soundplayer inside a jQuery collapsible div located outside of the "AJAX-ed" area, so whenever the user navigates to a different page, the Soundplayer will play continuously. Here is the code I used for the jQuery collapsible div:

`$(document).ready(function(){

//Hide (Collapse) the toggle containers on load
$("#music-player").hide();

$("a.launchplayer").click(function(){
  $("#music-player").slideToggle("slow");
  $(this).toggleClass("active");
});
return false;

});`

When the AJAX script is enabled, along with Soundplayer and its jQuery collapsible div script, it starts to get all screwy. The AJAX script appears to work at first, because it fades out the content & adds the correct hash tag to the URL. However, after that, the new page content never loads, and the AJAX-ed area remains blank. Also, when you try to play a song from Soundplayer, it does not start playing. You can switch between tracks, but once you hit play, it doesn't play the audio.

When the AJAX javascript is disabled, the Sound Player works just fine inside the collapsible div, which makes me think that there is some sort of weird conflict going on between AJAX and Soundplayer (or MooTools)?

I really could use some help here, if I can get this resolved then I'm well on my way to creating a killer website for this artist. And it will definitely warrant a donation from me. :)

Thanks so much! I look forward to what CASHMusic.org will bring to the table next.

Chris

  1. Support Staff 1 Posted by Jesse von Doom on 26 Oct, 2010 10:06 PM

    Jesse von Doom's Avatar

    Hi Chris,

    Any chance you could check out the specific error message from Firebug
    (FF) or the Javascript Console in Chrome/Safari? It sounds like
    there's some conflict in the AJAX loader script and the player, but
    I'm not sure what it is specifically. MooTools and jQuery shouldn't be
    conflicting here, so maybe it's something more like a naming issue. If
    I could see the actual error it'd help.

    And it works when you do the jQuery div + SoundPlayer, but what about
    removing MooTools and the CASH stuff...does everything else work?

    jesse

  2. 2 Posted by Chris Bracco on 27 Oct, 2010 12:37 AM

    Chris Bracco's Avatar

    Jesse,

    Thanks so much for the quick reply!

    I am not getting any errors at all, I tried looking with the Chrome inspector and with Firebug. The website behaves the same way in both browsers.

    I'd upload it to a subfolder on a web server so you could see what happens, but that will definitely cause some naming issues with the AJAX. I am currently working locally.

    When I remove the MooTools and CASH stuff, the AJAX script does function correctly.

    I've been at this all day and I'm really stumped. I have the feeling there are naming issues. GAH! So frustrated. Any help is insanely appreciated.

    Thanks!
    Chris

  3. Support Staff 3 Posted by Jesse von Doom on 27 Oct, 2010 03:10 AM

    Jesse von Doom's Avatar

    Hey Chris,

    I'm pretty backlogged right now and fighting through. But try this as
    a quick fix and I'll look at the script for real tomorrow afternoon...

    The AJAX script looks short and self contained. I don't think any of
    the classnames interfere, so try renaming the variables in the AJAX
    script itself. It's an easy replace-all and you can at least see if
    that clears it up. (So grab 'var' and rename to 'varxxx' — you can
    always strip out all the 'xxx' later...)

    I know it's not an answer, but I'll take a deeper look tomorrow.

    j

  4. 4 Posted by Jesse on 27 Oct, 2010 12:00 PM

    Jesse's Avatar

    Hey Jesse,

    I tried renaming all of the variables, and it is still behaving the same exact way. No errors in the console, the page content never gets loaded, and Soundplayer won't play.

    I look forward to your insight this afternoon, and thanks for all of your help so far!

    Chris

  5. Support Staff 5 Posted by Jesse von Doom on 29 Oct, 2010 03:39 AM

    Jesse von Doom's Avatar

    Hey Chris,

    I've looked over the script a couple times but don't see the specific issue. I'm sorry. The next step is probably commenting out code blocks to find the specific lines that are messing things up and going from there.

    There's actually a little bit of AJAX content-swapping built into Flower, but undocumented. It swaps out the content quickly/simply, but without the nice loading wheel or the changes to the URL in the address bar, so it'd require a little more coding to get up and going that way.

    Sorry I cant' be more help!

  6. 6 Posted by Chris Bracco on 29 Oct, 2010 12:04 PM

    Chris Bracco's Avatar

    Jesse,

    I'll try commenting out blocks. Thanks you for at least trying for me! If I can't figure out the specific lines that are problematic, then it will up to the artist whether or not he wants the AJAX-ed pagination or the Cashmusic Soundplayer.

    Thanks again. If I figure out the problem lines of code I'll post them here.

    Chris

  7. Jesse von Doom closed this discussion on 17 Nov, 2010 05:27 AM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac