0

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>

1 Answer 1

Reset to default
1

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/

1
  • i have to call a function and SDK for my ADD, that SDK gives error when i use latest jquery file. where to use jQuery.noConflict( true ); this is my function requestAdHandler(); im affraid this wont help me or you can explain according to my code i shared anyway thanks for trying helping me out!
    – zeeshan
    Commented Apr 27, 2017 at 13:56

Not the answer you're looking for? Browse other questions tagged or ask your own question.