ReferenceError: function is not defined in javascript

Question

Hello i am newbie to javascript and angularjs,I have made a function in my comtroller for opening a website,and i am calling that function on "onclick" of a button",I am getting ReferenceError: openWebsite is not defined when i am trying to do this,my code is as below,Please help me to solve this,thanks in advance.

controller

     app.controller('listingdetailController', function ($http, $scope, $compile, $filter, $sce) {

        var Catid = '1';
        var SearchTxt = 'cay';
        var url = encodeURI("http://www.yahoo.com");


        $http({
            method: 'POST',
            url:  API_HOST+'/webservice/listingdetail',
            headers:
                    {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'caymanauth': caymanauth
                    },
            data: "&Catid=" + Catid + "&SearchTxt=" + SearchTxt,
            contentType: 'application/x-www-form-urlencoded'
        }).success(function (data)
        {

            var i;
            var Content = ' ';
            for (i = 0; i<data['Details'].length; i++)
            {
                if (Content === ' ')
                {
                    Content =

 '<div class="app-page-photo">'+   
      '<div class="app-hero">'+
        '<ul class="image ng-scope" rn-carousel="">'+

          '<li style="display: inline-block; transform: translate3d(0%, 0px, 0px);">'+
             '<div class="bgimage" ng-style="{background-image: url("images/gallery/01.png")}" style="background-image: url("images/gallery/01.png");">'+
             '</div>'+
          '</li>'+
          '<li style="display: inline-block; transform: translate3d(100%, 0px, 0px);">'+
             '<div class="bgimage" ng-style="{background-image: url("images/gallery/02.png")}" style="background-image: url("images/gallery/02.png");">'+
             '</div>'+
          '</li>'+
          '<li style="display: inline-block; transform: translate3d(200%, 0px, 0px);">'+
             '<div class="bgimage" ng-style="{background-image: url("images/gallery/03.png")}" style="background-image: url("images/gallery/03.png");">'+
             '</div>'+
          '</li>'+
        '</ul>'+ 
       ' </div>'+
      '</div>'+


      '<ons-list class="app-photo-buttons list ons-list-inner">'+
         '<ons-list-item class="list__item ons-list-item-inner list__item--action-buttons" modifier="action-buttons">'+
            '<ons-row class="action row ons-row-inner">'+

              '<ons-col class="action-col col ons-col-inner">'+ 
              '<div style="border-right: 1px solid #ffc22f; padding: 10px 0;">'+
              '<div class="action-icon">'+
              '<ons-icon class="ons-icon ons-icon--ion ion-android-call fa-lg" icon="ion-android-call">'+
              '</ons-icon>'+
              '</div>'+
              '<div class="action-label">Phone</div>'+
              '</div>'+
              '</ons-col>'+


             '<ons-col class="action-col col ons-col-inner" onclick="sendEmail(message.Email, message.subject, message.body)";>'+ 
              '<div style="border-right: 1px solid #ffc22f; padding: 10px 0;">'+
              '<div class="action-icon">'+
              '<ons-icon class="ons-icon ons-icon--ion ion-ios-email fa-lg" icon="ion-ios-email">'+
              '</ons-icon>'+
              '</div>'+
              '<div class="action-label">Email</div>'+
              '</div>'+
              '</ons-col>'+



              '<ons-col class="action-col col ons-col-inner">'+ 
              '<div style="border-right: 1px solid #ffc22f; padding: 10px 0;">'+
              '<div class="action-icon">'+
              '<ons-icon class="ons-icon ons-icon--ion ion-earth fa-lg" icon="ion-earth">'+
              '</ons-icon>'+
              '</div>'+
              '<div class="action-label">Website</div>'+
              '</div>'+
              '</ons-col>'+


              '<ons-col class="action-col col ons-col-inner">'+ 
              '<div style="border-right: 1px solid #ffc22f; padding: 10px 0;">'+
              '<div class="action-icon">'+
              '<ons-icon class="ons-icon ons-icon--ion ion-android-share-alt fa-lg" icon="ion-android-share-alt">'+
              '</ons-icon>'+
              '</div>'+
              '<div class="action-label">Share</div>'+
              '</div>'+
              '</ons-col>'+       
            '</ons-row>'+
        '</ons-list-item>'+
      '</ons-list>'+                      

         '<ons-list style="border-top: none;">' +
         '<ons-list-item>' +
         '<ons-row class="detail-row">' +
         '<ons-col style="-webkit-box-flex: 0; flex: 0 0 30px; max-width: 30px ; width=30px">' +
         '<ons-icon icon="fa-map-marker" fixed-width="true">' + '</ons-icon>' +
         '</ons-col>' +
          '<ons-col>' +

          '<div class="desc">'+
          '<ons-icon class="ons-icon fa-map-marker fa fa-lg" fixed-width="true" icon="fa-map-marker">'+
          '</ons-icon>'
          + data['Details'][i]['varCityName']+
          '</div>'+
          '</ons-col>' +
          '</ons-row>' +
          '</ons-list-item>' + '<br>' +


          '<ons-list-item>' +
          '<ons-row class="detail-row">' +
          '<ons-col style="-webkit-box-flex: 0 flex: 0 0 30px max-width: 30px width=30px">' +
          '<ons-icon icon="ion-home" fixed-width="true">'+'</ons-icon>'+
          '</ons-col>' +                          

          '<ons-col>' +
          '<div class="desc">'+
          '<ons-icon class="ons-icon ons-icon--ion ion-home fa-lg" fixed-width="true" icon="ion-home">'+
          '</ons-icon>'+ data['Details'][i]['varPhysicalAddress'] + 
          '</div>' +
          '</ons-col> ' +
          '</ons-row>' +
          '</ons-list-item>' + 
          '<br>' +


          '<ons-list-item>' +
          '<ons-row class="detail-row">' +
          '<ons-col style="-webkit-box-flex: 0; flex: 0 0 30px; max-width: 30px ; width=30px">' +
              '<ons-icon icon="ion-soup-can" fixed-width="true">' + '</ons-icon>' +
            '</ons-col>' +

             '<ons-col>' +
            '<div class=desc>'+'<ons-icon class="ons-icon ons-icon--ion ion-soup-can fa-lg" fixed-width="true" icon="ion-soup-can">'+
            '</ons-icon>'
            + data['Details'][i]['varPOBOXAddress']+
            '</div>'+
            '</ons-col>'+
            '</ons-row>'+
             '</ons-list-item>'+
             '</ons-list>'+
             '<div class=caw-botton>'+
            '<ons-row class="row ons-row-inner">'+ 
                '<ons-col class="col ons-col-inner" onclick=gallery.pushPage("book-page.html");>'+
                 '<div style="border-right: 1px solid rgba(221,221,221,0.6); padding: 12px 0; background: #0ad046; color: #FFF;">'+
                   '<i class="ion-compose">'+'</i>Book Now</div>'+
               '</ons-col>'+
               '<ons-col class="col ons-col-inner" onclick=gallery.pushPage("book-page.html");>'+
                   '<div style="padding: 12px 0; background: #cccccc; color: #FFF;">'+
                  '<i class="ion-edit">'+
                  '</i>Write a Review</div>'+
               '</ons-col>'+
             '</ons-row>'+
                ' </div>';

                }

                else
                {


   '<div class="app-page-photo">'+   
      '<div class="app-hero">'+
        '<ul class="image ng-scope" rn-carousel="">'+

          '<li style="display: inline-block; transform: translate3d(0%, 0px, 0px);">'+
             '<div class="bgimage" ng-style="{background-image: url("images/gallery/01.png")}" style="background-image: url("images/gallery/01.png");">'+
             '</div>'+
          '</li>'+
          '<li style="display: inline-block; transform: translate3d(100%, 0px, 0px);">'+
             '<div class="bgimage" ng-style="{background-image: url("images/gallery/02.png")}" style="background-image: url("images/gallery/02.png");">'+
             '</div>'+
          '</li>'+
          '<li style="display: inline-block; transform: translate3d(200%, 0px, 0px);">'+
             '<div class="bgimage" ng-style="{background-image: url("images/gallery/03.png")}" style="background-image: url("images/gallery/03.png");">'+
             '</div>'+
          '</li>'+
        '</ul>'+ 
       ' </div>'+
      '</div>'+


      '<ons-list class="app-photo-buttons list ons-list-inner">'+
         '<ons-list-item class="list__item ons-list-item-inner list__item--action-buttons" modifier="action-buttons">'+
            '<ons-row class="action row ons-row-inner">'+

              '<ons-col class="action-col col ons-col-inner">'+ 
              '<div style="border-right: 1px solid #ffc22f; padding: 10px 0;">'+
              '<div class="action-icon">'+
              '<ons-icon class="ons-icon ons-icon--ion ion-android-call fa-lg" icon="ion-android-call">'+
              '</ons-icon>'+
              '</div>'+
              '<div class="action-label">Phone</div>'+
              '</div>'+
              '</ons-col>'+


              '<ons-col class="action-col col ons-col-inner">'+ 
              '<div style="border-right: 1px solid #ffc22f; padding: 10px 0;">'+
              '<div class="action-icon">'+
              '<ons-icon class="ons-icon ons-icon--ion ion-ios-email fa-lg" icon="ion-ios-email">'+
              '</ons-icon>'+
              '</div>'+
              '<div class="action-label">Email</div>'+
              '</div>'+
              '</ons-col>'+



               '<ons-col class="action-col col ons-col-inner" onclick="sendEmail(message.Email, message.subject, message.body)";>'+
              '<div style="border-right: 1px solid #ffc22f; padding: 10px 0;">'+
              '<div class="action-icon">'+
              '<ons-icon class="ons-icon ons-icon--ion ion-earth fa-lg" icon="ion-earth">'+
              '</ons-icon>'+
              '</div>'+
              '<div class="action-label">Website</div>'+
              '</div>'+
              '</ons-col>'+


              '<ons-col class="action-col col ons-col-inner">'+ 
              '<div style="border-right: 1px solid #ffc22f; padding: 10px 0;">'+
              '<div class="action-icon">'+
              '<ons-icon class="ons-icon ons-icon--ion ion-android-share-alt fa-lg" icon="ion-android-share-alt">'+
              '</ons-icon>'+
              '</div>'+
              '<div class="action-label">Share</div>'+
              '</div>'+
              '</ons-col>'+       
            '</ons-row>'+
        '</ons-list-item>'+
      '</ons-list>'+                      





        '<ons-list style="border-top: none;">' +
         '<ons-list-item>' +
         '<ons-row class="detail-row">' +
         '<ons-col style="-webkit-box-flex: 0; flex: 0 0 30px; max-width: 30px ; width=30px">' +
         '<ons-icon icon="fa-map-marker" fixed-width="true">' + '</ons-icon>' +
         '</ons-col>' +
          '<ons-col>' +

          '<div class="desc">'+
          '<ons-icon class="ons-icon fa-map-marker fa fa-lg" fixed-width="true" icon="fa-map-marker">'+
          '</ons-icon>'
          + data['Details'][i]['varCityName']+
          '</div>'+
          '</ons-col>' +
          '</ons-row>' +
          '</ons-list-item>' + '<br>' +


          '<ons-list-item>' +
          '<ons-row class="detail-row">' +
          '<ons-col style="-webkit-box-flex: 0 flex: 0 0 30px max-width: 30px width=30px">' +
          '<ons-icon icon="ion-home" fixed-width="true">'+'</ons-icon>'+
          '</ons-col>' +


          '<ons-col>' +
          '<div class="desc">'+
          '<ons-icon class="ons-icon ons-icon--ion ion-home fa-lg" fixed-width="true" icon="ion-home">'+
          '</ons-icon>'+ data['Details'][i]['varPhysicalAddress'] + 
          '</div>' +
          '</ons-col> ' +
          '</ons-row>' +

          '</ons-list-item>' + 
          '<br>' +


          '<ons-list-item>' +
          '<ons-row class="detail-row">' +
          '<ons-col style="-webkit-box-flex: 0; flex: 0 0 30px; max-width: 30px ; width=30px">' +
              '<ons-icon icon="ion-soup-can" fixed-width="true">' + '</ons-icon>' +
            '</ons-col>' +

            '<ons-col>' +
            '<div class=desc>'+'<ons-icon class="ons-icon ons-icon--ion ion-soup-can fa-lg" fixed-width="true" icon="ion-soup-can">'+
            '</ons-icon>'
            + data['Details'][i]['varPOBOXAddress']+
            '</div>'+
            '</ons-col>'+
            '</ons-row>'+
             '</ons-list-item>'+
             '</ons-list>'+
             '<div class=caw-botton>'+
             '<ons-row class="row ons-row-inner">'+ 
                '<ons-col class="col ons-col-inner" onclick=gallery.pushPage("book-page.html");>'+
                 '<div style="border-right: 1px solid rgba(221,221,221,0.6); padding: 12px 0; background: #0ad046; color: #FFF;">'+
                   '<i class="ion-compose">'+'</i>Book Now</div>'+
               '</ons-col>'+
               '<ons-col class="col ons-col-inner" onclick=gallery.pushPage("book-page.html");>'+
                   '<div style="padding: 12px 0; background: #cccccc; color: #FFF;">'+
                  '<i class="ion-edit">'+
                  '</i>Write a Review</div>'+
               '</ons-col>'+
             '</ons-row>'+
                ' </div>';


                }
            }

//            
//            $scope.call = function (message)
//            {
//                parent.location.href = "tel:{{message.varPhone}}";
//
//            };


            $scope.snippet = Content;

        }).error(function ()
        {
            alert("error");
        });

         $scope.sendEmail = function(email, subject, body){
        var link = "mailto:"+ email
                 + "&subject=New email " + escape(subject);
                 + "&body=" + escape(body); 

        window.location.href = link;
     };

       $scope.openWebsite = function ()
    {
        window.open(url, '_blank', 'location=yes');
    };

        $scope.deliberatelyTrustDangerousSnippet = function ()
        {
            return $sce.trustAsHtml($scope.snippet);
        };
    });

