0

最初のワードプレスウィジェットを作成していますが、管理ウィジェットページでソート可能なjqueryuiを使用する際に問題が発生します。

私の調査で見たところ、WordPressにはすでにjquery（およびjquery uiライブラリ）が含まれていますが、それを使用するには、wp_enqueue_scriptを使用する必要があります。

私がやった。

ただし、jqueryコードの一部のみが機能します。jqueryuisortableは機能しません。

これが私のabc_categories_widget.jsです

jQuery(document).ready(function() {
    // The following doesn't seem to be working
    jQuery("#abc_product_categories_sortable").sortable({
        cursor: 'move'
    });

    // The below statements work as expected
    jQuery('#abc_product_categories_sortable').disableSelection();
    jQuery('#abc_product_categories_sortable li').disableSelection();
});

これが私のウィジェットに関連するコードです

    function form($instance) {
        wp_enqueue_script('abc_categories_widget_js', plugin_dir_url(__FILE__) . 'abc_categories_widget.js', array('jquery','jquery-ui-sortable'), '1.0', true);
        wp_enqueue_style('abc_categories_widget_css', plugin_dir_url(__FILE__) . 'css/jquery-ui-1.8.21.custom.css');

        $abc_categories = $instance['abc_product_categories'];

        global $wpdb;
        $product_categories = $wpdb->get_results('SELECT * FROM ' . $wpdb->prefix . 'abc_categories', ARRAY_A);
?>
        <ul id="abc_product_categories_sortable" class="ui-sortable">
        <?php foreach($product_categories as $a_category) { ?>
            <li id="<?php echo 'cid_' . $a_category['category_id']; ?>" class="ui-state-default" style="padding:5px 10px"><?php echo $a_category['category_name']; ?></li>
        <?php } ?>
        </ul>
<?php
    }
}

誰が何が問題なのか知っていますか？

4

1 に答える 1

1

私は何とかラップすることによって私の問題を解決することができ<ul>ました<div>

つまり、phpコードで

<div id="abc_product_categories_sortable">
        <ul id="abc_product_categories_sortable_list" class="ui-sortable">
        <?php foreach($product_categories as $a_category) { ?>
            <li id="<?php echo 'cid_' . $a_category['category_id']; ?>" class="ui-state-default" style="padding:5px 10px"><?php echo $a_category['category_name']; ?></li>
        <?php } ?>
        </ul>
<div>

そして私のjavascriptコードで

jQuery(document).ready(function() {
    jQuery("#abc_product_categories_sortable ul").sortable({
        cursor: 'move'
    });

    jQuery('#abc_product_categories_sortable ul').disableSelection();
    jQuery('#abc_product_categories_sortable li').disableSelection();
});
于 2012-07-07T06:31:53.063 に答える