jquery noConflict not working in php include()

Question

jquery.noConflict doesnt work for some reason when loading from an exernal file using php includes? aslo noticed that maybe some scripts arent fully loading as well?

mainfile.php

<script type="text/javascript" src="js.jquery/jquery.1.8.2.min.js"></script>

<?
include 'extrn_file.php';
?>

// end

//extrn_file.php

<script type="text/javascript" src="js.jquery/jquery.1.3.2.min.js"></script>
<script> $jq132 = jQuery.noConflict(true); </script>
<script type="text/javascript" src="js/animate.js"></script>

<script type="text/javascript">
execute_skills_doc();

function execute_skills_doc(){
$jq132(document).ready(function() {
alert("yes");//nothing happens
});

}

//end

Including two different versions of jQuery will cause all sorts of havoc! — adeneo
– adeneo, Commented Oct 28, 2012 at 19:47
trying to fork some code, which only works in an older version of jQuery :( — fhonics
– fhonics, Commented Oct 28, 2012 at 19:50
It doesn't make any sense. noConflict is battle proven and is working fine, PHP include or not is irrelevant. Something in your code is incorrect. The problem is not in the pasted code. Try to put an online version of it. (btw - my guess - once you put that online version on, you'll find the typo). — JAR.JAR.beans
– JAR.JAR.beans, Commented Oct 28, 2012 at 19:58
this comment needs a lot more research: "aslo noticed that maybe some scripts arent fully loading as well". Could be some failing php not outputing the whole page?? — charlietfl
– charlietfl, Commented Oct 28, 2012 at 20:24

doublesharp · Accepted Answer · 2012-10-28 23:39:09Z

If you want to use multiple version of jQuery on the same page you have to noConflict() the first before you load the second. Since your PHP include just pulls the contents of the two files together, you are ending up with:

<script type="text/javascript" src="js.jquery/jquery.1.8.2.min.js"></script>
<script type="text/javascript" src="js.jquery/jquery.1.3.2.min.js"></script>
<script> $jq132 = jQuery.noConflict(true); </script>

What you really want would be:

<script type="text/javascript" src="js.jquery/jquery.1.8.2.min.js"></script>
<script type="text/javascript"> 
    // set version 1.8.2 to variable and remove globals
    $jq182 = jQuery.noConflict(true); 
</script>
<script type="text/javascript" src="js.jquery/jquery.1.3.2.min.js"></script>
<script type="text/javascript">
    // return jQuery version
    function getVersion(jq){
        return jq().jquery;
    }

    // set version 1.3.2 to variable and remove globals
    $jq132 = jQuery.noConflict(true); 
    // reset jQuery variable to 1.8.2
    jQuery = $jq182.noConflict();

    // your code that uses $ variable and jQuery 1.3.2
    (function($){
        $(document).ready(function(){ alert('Using $ v'+getVersion($)+'!'); });
    })($jq132);

    // your code that uses $ variable and jQuery 1.8.2
    (function($){
        $(document).ready(function(){ alert('Using $ v'+getVersion($)+'!'); });
    })($jq182);

    // your code that uses jQuery variable and jQuery 1.8.2
    jQuery(document).ready(function(){ alert('Using jQuery v'+getVersion(jQuery)+'!'); });

</script>

At this point you will have version 1.8.2 loaded into the $jq182 and jQuery variables and 1.3.2 loaded into the $jq132 variable. The code above will alert the variable used and version of each. You can see an example using the Google API hosted libraries here: http://jsfiddle.net/2kX3E/

Collectives™ on Stack Overflow

jquery noConflict not working in php include()

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related