now nothing is happening on its click..!!

I've no idea how you use an intrinsic event attribute (which you should avoid because they are awful and have many gotchas) to call a method on the angular $scope object, but your code is trying to call a global. — Quentin
– Quentin, Commented Sep 29, 2015 at 6:13
docs.angularjs.org/tutorial/step_10 — looks like you should be using ng-click, not onclick. — Quentin
– Quentin, Commented Sep 29, 2015 at 6:14

plamut · Accepted Answer · 2015-09-29 09:27:54Z

10

This part is problematic (among a few others):

onclick=openWebsite(url);

You need to use angular's build-it directive ng-click

<ons-col ng-click="openWebsite(url)">

If you use onclick, you register a native handler for the click event and the browser tries to find the openWebsite() function in the global (window) scope (note: no relation to Angular scopes), where it does not exist.

If you use ng-click, on the other hand, Angular will search for the openWebsite() method in the corresponding scope, which is what you want.

Edit: in case this does not work, please see some of the other answers as well for possible causes (e.g. the Angular app not being bootstrapped properly). I focused on the most apparent (and IMO the most likely cause) of the problem.

Update: With the whole controller posted now, I see the problem. By the time you create that massive HTML snippet on the fly in your controller, Angular has long ago finished processing and bootstrapping everything. This means that when you include the snippet into your page, it does not get compiled. Angular does not process the directives such as ng-click in it, does not create scopes, does not create bindings between the scope elements and DOM nodes, etc.

