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='' rel='stylesheet' type='text/css'>
<link href='' rel='stylesheet' type='text/css'>
<link href='+Code+Pro:400,900' rel='stylesheet' type='text/css'>
<link href='' rel='stylesheet' type='text/css'>
<script src='.0.2/jquery.min.js' type="text/javascript"></script>
<script src='.growl.js' type='text/javascript'></script>
<link href=".growl.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="//code.jquery/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery/jquery-1.11.1.js"></script>
<script src="//code.jquery/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' : [],'ponent' : ($("#ponent").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");
}
}
});
}
});
});
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./css?family=Armata' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis./css?family=Graduate' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis./css?family=Source+Code+Pro:400,900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis./css?family=Audiowide' rel='stylesheet' type='text/css'>
<script src='https://ajax.googleapis./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./ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery./jquery-1.11.1.js"></script>
<script src="//code.jquery./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' : [],'ponent' : ($("#ponent").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");
}
}
});
}
});
});
- did you add jquery ? – Dhiraj Commented May 29, 2015 at 1:53
- what does that mean? – carte blanche Commented May 29, 2015 at 1:53
- I meant, did you include jQuery library ? It seems to be working here jsbin./napabo/1/edit – Dhiraj Commented May 29, 2015 at 1:54
- can you be more specific?sorry i still dont understand what library you are talking about ? – carte blanche Commented May 29, 2015 at 1:56
- @ dhiraj - so what am missing then?jquery libary?how do include the jQuery library? – carte blanche Commented May 29, 2015 at 1:58
2 Answers
Reset to default 3You 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./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.
The cause of the issue is due to the multiple reference of the jquery files. The jquery file after the growl will recreate the $ instance and hence the growl that already registered was removed.
Please remove that or use jquery conflict.