WordPress.org

Ready to get started?Download WordPress

Forums

Conflict of javascript files throwing Internet Explorer into a spin (7 posts)

  1. Freelancealot
    Member
    Posted 3 years ago #

    Hi,

    Posting here as I'm hoping someone will be able to help me with this js conflict.

    I have hard-coded a JWplayer video to open in a JWbox lightbox on four pages of a WordPress site. On these pages, there is an error warning showing in Internet Explorer that says there is a conflict with another script loaded by a plugin - Mtouch-quiz - and IE hangs the page so the user can't get to watch the video in the lightbox.

    ---------------
    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; GTB6.6; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET CLR 3.0.04506; Media Center PC 5.0; SLCC1; .NET4.0C)
    Timestamp: Mon, 21 Mar 2011 17:42:23 UTC

    Message: Object doesn't support this property or method
    Line: 108
    Char: 3
    Code: 0
    URI: http://www.mysite.com/wp-content/plugins/mtouch-quiz/script.js?ver=2.2.2
    -------------------------

    Again, I've hard-coded the Lightbox js files to appear in the header of just those four pages, so I added this in the header.php of the WP theme:

    <?php wp_head(); ?>

    <?php 3
    if (is_page(array('page1', 'page2', 'page3', 'page4'))) {

    echo '<script type="text/javascript" src="http://www.mysite.com/jwplayer/jwbox/jquery.js"></script>';
    echo '<script type="text/javascript" src="http://www.mysite.com/jwplayer/jwbox/jquery.jwbox.js"></script>';
    echo '<link rel="stylesheet" type="text/css" href="http://www.mysite.com/jwplayer/jwbox/jwbox.css" />';
    }

    ?>

    This puts the JWBox links to the js files below those of the Mtouch-quiz plugin, which appears higher up in header and looks like this

    <script type='text/javascript' src='http://www.mysite.com/wp-content/plugins/mtouch-quiz/script.js?ver=2.2.2'></script>
    <script type='text/javascript' src='http://www.mysite.com/wp-content/plugins/mtouch-quiz/scrollable.min.js?ver=2.2.2'></script>

    Is there anyway to get the JWbox scripts to play nice with the mtouch-quiz plugin?

    The other way would be to strip out the function that adds the js links to the header in the Mtouch-quiz files, and hard-code them in to just appear on the pages where the Mtouch quiz is needed. The quiz is not actually used on the pages where the js conflict is happening with the lightbox, so removing the mtouch js links from those pages will solve my issue.

    I just don't know where to find that function within the Mtouch-quiz plugin files.

    I need to get this fixed ASAP, as the site is due to launch next Monday.

    I can't really post a link to the site as it's not public yet, but if you PM me or contact me at cyberguin/@/yahoo.co.uk I can send you a link.

    Cheers,
    Tracy

  2. Freelancealot
    Member
    Posted 3 years ago #

    Hi again,

    Miachel, the developer of the Mtouch-quiz script has pointed me in the right direction. The relevant function is in the mtouchquiz.php file and looks like this:

    add_action('init', 'mtq_enqueue_stuff');
    
    function mtq_enqueue_stuff() {
    
    	$mtq_use_min=false;
    
    	//$mtq_use_min=false;
    
    	if ( $mtq_use_min ) {
    
    		$mtq_StyleUrl = WP_PLUGIN_URL . '/mtouch-quiz/style.min.css';
    
    		$mtq_StyleFile = WP_PLUGIN_DIR . '/mtouch-quiz/style.min.css';
    
    	} else {
    
    		$mtq_StyleUrl = WP_PLUGIN_URL . '/mtouch-quiz/style.css';
    
    		$mtq_StyleFile = WP_PLUGIN_DIR . '/mtouch-quiz/style.css';
    
    	}
    
    	 if ( file_exists($mtq_StyleFile)) {
    
    		wp_register_style('mtq_StyleSheets', $mtq_StyleUrl,false,mtq_VERSION);
    
    		wp_enqueue_style( 'mtq_StyleSheets');
    
         }
    
    	$mtq_proofread_StyleUrl = WP_PLUGIN_URL . '/mtouch-quiz/proofread.min.css';
    
        $mtq_proofread_StyleFile = WP_PLUGIN_DIR . '/mtouch-quiz/proofread.min.css';
    
    	wp_enqueue_script("jquery");
    
    	if ( $mtq_use_min ) {
    
    		wp_enqueue_script('mtq_script', WP_CONTENT_URL . '/plugins/mtouch-quiz/script.min.js',array('jquery'),mtq_VERSION,false);
    
    	} else {
    
    		wp_enqueue_script('mtq_script', WP_CONTENT_URL . '/plugins/mtouch-quiz/script.js',array('jquery'),mtq_VERSION,false);
    
    	}
    
    	//if (! get_option('mtouchquiz_skiploadjquerytools'))  {
    
    		wp_enqueue_script('mtq_scrollable', WP_CONTENT_URL . '/plugins/mtouch-quiz/scrollable.min.js',array('jquery'),mtq_VERSION,false);
    
    	//}
    
    	//wp_enqueue_script('jquerytools_full','http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js','1.2.5',false);
    
    }

    The only think I need to change is the part that adds the js files to the header.

    Can anyone let me know the best way to add:

    if (is_page(array('quiz1', 'quiz2', 'quiz3', 'quiz4'))) { blah
    }

    for the wp_enqueue_script("jquery");

    so it only gets printed on those four pages?

    Thanks in advance,

    Tracy

           

  3. Freelancealot
    Member
    Posted 3 years ago #

    HELP! I'm now getting

    Warning: Cannot modify header information - headers already sent by (output started at /home/maddocks/public_html/wp-content/plugins/mtouch-quiz/mtouchquiz.php:25) in /home/maddocks/public_html/wp-includes/pluggable.php on line 890

    All I did was comment out

    wp_enqueue_script("jquery");
    
    	if ( $mtq_use_min ) {
    
    		wp_enqueue_script('mtq_script', WP_CONTENT_URL . '/plugins/mtouch-quiz/script.min.js',array('jquery'),mtq_VERSION,false);
    
    	} else {
    
    		wp_enqueue_script('mtq_script', WP_CONTENT_URL . '/plugins/mtouch-quiz/script.js',array('jquery'),mtq_VERSION,false);
    
    	}
    
    	//if (! get_option('mtouchquiz_skiploadjquerytools'))  {
    
    		wp_enqueue_script('mtq_scrollable', WP_CONTENT_URL . '/plugins/mtouch-quiz/scrollable.min.js',array('jquery'),mtq_VERSION,false);
    
    	//}
    
    	//wp_enqueue_script('jquerytools_full','http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js','1.2.5',false);

    on mtouchquiz.php

    and added

    <?php
    if (is_page(array('quiz1', 'quiz2', 'quiz3', 'quiz4'))) { 
    
            echo '<script type='text/javascript' src='http://www.mediatrainingonline.com/wp-content/plugins/mtouch-quiz/script.js?ver=2.2.2'></script>';
            echo '<script type='text/javascript' src='">http://www.mediatrainingonline.com/wp-content/plugins/mtouch-quiz/scrollable.min.js?ver=2.2.2’></script> ';
    } 
    
    ?>

    to the header.php in the theme. This didn't work, so I took out the above from the header.php and reloaded the original mtouchquiz.php file and now the WP pages won't load at all,

    I get warning about headers...

    I really need help here as it should all be back to what it was before I made the above changes.

    Any help?

    Cheers,

    Tracy

  4. Freelancealot
    Member
    Posted 3 years ago #

    Okay, panic over. I just downloaded the Mtouch plugin and reloaded all the files and the site is back. Phew.

    Still need a resolution to the original conflict of javascript issue... back to square one.

    Cheers,

    Tracy

  5. gmichaelguy
    Member
    Posted 3 years ago #

    It's probably best to not start editing code unless you know what the code does or you are willing to live with unintended consequences without panic.

    Sorry I don't know what the issue is. I've seen this a couple times before and each time it was due to the other plugin extending the capabilities of jquery in a way that messed up with my plugin's use of it. Glad your blog is back.

  6. Freelancealot
    Member
    Posted 3 years ago #

    Hi Michael,

    I just can't understand how to use the code in the link you gave me -- http://beerpla.net/2010/01/13/wordpress-plugin-development-how-to-include-css-and-javascript-conditionally-and-only-when-needed-by-the-posts/

    It's way over my head.

    I seriously need to restrict the Mtouch-quiz plugin header stuff to only go on the four pages where it's needed.

    Does anyone know if it's possible to use

    if ( is_page(array(1, 2, 3, 4)) )

    anywhere before the following bit of code to restrict the pages it puts the header stuff in?

    wp_enqueue_script("jquery");
    
    	if ( $mtq_use_min ) {
    
    		wp_enqueue_script('mtq_script', WP_CONTENT_URL . '/plugins/mtouch-quiz/script.min.js',array('jquery'),mtq_VERSION,false);
    
    	} else {
    
    		wp_enqueue_script('mtq_script', WP_CONTENT_URL . '/plugins/mtouch-quiz/script.js',array('jquery'),mtq_VERSION,false);
    
    	}
    
    	//if (! get_option('mtouchquiz_skiploadjquerytools'))  {
    
    		wp_enqueue_script('mtq_scrollable', WP_CONTENT_URL . '/plugins/mtouch-quiz/scrollable.min.js',array('jquery'),mtq_VERSION,false);
    
    	//}
    
    	//wp_enqueue_script('jquerytools_full','http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js','1.2.5',false);

    I'm a bit worried about giving it a go given my last delve into the code. And I'm not familiar with the wp_enqueue method.

    Cheers,

    Tracy

  7. Freelancealot
    Member
    Posted 3 years ago #

    Okay, came across this useful post on Position-relative.com

    I added the following to my theme's custom function.php file:

    add_action('wp_print_scripts', 'my_deregister_javascript', 100 );
    function my_deregister_javascript() {
    if (!is_page(array('quiz1','quiz2','quiz3','quiz4')) ) {
    wp_deregister_script('mtq_script');
    wp_deregister_script('mtq_scrollable');
    }
    }

    And it works; the Mtouch-quiz files only appear in the header of those four pages. So that's sorted.

    However, my original problem is still there - aarrgghhh.

    When you click the link to the page in IE8 it says there is one file loading and it just keeps loading. When you click the image to load the video in the JWBox lightbox, the player does not load completely.

    When I use the JWPlayer embed code with both <object> and <embed>, the the lightbox opens and the video player loads fully and plays.

    But, of course, if I use <embed> code the page does not validate as transitional XHTML, which I really need it to do.

    So perhaps not a javascript problem, but an embedding issue with lightbox.

    Whey the video player is coded directly in the page, using just the <object> method, the page validates and the player works in IE8.

    So logic tells me it's a conflict with the JWBox script and JWPlayer <object> embed method in IE8.

    Any ideas?

    The link to the page that IE8 is having a problem with is http://www.//mediatrainingonline.com/complete-media-confidence (please remove the // before the domain name, I don't want to use a hyperlink sorry).

    IE8 will play this one, but the page will not validate.

    The version with the <embed> tag included is at http://www.//mediatrainingonline.com/use-the-media-to-build-your-business

    Cheers,

    Tracy

Topic Closed

This topic has been closed to new replies.

About this Topic