I have made a Pusher messaging demo system based of a book a read. I created 3 files, test.html,test.js,post.php. When I click submit, ajax does not catch it and stop it from refreshing. I check the Pusher log, and the php message was sent with the values. I am lead to believe the error was in test.js. Below are the codes.
Test.js
(function($){
var pusher= new pusher('bab47e76c61c0af0818a'),
channel = pusher.subscribe('exercise-3-2);
channel
.bind(
'send-message', function( data ) {
var cont= $('#messages');
cont.find('.no-messages').remove();
$('<li>')
.html(data.msg)
.appendTo(cont);
}
);
$('form').submit(function(){
$.post('post.php', $(this).serialize());
$('#message').val('').focus();
return false;
});
})(jQuery);
post.php
<?php
ini_set('display_errors', 1);
error_reporting(E_ALL);
require_once 'Pusher.php';
$key = 'bab47e76c61c0af0818a';
$secret = 'PRIVATEINFO';
$app_id = 'PRIVATEINFO';
$pusher=new Pusher($key, $secret, $app_id);
if (isset($_POST['name']) && isset($_POST['message']))
{
$data =array(
'name'=> htmlentities(strip_tags($_POST['name'])),
'msg'=> htmlentities(strip_tags($_POST['message'])),
);
$pusher->trigger('exercise-3-2', 'send-message', $data);
}
and test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test!</title>
</head>
<body>
<header>
Testing Pusher!
</header>
<section>
<form method="post" action="post.php">
<label>
NAME:
<input type="text" name="name"
placeholder="i.e. John" />
</label>
<label>
Message:
<input type="text" name="message"
id="message" value="Hey!" />
</label>
<input type="submit" value="send" />
</form>
</section>
<aside>
<h2> Messages!</h2>
<ul id="messages">
<li class="no-messages"> no messages yet</li>
</ul>
</aside>
<script src="http://js.pusher.com/2.2/pusher.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="test.js"></script>
<script>
</script>
</body>
</html>