pub-messenger
pub-messenger copied to clipboard
Published
20 hours ago •
dristic
dristic
Issue: Cannot read property '_trigger' of undefined
I have just started looking into Pubnub as an alternative to pusher for some apps I am developing. I am receiving no loading errors in the console, so I know the included css and js are loading ok. I am receiving the following error when loading the page:
Uncaught TypeError: Cannot read property '_trigger' of undefined
My header looks like this:
<head>
<title>Pub Messenger</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon href=/assets/components/messenger/img/icon.png">
<link rel="apple-touch-startup-image href=startup.png">
<link rel="icon" type="image/png" href="/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,700,400italic" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="/assets/components/messenger/css/mobile-themes/sand/jquery.mobile-1.3.1.css" />
<link rel="stylesheet" href="/assets/components/messenger/css/screen.css" type="text/stylesheet" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="http://cdn.pubnub.com/pubnub-3.4.4.js"></script>
<script src="/assets/components/messenger/js/messenger.js"></script>
</head>
And my document ready function on the page looks like this:
$(document).ready(function () {
// Initialize the PubNub API connection.
var pubnub = PUBNUB.init({
publish_key: '<my pub key>',
subscribe_key: '<my sub key>'
});
// Grab references for all of our elements.
var messageContent = $('#messageContent'),
sendMessageButton = $('#sendMessageButton'),
messageList = $('#messageList');
// Handles all the messages coming in from pubnub.subscribe.
function handleMessage(message) {
var messageEl = $("<li class='message'>"
+ "<span class='username'>" + message.username + ": </span>"
+ message.text
+ "</li>");
messageList.append(messageEl);
messageList.listview('refresh');
// Scroll to bottom of page
$("html, body").animate({ scrollTop: $(document).height() - $(window).height() }, 'slow');
};
// Compose and send a message when the user clicks our send message button.
sendMessageButton.click(function (event) {
var message = messageContent.val();
if (message != '') {
pubnub.publish({
channel: 'chat',
message: {
username: 'test',
text: message
}
});
messageContent.val("");
}
});
// Also send a message when the user hits the enter button in the text area.
messageContent.bind('keydown', function (event) {
if((event.keyCode || event.charCode) !== 13) return true;
sendMessageButton.click();
return false;
});
// Subscribe to messages coming in from the channel.
pubnub.subscribe({
channel: 'chat',
message: handleMessage
});
});
Any help would be appreciated.
