1

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");          
                }
            }
        });     
    }    
});
    });
Jens
  • 8,423
  • 9
  • 58
  • 78
carte blanche
  • 10,796
  • 14
  • 46
  • 65

2 Answers2

3

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.

Community
  • 1
  • 1
Dhiraj
  • 33,140
  • 10
  • 61
  • 78
  • did you add the Javascript files as suggested in my answer? Also, make sure the growl method is at the end of the page as suggested. Lastly, please update your question with how your file exactly looks – Dhiraj May 29 '15 at 03:39
  • yes,I added the javascript files,i already have them,updated the main function where am calling growl,please check – carte blanche May 29 '15 at 03:45
  • @user2125827: you dont have to wrap $.growl in `$(function(){..})` everytime – Dhiraj May 29 '15 at 04:27
  • yes i know that...but thats not the rootcause for the error,i have looking this all day long but just cant figure out what is wrong ans why it thinks $.growl is not a function.. – carte blanche May 29 '15 at 04:29
  • I KNOW that is not the root case, but you have to debug it step by step. Also, you have two jquery libraries included, remove the second one. That is the root cause of the issue. Removing the second jquery library will solve it – Dhiraj May 29 '15 at 04:29
  • which second jquery library are you referring?r u referring to ` ` – carte blanche May 29 '15 at 04:34
  • Search and remove this `` – Dhiraj May 29 '15 at 04:35
  • thanks dhiraj - that fixed the issue,is there a way i can get the growl message to the center and in red color – carte blanche May 29 '15 at 04:48
  • use `$.growl.error({ message: "my message" });` and check this for locations https://github.com/ksylvest/jquery-growl#advanced – Dhiraj May 29 '15 at 04:51
  • i used the location option to position the message,is there one for color aswell? – carte blanche May 29 '15 at 05:06
  • I suggested it just above this message. Please check it again. `$.growl.error`. If you have further questions please post a new question – Dhiraj May 29 '15 at 05:13
0

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.

Madhu
  • 2,416
  • 3
  • 15
  • 33