Uncaught TypeError: $.growl is not a function
I keep getting a "Uncaught TypeError: $.growl is not a function" error. Here is how I defined the Growl call and it shows how I am referencing Growl. What am I missing here? How can I fix this error?
index.php
<head>
<title>HOST Continuous Integration</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="HCIstyle.css">
<link rel="shortcut icon" href="Images/wci_favicon.ico">
<link href='http://fonts.googleapis.com/css?family=Armata' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Graduate' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Source+Code+Pro:400,900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Audiowide' rel='stylesheet' type='text/css'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js' type="text/javascript"></script>
<script src='http://ksylvest.github.io/jquery-growl/javascripts/jquery.growl.js' type='text/javascript'></script>
<link href="http://ksylvest.github.io/jquery-growl/stylesheets/jquery.growl.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.11.1.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<style type="text/css">
.table_outer { height: 15em; overflow: auto; }
</style>
</head>
script.js is the file where I am calling the Growl function:
// This function is called when, in the Submit Tab,
// the "Check Gerrits" button is clicked.
$("#check_gerrits_button").click(function(event) {
event.preventDefault();
if ($("#gerrits").val() == "") {
alert("Please enter gerrits.");
} else {
$("#main_form_su_validation_table").empty();
var data = { 'product_lines' : [], 'gerrits' : [], 'contacts' : [],'component' : ($("#component").val())};
//find all pl's that are checked
$("input[name=product_line]:checked").each(function() {
data['product_lines'].push($(this).val());
});
data['gerrits'] = ($("#gerrits").val()).split(",");
data['contacts'] = ($("#contacts").val()).split(",");
console.log("in chck gerrits");
console.log(data);
submitted = 'False';
$.ajax({
dataType: "json",
type: "POST",
url: "getsubmittedgerritsforSI.php",
data: data,
error: function (xhr, ajaxOptions, thrownError,response) {
// send the error mail -TBD
console.log(thrownError);
console.log(xhr);
alert(xhr.status);
alert(thrownError);
},
success : function(response){
console.log("get gerrits sucess");
console.log(response);
var data_cp = [];
var submittedlist = [];
$("input[name=product_line]:checked").each(function() {
for (var si in response) {
console.log(response[si]);
for (var i = 0; i < response[si].length; i++) {
gerrit = response[si][i]
data_cp.push(gerrit);
}
}
});
console.log(data_cp);
var ui_gerrits = ($("#gerrits").val()).split(",");
// this loop is to get the intersection of ui_gerrits and data_cp(database)
for (var i = 0; i < ui_gerrits.length; ) {
for (var j = 0; j < data_cp.length; ) {
if (ui_gerrits[i] == data_cp[j] ){
submittedlist.push(ui_gerrits[i]);
submitted = 'True';
}
j++;
}
i++;
}
console.log(submittedlist);
if (submitted = 'True' && submittedlist.length == ui_gerrits.length ){
//alert(str.fontcolor( "blue" ));
//$(function() { $.growl({ title: "Growl", message: "errits already released in SU or Submitted for SU!" })});
//$.growl(submittedlist + ": gerrits already released in SU or Submitted for SU");
$(function() {
$.growl({
title: "Growl",
message: "Gerrits already released in SU or Submitted for SU!"
});
});
}else if ((submitted = 'True') && (submittedlist.length != 0) ){
//alert(str.fontcolor( "blue" ));
//$.growl(submittedlist + ": gerrits already released in SU or Submitted for SU \nPlease remove " + submittedlist + " and resubmit remaining gerrits");
$(function() {
$.growl({
title: "Growl",
message: "Gerrits already released in SU or Submitted for SU!"
});
});
}
else{
SUValidation(data, '#main_form_su_validation_table', '#gerrits', "main_form");
}
}
});
}
});
});
Answer
You are missing the jQuery library. jQuery growl plugin is dependent on jQuery library. You can include jQuery library from a CDN like this or include it locally. But make sure to include it before the jquery growl library.
Below is how your source code should look like.
<head>
<link href="http://ksylvest.github.io/jquery-growl/stylesheets/jquery.growl.css" rel="stylesheet" type="text/css">
</head>
<body>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src='http://ksylvest.github.io/jquery-growl/javascripts/jquery.growl.js' type='text/javascript'></script>
<script type="text/javascript">
$(function() {
$.growl({
title: "Growl",
message: "errits already released in SU or Submitted for SU!"
});
});
</script>
</body>
Also, read the Installation step in jQuery growl website here
update
You have two jQuery libraries included which is causing the issue.