php - My jQuery Ajax form submit is still refreshing page?

admin2025-06-03 0

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!

Share Improve this question asked Feb 20, 2019 at 18:20 Rollor 1291 gold badge4 silver badges10 bronze badges

Add a comment |

1 Answer 1

Sorted by: Reset to default 1

You 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) {

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1748883477a314518.html

phpMy jQuery Ajax form submit is still refreshing page

最新回复(0)