Question

我正在localhost上制作一个wordpress插件。我在custum管理面板中为插件添加了一个ajax表单。但形式不起作用。当我在表单中按下提交按钮（＆＃34;添加＆＃34;按钮）时，它显示一个空白页面，页面地址变为

http://localhost/wp-admin/admin.php?eventname=myevent&Event+Date=2014-12-11

我在互联网上搜索了很多这个，但我找不到可以解决这个问题的解决方案。我认为问题是jquery函数没有与表单的提交按钮链接。

我的插件代码是：

<?php
/* Plugin Name: Eventism
Plugin URI:
Description: Event Management System
Version: 1.0
Author: Ali Azlan
Author URI:
License: GPLv2 or later
*/

defined('ABSPATH') or die("No script kiddies please!");

//Include Javascript library
wp_enqueue_script('eventism', plugins_url( '/script1.js' , __FILE__ ) , array( 'jquery' ));
// including ajax script in the plugin Myajax.ajaxurl
wp_localize_script( 'eventism', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php')));

wp_register_script( "eventism", plugins_url( '/script1.js' , __FILE__ ), array('jquery') );
wp_enqueue_script( 'jquery' );

function eventism_activation() {
eventism_install();
}
register_activation_hook(__FILE__, 'eventism_activation');

function eventism_deactivation() {
}
register_deactivation_hook(__FILE__, 'eventism_deactivation');

function eventism_install () {
global $wpdb;

/*
* We'll set the default character set and collation for this table.
* If we don't do this, some characters could end up being converted
* to just ?'s when saved in our table.
*/

$charset_collate = '';

if ( ! empty( $wpdb->charset ) ) {
$charset_collate = "DEFAULT CHARACTER SET {$wpdb->charset}";
}

if ( ! empty( $wpdb->collate ) ) {
$charset_collate .= " COLLATE {$wpdb->collate}";
}

$sql1 = "CREATE TABLE eventism_users (
id mediumint(9) NOT NULL AUTO_INCREMENT,
name varchar(30) DEFAULT '' NOT NULL,
cell varchar(13) DEFAULT '' NOT NULL,
eventcode varchar(10) DEFAULT '' NOT NULL,
cnic varchar(13) DEFAULT '',
email varchar(30) DEFAULT '',
confirm VARCHAR(2) DEFAULT 'n' NOT NULL,
time TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
UNIQUE KEY id (id),
UNIQUE INDEX id_UNIQUE (id ASC)
) $charset_collate;";

$sql2 = "CREATE TABLE eventism_events (
id mediumint(9) NOT NULL AUTO_INCREMENT,
event varchar(10) DEFAULT '' NOT NULL,
event_date varchar(30) DEFAULT '' NOT NULL,
create_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
UNIQUE KEY id (id),
UNIQUE INDEX id_UNIQUE (id ASC)
) $charset_collate;";

require_once( ABSPATH . 'wp-admin/includes/upgrade.php' );
dbDelta( $sql1 );
dbDelta( $sql2 );

$wpdb->insert(
$table_name='eventism_events',
array(
'event' => 'swaik1',
'event_date' => '10 december 2014',
)
);

}

add_action( 'admin_menu', 'eventism_menu' );

function eventism_menu() {
add_menu_page( 'Eventism', 'Eventism', 'manage_options', 'eventism_menu');
add_submenu_page( 'eventism_menu', 'Eventism', 'Eventism', 'manage_options', 'eventism_menu', 'eventism_options_events' );
}

function eventism_options_events() {
if ( !current_user_can( 'manage_options' ) ) {
wp_die( __( 'You do not have sufficient permissions to access this page.' ) );
}
echo '<div class="wrap">';
echo '<h1><b>Eventism</b></h1><sub><i> by Azlan</i><hr>
';

echo '<h1>Add new Event</h1>';

echo '
<form type="post" id="newevent" action="">
<b>Event Name: </b>
<input type="text" name="eventname" id="eventname">
<b>Event Date: </b>
<input type="date" name="Event Date" id="eventdate" placeholder="yyyy-mm-dd">
<input type="submit" value="Add" id="add1">
</form>

<div id="feedback"></div><hr>
';
echo '
<h1>Customer Database</h1>

';
}

function addevent(){

global $wpdb;

$name = $_POST['eventname'];
// $date = $_POST['eventdate'];
$date = "meridate";

if($wpdb->insert('eventism_events',array(
'event'=>$name,
'event_date'=>$date,
))==FALSE){

echo "Error";

}
else {
echo "Event Added Successfully!";

}
die();
}

add_action('wp_ajax_addevent', 'addevent');
add_action('wp_ajax_nopriv_addevent', 'addevent');

?>

我的jquery文件（script1.js）代码是：

jQuery(document).ready(function(){
jQuery("#add1").click(function(){
var eventname = jQuery("#eventname").val();
var eventdate = jQuery("#eventdate").val();
jQuery.ajax({
type: 'POST',
url: MyAjax.ajaxurl,
data: {"action": "addevent", "eventname":eventname},
success: function(data){
alert(data);
}
});
});
});

Answer 1

正如您所说，地址也在点击时更改，这意味着之前的页面重新加载和ajax事件。因此，您需要使用event.preventDefault()

来阻止默认提交事件

jQuery("#add1").click(function(e){
    e.preventDefault();

    var eventname = jQuery("#eventname").val();
    var eventdate = jQuery("#eventdate").val();

    jQuery.ajax({
        type: 'POST',
        url: MyAjax.ajaxurl,
        data: {"action": "addevent", "eventname":eventname, eventdate:eventdate},
        success: function(data){
            alert(data);
        }
    });

});

插件管理页面中的Ajax表单无效

1 个答案: