阿賈克斯不工作在提交按鈕

Question

我創建這個wordpress插件它工作正常，但在這裏subimt數據使用ajax問題。我已經創建了ajax代碼，但它不起作用。

請幫弄明白

謝謝

下面是代碼

<script> 
var data = { 
    action: 'join_mailinglist', 
    email: email 
}; 

jQuery("#mailinglistsubmit").hide(); 
jQuery(".ajaxsave").show(); 
jQuery.post("<?php echo admin_url('admin-ajax.php'); ?>", data, 
function(response){ 
    jQuery(".ajaxsave").hide(); 
    jQuery("#mailinglistsubmit").show(); 
});  

return false; 

</script> 

<?php 
/* 
Plugin Name: MyFirst 
Plugin URI: http://zachis.it 
Description: ajax form. 
Version: 1.0 
Author: Zachary Smith 
Author URI: http://zachis.it 
License: GPL2 
*/ 
?> 


<?php 
/* What to do when the plugin is activated? */ 
register_activation_hook(__FILE__,'my_first_plugin_install'); 

/* What to do when the plugin is deactivated? */ 
register_deactivation_hook(__FILE__, 'my_first_plugin_remove'); 

function my_first_plugin_install() { 
/* Create a new database field */ 
add_option("my_first_data", 'Testing !! My Plugin is Working Fine.', 'This is my first plugin panel data.', 'yes'); 
} 

function my_first_plugin_remove() { 
/* Delete the database field */ 
delete_option('my_first_data'); 

} 


add_action('admin_menu', 'my_first_admin_menu'); 
function my_first_admin_menu() { 
add_options_page('Plugin Admin Options', 'My Plugin Settings', 'manage_options', 
'my-first', 'plugin_admin_options_page'); 
} 
?> 

<?php 
function plugin_admin_options_page() { 
?> 
<div class="wrap"> 
<?php screen_icon(); ?> 
<h2>Plugin Options Admin Page</h2> 
</div> 
<div class="content"> 

<div class="output"><p><?php echo get_option('my_first_data'); ?></p></div> 
<p> 
<form method="post" action="options.php"> 
<?php wp_nonce_field('update-options'); ?> 
<h2>Enter Text: </h2> 
<textarea name="my_first_data" id="my_first_data" cols="200" rows="20"></textarea> 
<input type="hidden" name="action" value="update" /> 
<input type="hidden" name="page_options" value="my_first_data" /><br /> 
<input style="position: fixed; left: 40%;" id="mailinglistsubmit" type="submit" value="Save Changes" /><img src="<?php admin_url(); ?>/wp-admin/images/wpspin_light.gif" alt="" class="ajaxsave" style="display: none;" /> 
</form> 
</p> 
</div> 
<?php 
} 
?> 
<?php add_action('wp_ajax_my_action', 'my_action_callback'); 
add_action('wp_ajax_nopriv_my_action', 'my_action_callback'); 
?> 

<?php function join_mailinglist_callback() { 
    $email = $_POST['email']; 
    if(!empty($email)) { 
     $yourEmail = 'c@bavotasan.com'; 
     $subject = 'Add me to your mailing list'; 
     $success = mail($yourEmail, $subject, $email); 
     if(!empty($success)) { 
      echo 'Your email is subscribed to our mailing list.'; 
     } else { 
      echo 'There was a problem. Please try again.'; 
     } 
    } 
    die(); 
} ?> 


<style> 
.content { padding-left:150px;} 
.output p {width:700px; height:auto;} 
</style> 

Answer 1

我看到幾件事情錯了這個插件你的事。

首先，爲什麼你的JavaScript代碼被添加到插件的頂部？在WordPress中包含JS的正確方法是將它放在單獨的.js文件中，並使用wp_enqueue_script()將其加載。底部的樣式相同。

一個例子如下：

function my_scripts_method() { 
    wp_enqueue_script(
     'your-script-name', 
     plugins_url('js/your-script.js' , __FILE__), 
     array('jquery') 
    ); 
} 
add_action('wp_enqueue_scripts', 'my_scripts_method'); 

其次，你的PHP插件文件不得可以輸出任何內容，這意味着你不應該看到標題爲將輸出後的任何?>標籤很少有線路。

接下來，爲了讓您的靜態JS文件管理，Ajax的網址，你應該使用這個功能：

wp_localize_script('ajax_get_permalink', 'ajax_get_permalink', array(
    ajax_url => admin_url('admin-ajax.php') 
)); 

在你的JS文件，你應該換主代碼的函數在表單提交時調用。

function mailingListSubmit() { 
    var data = { 
     action: 'join_mailinglist', 
     email: jQuery('#mailingListEmail') 
    }; 

    jQuery("#mailinglistsubmit").hide(); 
    jQuery(".ajaxsave").show(); 
    jQuery.post(ajax_get_permalink.ajax_url, data, 
    function(response){ 
     jQuery(".ajaxsave").hide(); 
     jQuery("#mailinglistsubmit").show(); 
    }); 
} 

最後，你的動作鉤子也是錯誤的。您從代碼複製它（或誰知道在哪裏），但甚至不費心閱讀文檔。

add_action('wp_ajax_my_action', 'my_action_callback'); 

您需要更改my_action_callback，以反映你的函數名join_mailinglist_callback和wp_ajax_my_action到wp_ajax_join_mailinglist - 你在你的JS文件中定義的動作。

上述代碼未經過語法錯誤測試，但應指向正確的方向。你不應該指望你的插件，即使你複製神奇的工作和粘貼這些代碼

瞭解更多關於AJAX在WordPress插件在這裏：http://codex.wordpress.org/AJAX_in_Plugins