CODEWITHSUNDEEP
javascriptjquerykendo-uitelerik
BitShift
BitShift

Reputation: 123

Trying to add simple notification.... not a function

When I launch the page, I fire up the chrome dev tools and look in the sources window, load my file and I see

Uncaught TypeError: $(...).kendoNotification is not a function

Im trying to modify an existing application ive been given which uses Kendo UI. I just want to add in a notification popup.

Referring to the docs, a common cause of this is not including all required javascript resources, but they all seem to be there. jquery, kendo.all.min and were also using kendo.modernizr

Its obviously its my problem, since all the other kendo widgets work fine.

Im trying to follow this example http://code.tutsplus.com/tutorials/adding-application-notifications-with-kendo-ui-core--cms-20989

Something is getting initialized correctly, im just not sure where/what it could be.

The page itself is rather large, but the notification is just

         <span id="popupNotification"></span>

        ... more html 



            <script>

            ....more stuff 


        $.ajax({

 ...

            success: function (result) {


                var popupNotification = $('#popupNotification').kendoNotification({
                    appendTo: "#SalesGrid", autoHideAfter: 5000, width: 400
                }).data('kendoNotification');


                var d = new Date();
                popupNotification.show({ time: kendo.toString(d, 'HH:MM:ss.') + kendo.toString(d.getMilliseconds(), "000") }, "time");


                }
    })    
            </script>

[update]
I just realized i was trying to show the notification from within an ajax call, so I found a more relevant example here.

[update 2, full source of function being called ]

function postBatch(e) {

//alert('made it');
$.ajax({
    url: '@Html.Raw(@Url.Action("SalesAction", "SalesController"))',
    data: { batchID: e, status: "POSTED" },
    async: false,
    dataType: "json",
    type: 'POST',
    success: function (result) {
        var statementBatchDS = $('#SalesGrid').data().kendoGrid.dataSource;
        statementBatchDS.data(result.Data);

        // *** FAILS HERE ***  note:  SalesGrid is a KendoUI grid 
        var popupNotification = $('#popupNotification').kendoNotification({
            appendTo: "#SalesGrid", autoHideAfter: 5000, width: 400
        }).data('kendoNotification');


        var d = new Date();
        popupNotification.show('Batch post error, please review', 'error');


        }
});

}

Where/which script source within Kendo UI is the KendoNotificaiton widget defined? Im using kendo.all.min.js, so I was assuming that included everything. Yet, when I call the notificaiton show method (see above), the error seems to indicate it cant construct the notification..which leads me to think the source isnt being included, yet the kendo.all.min.js file is clearly being pulled in as I inspect the source in Chrome's dev tools.

So off to Telerik I go, and I read these
http://docs.telerik.com/kendo-ui/intro/installation/what-you-need
http://docs.telerik.com/kendo-ui/intro/supporting/scripts-general

Yet, the "all" version is whats in the reference http://demos.telerik.com/kendo-ui/notification/index

Upvotes: 0

Views: 2054

Answers (2)

Researcher
Researcher

Reputation: 47

I had this same problem and solved removing the kendo call from inside the AJAX snippet with a function:

  success: function(data){
notify();// here i call a function to send the notification
clean();//another function to clear form data.
  },
  
...

function notify(){
  var popupNotification = $("#popupNotification").kendoNotification().data("kendoNotification");
  popupNotification.show("Some notification", "success");
}

Upvotes: 1

BitShift
BitShift

Reputation: 123

Turns out it was just a matter of upgrading the version of the Kendo libraries I was using. At least im past the point of the Notification widget not being loaded.

Upvotes: 0

Related Questions