Copy link to clipboard
Copied
Hi,
My page was working fine, until I started adding more and more jquery libraries.
here is the error I get in the developer console:
appointment_new_validation.js:3 Uncaught TypeError: Cannot read property 'setDefaults' of undefined
The jquery validation plugin isnt working now
I have tried putting the library links (in red) in every position in the header, and still getting the error message.
Here is the page contents:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>New Appointment </title>
<link rel="icon" href="../../images/favicon.ico" type="image/x-icon"/>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
function getDealership(val) {
$.ajax({
type: "POST",
url: "appointment_new_check.php",
data:'dealershipgroup_id='+val,
success: function(data){
$("#dealership_id").html(data);
}
});
}
$( "#dealership_id" ).change(function() {
alert( "MAKE DEALER BOX VISIBLE" );
});
</script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.3.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/additional-methods.min.js"></script>
<script src="appointment_new_validation.js"></script>
<!-- Deletion of notes jQuery -->
<script type="text/javascript">
$(document).ready(function(){
$(".delete").click(function(){
$("#note_modal").show();
var note_id = $(this).attr('dir');
$('.note_id').val(note_id);
//alert(note_id);
});
$("#note_modal_button_no").click(function(){
$("#note_modal").hide();
});
});
$(document).ready(function() {
$('#note_modal_button_yes').css('cursor','pointer').click(function(){
var note_id = $('.note_id').val();
$.ajax({
type: "POST",
url: "note_delete.php",
data: {
note_id: note_id
}
}).done(function() {
//alert( "Record was deleted");
location.reload();
});
});
});
</script>
<!-- Date Picker -->
<link href="/scripts/jquery-ui-1.11.4.custom/jquery-ui.css" rel="stylesheet" type="text/css">
<script src="/scripts/jquery-ui-1.11.4.custom/external/jquery/jquery.js"></script>
<script src="/scripts/jquery-ui-1.11.4.custom/jquery-ui.js"></script>
<script>
$(function() {
$( ".datepicker" ).datepicker({
numberOfMonths: 2,
showButtonPanel: true,
dateFormat: 'dd-mm-yy'
});
});
</script>
<!-- Time Picker -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<script type="text/javascript">
$(document).ready(function(){
$('.timepicker').timepicker({
timeFormat: 'HH:mm',
interval: 15,
minTime: '10',
maxTime: '22',
defaultTime: '7',
startTime: '7:00',
dynamic: false,
dropdown: true,
scrollbar: true,
});
});
</script>
</head>
<body>
<form name="new_appointment" id="new_appointment" method="POST" action="appointment_new_create.php">
<div class="column_2">
<div class="column_section">
<div class="column_section_header">Basic Details</span></div>
<!-- Person ID -->
<div class="form_field_tag">Customer</div>
<div class="form_field_wrapper">
<input name="personid" type="text" class="form_field" readonly value="[ID: <?php echo $person_row['renid']; ?>] <?php echo $person_row['title'].' '.$person_row['forename'].' '.$person_row['surname']; ?>">
</div>
<!-- DATE -->
<div class="form_field_tag">Appointment Date</div>
<div class="form_field_wrapper">
<input type="text" class="form_field datepicker" name="date">
</div>
<!-- TIME -->
<div class="form_field_tag">Appointment Time</div>
<div class="form_field_wrapper">
<input type="text" class="form_field timepicker" name="time">
</div>
</div>
</div>
<div class="column_2">
<div class="column_section">
<div class="column_section_header">Appointment Location</div>
<!-- Dealership Group -->
<div class="form_field_tag">Dealership Group</div>
<div class="form_field_wrapper">
<select class="form_field" name="dealershipgroup" id="dealershipgroup-list" onChange="getDealership(this.value);">
<option value="-1">Select Dealership Group</option>
<option value="-1">----------</option>
<?php do{ ?>
<option value="<?php echo $dealership_group_row['id']; ?>"><?php echo $dealership_group_row['name']; ?></option>
<?php }while($dealership_group_row = $dealership_group_query->fetch_assoc()); ?>
</select>
</div>
<!-- Dealership -->
<div class="form_field_tag">Dealership</div>
<div class="form_field_wrapper">
<select class="form_field" name="dealership" id="dealership_id">
<option value="-1">Select Dealership</option>
</select>
</div>
</div>
</div>
<div class="column_1">
<div class="column_section">
<div style="text-align:center;">
<input type="submit" name="submit" class="form_submit_button" value="Create Appointment">
</div>
</div>
</div>
</form>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
</body>
</html>
Any help would be very much appreciated!
1 Correct answer
You should have only 1 jQuery Core Library per document. On top of your page you have referenced jQ 2.1.1 and further down you have a 2nd reference to 2.1.3. Remove one.
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.3.min.js"></script>
Best Practice: Put all your scripts and functions at page bottom. Your page will load a little faster.
Nancy O.
Copy link to clipboard
Copied
You should have only 1 jQuery Core Library per document. On top of your page you have referenced jQ 2.1.1 and further down you have a 2nd reference to 2.1.3. Remove one.
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.3.min.js"></script>
Best Practice: Put all your scripts and functions at page bottom. Your page will load a little faster.
Nancy O.

