Chat Plugin on Local Host Error...

Hi guys, @Paul I'm just testing the new upgrade to 'Chat' and have installed it locally on my dev box.

When I try to access a page with a new/existing 'chat' window present I just get an empty chat box and nothing else...

Looking at Chrome's error console, the following error is present on the screen:

Uncaught ReferenceError: wpmudev_chat_localized is not defined

Any ideas. Obviously, I would like to test locally first before I attempt to go live with this...

Thanks
Rob.

  • Paul
    • The Green Incsub

    @godrob,

    That localized variable is set via you theme's wp_footer() call. As are most of the chat JS libraries.

    Ensure your theme is calling the WP template function wp_footer() OR try switching to the default TwentyTwelve theme to verify.

  • godrob
    • Site Builder, Child of Zeus

    Hi @paul, firstly apologies for me letting this slide. The good news is that I'm now able to use the chat plugin locally. It turns out the problem was with WP Minify. If I disabled this plugin then Chat displays as intended - so that's good.

    As I'm still developing locally, I want to make sure that Chat works with WP Minify on a live server. Can you, or somebody else please verify this?

    Thanks, and sorry for my late reply...

    All the best
    Rob.

  • Paul
    • The Green Incsub

    @godrob,

    As I'm still developing locally, I want to make sure that Chat works with WP Minify on a live server. Can you, or somebody else please verify this?

    I can probably also verify that chat as well as many other plugins have an issue with the various WPMinify plugins out there. Including the JS minify option with cache plugins like W3 Total Cache.

    The issue is not the plugin like chat but that the minify plugins don't work well with plugin that use the WordPress function wp_localize_script() http://codex.wordpress.org/Function_Reference/wp_localize_script which is a way for plugins to pass variables to the respective JS files. I've tried a number of things and all fail when enabling WPMinify.

  • godrob
    • Site Builder, Child of Zeus

    Thanks for the quick reply @Paul

    You're spot-on!!! I've just tested again using the default 2013 Theme and it's fine. Any ideas how I can get this to work with my theme of choice?

    What am I looking for in the CSS to stop the conflict?

    Thanks for your help

    Rob

  • godrob
    • Site Builder, Child of Zeus

    @Paul, I guess I'll have to play with that then... Odd though, because on earlier versions of Chat I was able to run W3TC and WP Minify without problems to Chat.

    To be honest all three plugins are crucial to my site, so hopefully, I'll be able to exclude the problematic JS somehow...

    Thanks
    Rob

  • Paul
    • The Green Incsub

    @godrob

    Odd though, because on earlier versions of Chat I was able

    Meaning which version?

    To be honest all three plugins are crucial to my site, so hopefully, I'll be able to exclude the problematic JS somehow...

    Understood. You can enable W3TC but you need to configure the login to exclude loading the JS file for chat. Someone else posted a few weeks ago about how to do that. I've not tried it directly.

  • Paul
    • The Green Incsub

    @godrob

    What am I looking for in the CSS to stop the conflict?

    I generally use Firefox and Firebug. Or you can use Chrome and Firebug.

    Basically you want to check the element and see what other CSS rules are on place that might be setting the width for some reason. I've worked on getting the chat CSS to by as specific as possible. All CSS rules are prefixed with wpmudev-chat... so this is probably some theme level CSS setting something like ul li { width: XXXpx; } or some percentage.

    If you do find something let me know and I'll see if I need to include that in the chat plugin CSS in future. I've seen thing like ing {} rules that would for example effect the chat avatar positioning and border, etc. So I try and add those when I can.

  • Paul
    • The Green Incsub

    @godrob,

    Just found something and maybe it is the Chat script. Get your development site setup. Enable W3TC and minify as you like it. go to your browser and enable firebug which will show the console. Then load a page where chat is to be displayed. I'm loading a Page where I have the chat shortcode setup.

    When I have my W3TC setup to minify things I see this message in the Firebug console. (see image)

    and I have a fix but want to first confirm you are seeing the same error.

  • godrob
    • Site Builder, Child of Zeus

    Hi @paul, thanks for looking into this. Not sure if it is relevant or not, but my site is built on Wordpress/Buddypress (both latest versions).

    Anyway, see below images. The first one is taken from Chrome's console and the second from Firefox.

    I'm actually using W3TC for caching (but not minimizing...) as I had issues before with the inbuilt Minify that it provides out the box. So instead I use WP Minify which was working a treat.

    Hope this helps?

    Rob

  • Paul
    • The Green Incsub

    @godrob,

    Ok. Perfect. So try this just to confirm the same fix I tried. I want you to edit one of the chat JS files.

    In the chat plugin go into the /js/ folder. There you will find the main JS file, wpmudev-chat.js

    Edit that file and go to line 2493. You will see the single line

    jQuery(document).ready(wpmudev_chat.init());

    Comment that line your with // then add the following below it.

    jQuery(document).ready(function() {
    	wpmudev_chat.init();
    });

    On my installation the JS then started working. Be sure t clear your W3TC page cache.

  • Paul
    • The Green Incsub

    @godrob,

    Excellent! I'll include that in the next fix.

    Though it is sort of strange. Technically, according to the jQuery website these should be exactly the same.

    Marking this as resolved. Thanks for helping verify and helping to identify the issue.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.