Trying to resolve a jQuery conflict

Question

I am working with some web code that is outputted by an application I have little control over at the start it outputs

<script type="text/javascript" src="wpscripts/jquery.js"></script>
<script type="text/javascript" src="wpscripts/jquery.wputils.js"></script>
<script type="text/javascript" src="wpscripts/jquery.validate.min.js"></script>
<script type="text/javascript">
  wpRedirectMobile('http://www.--.com/m.results.php',0);
  $(document).ready(function() {
  $("a.ActiveButton").bind({ mousedown:function(){if ( $(this).attr('disabled') === undefined ) $(this).addClass('Activated');}, mouseleave:function(){ if ( $(this).attr('disabled') === undefined ) $(this).removeClass('Activated');}, mouseup:function(){ if ( $(this).attr('disabled') === undefined ) $(this).removeClass('Activated');}});
  $("#form_2").validate({ onkeyup: false, showErrors: function(errorMap, errorList) { if (errorList.length) alert(errorList[0].message); }, onclick: false, rules: { 'Property_Price': { number: true } , 'Deposit': { number: true } , 'Duration': { number: true } , 'InterestRate': { number: true }  }, onfocusout: false, messages: { 'Property_Price': { number: "Please enter the property purchase price." } , 'Deposit': { number: "Please enter your deposit amount or 0 if there is no deposit." } , 'Duration': { number: "Please enter the duration of the mortgage." } , 'InterestRate': { number: "Please enter the mortgage interest rate." }  } });
  $('#btn_4').click( function(){validate_form_2( form_2 )});
  });
</script>

But near the middle I have to add the following code;

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="scripts.js"></script>

<!-- Used to display the finger pointer image if the number of results pages exceeds 14, for mobile devices -->
<script type="text/javascript">
$(document).ready(function() {
if (<?php echo $totalpage?> > 14) {
    $('#fpointer').show();
}
});
</script>

As such the second block of code no longer works because a jquery conflict arises. If I was able to change the first block of code I could use no conflict to resolve the issue but I can't access that. If I remove the second call to jquery it works but I need that second call because on other pages the app doesn't include the first block of code so jquery isn't included.

Since no conflict only works if you add it to the first call to jquery I am stuck, is there a way to resolve this conflict by manipulating just the second block of code.

Answer 1

You can test for jQuery already existing and only load the second one if it doesn't:

<script>
    if(!window.jQuery) {
        document.write('<script type="text/javascript" src="jquery-1.7.1.min.js"><\/script>');
    }
</script>
<script type="text/javascript" src="scripts.js"></script>

I'm not a fan of using document.write but I think it is required to make sure the script is inserted before the rest of your code tries to run.