I managed to get my Wordpress jQuery wired properly. Everything gets inserted to the database as expected, but for some reason, it is still refreshing the whole page?
php/html (Wordpress Page Template):
<?php
if(isset($_POST['send']))
{
send_projectmessage($projectid, $userid, $projectmessage);
}
?>
<html>
<body>
<div id="messages">
<?php
$messages = load_projectmessages($projectid);
foreach ($messages as $message) { /*echo the messages and put in a nice div*/ }
?>
</div>
<form id="form-pm" method="post" enctype="multipart/form-data" action="">
<textarea name="projectMessage" rows=3 id="project-message"></textarea>
<input type="submit" name="send" value="send message">
</form>
JS:
$('#form-pm').on('send', function(e) {
e.preventDefault();
var ajaxRequest =
$.ajax({
url: admin_ajax.ajax_url,
type: 'post',
data: {
action: 'send_projectmessage',
projectid: 'projectid',
userid: 'userid',
projectmessage: 'projectmessage'
},
contentType: 'application/json; charset=utf-8',
dataType: 'json' });
ajaxRequest.done(function() { } );
ajaxRequest.fail(function(jqXHR) { alert('You are fail. ' + jqXHR); } );
return false;
});
functions.php
function send_projectmessage($projectid, $userid, $message) {
global $wpdb;
$wpdb->insert('tbl_messages', array(
'project_id' => $projectid,
'user_id' => $userid,
'message_body' => $message
));
return false;
wp_die();
}
add_action('wp_ajax_send_projectmessage', 'send_projectmessage');
I have the e.preventDefault(); and also return false. My message gets inserted properly into the MySql table, but the whole page still reloads!
I managed to get my Wordpress jQuery wired properly. Everything gets inserted to the database as expected, but for some reason, it is still refreshing the whole page?
php/html (Wordpress Page Template):
<?php
if(isset($_POST['send']))
{
send_projectmessage($projectid, $userid, $projectmessage);
}
?>
<html>
<body>
<div id="messages">
<?php
$messages = load_projectmessages($projectid);
foreach ($messages as $message) { /*echo the messages and put in a nice div*/ }
?>
</div>
<form id="form-pm" method="post" enctype="multipart/form-data" action="">
<textarea name="projectMessage" rows=3 id="project-message"></textarea>
<input type="submit" name="send" value="send message">
</form>
JS:
$('#form-pm').on('send', function(e) {
e.preventDefault();
var ajaxRequest =
$.ajax({
url: admin_ajax.ajax_url,
type: 'post',
data: {
action: 'send_projectmessage',
projectid: 'projectid',
userid: 'userid',
projectmessage: 'projectmessage'
},
contentType: 'application/json; charset=utf-8',
dataType: 'json' });
ajaxRequest.done(function() { } );
ajaxRequest.fail(function(jqXHR) { alert('You are fail. ' + jqXHR); } );
return false;
});
functions.php
function send_projectmessage($projectid, $userid, $message) {
global $wpdb;
$wpdb->insert('tbl_messages', array(
'project_id' => $projectid,
'user_id' => $userid,
'message_body' => $message
));
return false;
wp_die();
}
add_action('wp_ajax_send_projectmessage', 'send_projectmessage');
I have the e.preventDefault(); and also return false. My message gets inserted properly into the MySql table, but the whole page still reloads!
1 Answer
Reset to default 1You use wrong js event. You register your callback with this code:
$('#form-pm').on('send', function(e) {
But there is no event called send on form. It should be submit. Here’s fixed version of that line:
$('#form-pm').on('submit', function(e) {