jQuery libraries and scripts conflicting

Question

I have 3 scripts which includes a responsive menu, image slider and also a date picker but something is stopping them from working. I've tried removing or updating libraries and I am able to get 1 or 2 of the scripts working but not all of them.

Is there anything to rectify the following code?

Thanks.

<head>
<title>
<?php echo $bsiCore->config['conf_apartment_name'];?>
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- Google fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Pontano+Sans' rel='stylesheet'     type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>
<!-- end google fonts -->
<!--nav-->




<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/craftyslide.css" />
<link href="js/menu/superfish.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"    src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="js/craftyslide.min.js"></script>
<link href="web/css/style.css" rel="stylesheet" type="text/css" media="all" />
<script>
$(document).ready(function(){   
   $("#slideshow").craftyslide({
      'width': 600,
      'height': 350,
      'pagination': false,
      'fadetime': 1000,
      'delay': 5000
    });
});
</script> 
<script type="text/javascript" src="js/menu/superfish.js"></script>

<link rel="stylesheet" type="text/css" href="css/custom-theme/jquery-ui-1.8.22.custom.css" />
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script src="web/js/jquery.min.js"></script>



<?php if($bsiCore->config['conf_rental_type']==1){ ?>
<script type="text/javascript">

$(document).ready(function(){   
$.datepicker.setDefaults({ dateFormat: '<?php echo $bsiCore->config['conf_dateformat'];?>' });  
$( "#txtFromDate, #txtToDate" ).datepicker({
        minDate: 0,
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 2,
        onSelect: function( selectedDate ) {
            if(this.id == 'txtFromDate'){
              var dateMin = $('#txtFromDate').datepicker("getDate");
              var rMin = new Date(dateMin.getFullYear(), dateMin.getMonth(),dateMin.getDate() +         <?php echo $bsiCore->config['conf_minimum_stay'];?>);
              var rMax = new Date(dateMin.getFullYear(), dateMin.getMonth(),dateMin.getDate() +         <?php echo $bsiCore->config['conf_maximum_stay'];?>);
              $('#txtToDate').datepicker("option","minDate",rMin);
              $('#txtToDate').datepicker("option","maxDate",rMax);                    
            }

        }
    });


$("#datepickerImage").click(function() { 
$("#txtFromDate").datepicker("show");
});
$("#datepickerImage1").click(function() { 
$("#txtToDate").datepicker("show");
});

$('#btn_appmt_search').click(function() {       
    if($('#txtFromDate').val()==""){
        alert('Please Select Check In Date.');
        return false;
    }else if($('#txtToDate').val()==""){
        alert('Please Select Check Out Date.');
        return false;
    } else {
        return true;
    }     
}); 
});
</script>
<?php } elseif($bsiCore->config['conf_rental_type']==2){ ?>
<script type="text/javascript">
$(function() {
$.datepicker.setDefaults({ dateFormat: '<?php echo $bsiCore->config['conf_dateformat'];?>',  minDate: new Date(), numberOfMonths: 2 });
$("#txtFromDate1").datepicker(

    { beforeShowDay: function(day) {
        var day = day.getDay();
        if (day == <?php echo $bsiCore->config['conf_week_checkin_day'];?> ) {
            return [true, "somecssclass"]
        } else {
            return [false, "someothercssclass"]
        }
    }
    });
    $("#datepickerImage").click(function() { 
        $("#txtFromDate1").datepicker("show");
    });

    $('#btn_appmt_search').click(function() {       
        if($('#txtFromDate1').val()==""){
            alert('Please Select Check In Date.');
            return false;
        } else {
            return true;
        }     
    });
});
</script>
<?php } elseif($bsiCore->config['conf_rental_type']==3){ ?>

<script type="text/javascript">
$(document).ready(function() {
var currentTime = new Date()    
var minDate1 = new Date(currentTime.getFullYear(),currentTime.getMonth() +2, -1);
$('#txtMonthIn').datepicker({
 changeMonth: true,
 changeYear: true,
 dateFormat: 'MM yy',
   showButtonPanel: true,
   minDate: minDate1,

 onClose: function() {
    var iMonth = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
    var iYear = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
    $(this).datepicker('setDate', new Date(iYear, iMonth, 1));
 },

 beforeShow: function() {
   if ((selDate = $(this).val()).length > 0)
   {
      iYear = selDate.substring(selDate.length - 4, selDate.length);
      iMonth = jQuery.inArray(selDate.substring(0, selDate.length - 5),     $(this).datepicker('option', 'monthNames'));
      $(this).datepicker('option', 'defaultDate', new Date(iYear, iMonth, 1));
       $(this).datepicker('setDate', new Date(iYear, iMonth, 1));
   }
}
});

$("#txtMonthIn1").click(function() { 
$("#txtMonthIn").datepicker("show");
});

 $('#btn_appmt_search').click(function() {      
    if($('#txtMonthIn').val()==""){
        alert('Please Select Check in Month.');
        return false;
    } else {
        return true;
    }     
}); 

});
</script>
<style>
.ui-datepicker-calendar {
display: none;
}
.ui-datepicker {
width: 17em;
padding: .2em .2em 0;
display: none;
font-size:14px;
}
</style>
<?php } ?>


<script>
    $(function() {
        var pull        = $('#pull');
            menu        = $('nav ul');
            menuHeight  = menu.height();

        $(pull).on('click', function(e) {
            e.preventDefault();
            menu.slideToggle();
        });

        $(window).resize(function(){
            var w = $(window).width();
            if(w > 320 && menu.is(':hidden')) {
                menu.removeAttr('style');
            }
        });
    });
</script>

</head>

Answer 1

You're including jQuery twice, once from a CDN and again after including jQuery UI. This would cause global name collisions and possibly errors showing up in the JS console.

Answer 2

In addition to other great comments that were said here, also make sure your other libraries aren't using the $ symbol as a function or variable name.

This will create a jQuery conflict .

You can use jQuery.noConflict() at the top of your page to resolve that (if that indeed is the problem).

Read more about jQuery.noConflict()

Hope this helps!

jQuery libraries and scripts conflicting

Question

2 answers

solution1
1

solution2
0 2014-02-03 00:54:33

jQuery libraries and scripts conflicting

Question

2 answers

solution1 1

solution2 0 2014-02-03 00:54:33

solution1
1

solution2
0 2014-02-03 00:54:33