2013-07-28 99 views
0

我正在创建一个WordPress插件,并且我有一个奇怪的问题。Ajax在WordPress插件中返回问题

首先,我喜欢展示我的WordPress脚本。

<?php 
/* 
Plugin Name: Banner Plugin 
*/ 

define('MYPLUGINNAME_PATH', plugin_dir_path(__FILE__)); 
register_activation_hook(__FILE__, 'my_banner_plugin_activate'); 
register_deactivation_hook(__FILE__, 'my_banner_plugin_deactivate'); 

function my_banner_plugin_activate(){ 
    //Activation method. 
    activate(); 
} 

function my_banner_plugin_deactivate(){ 
    //Deactivation method. 
    global $wpdb; 
    $wpdb->query(" DROP TABLE ".$wpdb->prefix."banner "); 
} 

add_action('admin_menu', 'register_custom_menu_page'); 

function register_custom_menu_page() { 
    add_menu_page('Banner Menu Display', 'Banner Menu', 'read', 'banner-menu', 'display_banner_panel' /*, $icon_url, $position*/); 
    add_submenu_page('banner-menu', 'Add Baner', 'Add Baner','read', 'add-banner','display_banner_subpanel_add'); 
} 

if(isset($_POST['action']) && $_POST['action']=='add_banner'){ 
    submit_form(); 
} 

if(isset($_POST['action']) && $_POST['action']=='updateRecordsListings') 
{ 
    include 'reorder.php'; 
} 

function header_css_page() { 
    wp_register_style($handle = 'header-css', $src = plugins_url('css/banner_style.css', __FILE__), $deps = array(), $ver = '1.0.0', $media = 'all'); 
    wp_enqueue_style('header-css'); 
} 

add_action('init', 'header_css_page'); 

function reorder_css_page() { 
    wp_register_style($handle = 'reorder-css', $src = plugins_url('css/reorder_style.css', __FILE__), $deps = array(), $ver = '1.0.0', $media = 'all'); 
    wp_enqueue_style('reorder-css'); 
} 

add_action('init', 'reorder_css_page'); 

function display_banner_panel() 
{ 
    global $wpdb; 
    $banner_list = $wpdb->get_results("select * from ".$wpdb->prefix."banner order by banner_order desc"); 
    ?> 
    <div class='admin-custom'> 
    <?php include 'view_banner.php'; ?> 
    </div> 
<?php 
} 

view_banner.php的脚本如下;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

<script type="text/javascript" src="<?php echo plugins_url();?>/banner-pluggin/js/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="<?php echo plugins_url();?>/banner-pluggin/js/jquery-ui-1.7.1.custom.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $(function() { 
     $("#contentLeft2 ul").sortable({ opacity: 0.6, cursor: 'move', update: function() { 
      var order = $(this).sortable("serialize") + '&action=updateRecordsListings'; 
      $.post("", order, function(theResponse){ 
       $("#contentRight2").html(theResponse); 
      });                
     }         
     }); 
    }); 
}); 
</script> 
</head> 
    <body> 
    <h1>Add Banner</h1> 
<br/> 
<br/> 
<div id="contentWrap2"> 
     <div id="contentLeft2"> 
      <ul> 
       <?php 
       //$query = "SELECT * FROM records ORDER BY recordListingID ASC"; 
       //$result = mysql_query($query); 

       //while($row = mysql_fetch_array($result, MYSQL_ASSOC)) 
       //{ 
           foreach($banner_list as $row) 
           { 
       ?> 
          <li id="recordsArray_<?php echo $row->banner_id; ?>"> 
           <div> 
            <img src="<?php echo plugins_url().'/banner-pluggin/banner/'. $row->banner_img;?>" height="80px" width="100px"/> 
           </div> 
          </li> 

              <?php } ?> 
      </ul> 
     </div> 

     <div id="contentRight2"> 
      <p>Array will be displayed here.</p> 
      <p>&nbsp; </p> 
     </div> 

    </div> 
    </body> 
</html> 

reorder.php如下;

<?php 
global $wpdb; 
    $action = mysql_real_escape_string($_POST['action']); 
    $updateRecordsArray  = $_POST['recordsArray']; 

    if ($action == "updateRecordsListings") 
    { 
     $listingCounter = 1; 
     foreach ($updateRecordsArray as $recordIDValue) 
      { 

      $query = "UPDATE wp_banner SET banner_order = " . $listingCounter . " WHERE banner_id = " . $recordIDValue; 
      if(mysql_query($query)) 
      { 

      } 
      else { 
       mysql_error(); 
      }//die('Error, insert query failed'); 
      $listingCounter = $listingCounter + 1; 
      } 

     echo '<pre>'; 
     print_r($updateRecordsArray); 
     echo '</pre>'; 
     echo 'If you refresh the page, you will see that records will stay just as you modified.'; 
    } 
?> 

的问题是,AJAX调用也工作正常,唯一的问题是,Ajax响应还显示管理菜单的一部分,

这里是截图: enter image description here

在右侧的绿色框中,管理员的部分不应显示,但为什么显示?

我知道我想通了这个问题,

$.post("", order, function(theResponse) 

使Ajax调用被送到这意味着banner-pluggin.php 和行动后banner-pluggin.php的HTML是越来越加载Ajax中的同一页。

但是,如果我直接发送Ajax帖子到reorder.php,那么因为没有HTML,HTML将不会作为响应加载。

但随后另一个问题:SQL查询不运行,也不显示有任何错误,也没有SQL被执行

回答

0

太多的问题与您的代码,我建议从头开始。

问题:

  1. 你不应该在你的子菜单页面(view-banner.php)嵌入一个完整的HTML页面。

  2. CSS和Javascript应该admin_enqueue_scripts添加,只有在插件的页面,不到处像它与init行动挂钩,现在发生的事情。

  3. 我不明白你如何设法使Ajax工作,但它肯定不是正确的方法。

再次开始:

  1. 研究在WordPress的答案<plugin-development>标签,你会发现如何添加插件页面,并呈现其内容很多很好的例子。我总是使用我们版主的onePlugin Class Demo作为新插件的起点。

  2. 一些在WordPress中使用Ajax的例子:[1][2][3]