Reputation: 189

jQuery libraries and scripts conflicting

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>

Upvotes: 0

Answers (2)

dev7

Reputation: 6369

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).

jQuery libraries and scripts conflicting

Answers (2)

Related Questions