jquery - WordPress プラグインでの Ajax リターンの問題

Question

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 応答にも管理メニューの一部が表示されることです。

ここにスクリーンショットがあります：ここに画像の説明を入力

右側の緑色のボックスには、admin の部分が表示されていないはずですが、表示されているのはなぜですか?

私は問題を考え出したことを知っています、

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

Ajax 呼び出しが同じページに送信されるようにします。これはbanner-pluggin.php 、アクションの後に Ajax のように HTML がbanner-pluggin.php読み込まれることを意味します。

しかし、Ajax の投稿をに直接送信するreorder.phpと、HTML がないため、HTML は応答として読み込まれません。

しかし、別の問題: SQL クエリが実行されず、エラーも表示されず、SQL が実行されません

score 0 · Accepted Answer

コードに問題が多すぎるため、ゼロから始めることをお勧めします。

問題：

サブメニューページ ( ) に完全な HTML ページを埋め込まないでくださいview-banner.php。
CSS と Javascript は、プラグインのページadmin_enqueue_scriptsにのみ追加する必要があります。アクションフックで現在行われているように、どこでも追加する必要はありません。init
どのようにして Ajax を機能させたのかはわかりませんが、適切な方法ではないことは確かです。

再び開始:

WordPress Answers でタグを調べ<plugin-development>てください。プラグインページを追加してそのコンテンツをレンダリングする方法の良い例がたくさん見つかります。新しいプラグインの出発点として、モデレーターの1 人からのこのプラグインクラスデモを常に使用しています。
WordPress での Ajax の実例: [1]、[2]および[3]。

jquery - WordPress プラグインでの Ajax リターンの問題

1 に答える 1

Related

Reference