CODEWITHSUNDEEP
jquery
zeeshan
zeeshan

Reputation: 31

jQuery older version clash with new version

I'm using Bootstrap 3 for that I require jQuery 1.9.1.

For all the ajax calls and jQuery selectors are set on the latest version of jQuery.

But in other hand I'm using advertisement that requires an older version of jQuery like 1.2 and Bootstrap does not support it.

My function that works on all new jQuery and plays the song and updates some divs and attributes. In same function I have to call the add code that supports older version of jQuery.

But the clash is coming in that if I use newer version all Bootstrap and ajax works fine but and ADD does not work and if I use older version ADD works fine everything else is not.

Showing code below. I need a solution or fix that would be great if anyone can help me out.

function loadVideo(ID,myFile, title, image, views, fav, buyurl) {

    //THIS IS MY ADD FUNCTION
    requestAdHandler();

    //ALL OTHER CODE
    setTimeout(function(){mediaElement.play();}, 9000);
    $(".player-container").css("display", "block");
    $("#myElement").css("display", "block");
    jwplayer("myElement").setup({
      file: myFile,
      width: '100%',
      height: 30,

      skin: {
       name: "mySkin",
       active: "#4FBFFB",
       inactive: "#ccc",
       background: "black"
    }
    });

    $('.song-title').html(title);
    $('#player-img').attr('src','/audio/images/'+image);
    $('#player-views').html(views);
    $('#player-fav').html(fav);
    $('#player-buy').attr('href', buyurl);
    $('#player-twitter').attr('href', 'http://twitter.com/home?status='+title+'+http://pavementchasers.com/songs/'+ID);
    $('#player-facebook').attr('href', 'http://www.facebook.com/share.php?u=http://pavementchasers.com/songs/'+ID+'&title='+title);

    jwplayer().load([{
      file: myFile
    }]);
    jwplayer().play();

    //AJAX View Update
    $.ajax({
    method: 'POST', // Type of response and matches what we said in the route
    url: '/viewupdate/'+ID, // This is the url we gave in the route
    data: {'id' : ID, '_token': '{{ csrf_token() }}'}, // a JSON object to send back
    success: function(response){ // What to do if we succeed
        console.log(response.views); 
        $('#view-'+ID).html(response.views);
    },
    error: function(jqXHR, textStatus, errorThrown) { // What to do if we fail
        console.log(JSON.stringify(jqXHR));
        console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
    }
    });


  };
</script>

Upvotes: 0

Views: 391

Answers (1)

Korgrue
Korgrue

Reputation: 3478

Have you tried using a newer version for both? Most of the functionality from older versions is included in newer versions.

Alternately, you can use the jQuery no conflict method to map the jQuery namespace on one of your versions to a different namespace.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.noConflict demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div id="log">
  <h3>Before $.noConflict(true)</h3>
</div>
<script src="https://code.jquery.com/jquery-1.6.2.js"></script>

<script>
var $log = $( "#log" );

$log.append( "2nd loaded jQuery version ($): " + $.fn.jquery + "<br>" );

// Restore globally scoped jQuery variables to the first version loaded
// (the newer version)

jq162 = jQuery.noConflict( true );

$log.append( "<h3>After $.noConflict(true)</h3>" );
$log.append( "1st loaded jQuery version ($): " + $.fn.jquery + "<br>" );
$log.append( "2nd loaded jQuery version (jq162): " + jq162.fn.jquery + "<br>" );
</script>

</body>
</html>

https://api.jquery.com/jquery.noconflict/

Upvotes: 1

Related Questions