I am afraid you will need to refactor your code quite a lot. That huge HTML snippet should actually be included into your page, there are quite a few possibilities here, for example:

by using the built-in ng-include directive in your "main" template
by writing your own directive that loads that HTML as its template
by using the $compile service to compile the HTML snippet, so that angular does all those things I mentioned above that it does not when you simply include the HTML as a raw unprocessed string.

Saying what would be the best option for use case and describing it in details is beyond the scope of the initial question and the would require too long or an answer. I would suggest to do some more research on Angular and have a look at some smaller toy applications to get a general idea for the "right" patterns to use.

edited Sep 29, 2015 at 9:27

answered Sep 29, 2015 at 6:23

plamut

3,20610 gold badges32 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Jigar Makwana Over a year ago

hello i have edited my code as per suggest,but now nothing is happening on click.!! :(

plamut Over a year ago

Do you get any helpful error in the console? Have you verified that your application has been correctly bootstrapped, and other things people suggested? Without additional information, it is difficult to tell what the exact problem is, there are multiple possible causes...

plamut Over a year ago

Another guess: you are using a custom tag <ons-col>, are you sure the corresponding directive is properly initialized? Or is it supposed to be a <div> but your question is misformatted? Please check that, too, and edit the question if needed.

Jigar Makwana Over a year ago

wait i am posting my whole controller to the question and yes i am getting error "ReferenceError: sendEmail is not defined" in console.pls see my edits

plamut Over a year ago

Please see the updated answer. Maybe not what you have initially expected, but it turned out that a complete solution would be too long to describe. I do hope, though, that it gives you some new useful hints!

|

KAD · Accepted Answer · 2015-09-29 06:15:56Z

2

You have a couple of points to check here with the code provided:

Make sure you have assigned your ng-app and ng-controller to the elements wrapping the element you are calling the function within with the proper controller and module names that defines your openWebsite.

As @Quentin stated also ng-click is to be used rather than onClick

Your function does not have a parameter but when called :

$scope.openWebsite = function (url)
    {
        window.open(url, '_blank', 'location=yes');
    };

This is not the main cause though but it shall be checked.

answered Sep 29, 2015 at 6:15

KAD

11.2k4 gold badges34 silver badges75 bronze badges

3 Comments

Jigar Makwana Over a year ago

i have changed my code ,pls look in my question as update

KAD Over a year ago

if you wanna use your code this way, no need for ng-click, since your are not using angular scope functions anymore, you can simply use onclick for this case, do not mix things up. ng-click is only used with angular scope function events or angular expressions, onclick is used to execute native javascript code like calling a function which is the same case as your updated question.

Jigar Makwana Over a year ago

i am getting "function not defined" though i have function in my controller..! :(

krishna · Accepted Answer · 2015-09-29 06:13:07Z

0

variable is not received in openwebsite(). Write

$scope.openWebsite = function (url)
    {
        window.open(url, '_blank', 'location=yes');
    };

And use ng-click="openwebsite(url)" instead of onclick="openwebsite(url)"

edited Sep 29, 2015 at 6:13

answered Sep 29, 2015 at 6:11

krishna

1527 bronze badges

3 Comments

Quentin Over a year ago

While that is a problem, it is not the problem causing the error being asked about.

krishna Over a year ago

i think ng-click has to be used instead of onclick

Jigar Makwana Over a year ago

@krishna-ng-click is not working,nothing is happening while i am using ng-click instead of onclick ..:(

Meet Shah · Accepted Answer · 2019-12-20 20:37:03Z

0

With Angular, you should use (click)="signUpwithEmail()"

Example,

 <ion-button (click)="signUpwithEmail()">
          Sign up with Email
 </ion-button>

answered Dec 20, 2019 at 20:37

Meet Shah

8388 silver badges5 bronze badges

Collectives™ on Stack Overflow

ReferenceError: function is not defined in javascript

4 Answers 4

9 Comments

3 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

9 Comments

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related