Question

I am creating my first wordpress widget and I am having problems using jquery ui sortable in admin widgets page.

From what I have seen on my research, WordPress already includes jquery (and jquery ui libraries), but in order to use it I have to use wp_enqueue_script.

Which I did.

But only some of the jquery code works. The jquery ui sortable does not work.

Here is my 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();
});

Here is the relevant code my widget

    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
    }
}

Anyone knows what might be the problem?

Answer 1

I have managed to solve my problem by wrapping <ul> in a <div>

i.e. in php code

<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>

and in my javascript code

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();
});