Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I am trying to implement list.js (http://listjs.com/) inside my WordPress widget, so far with no success.

At first I have tried it in a simple index.html file outside the WordPress environment just to see if I did things right - it worked.
But when I put the code inside my widget it didn't anymore.

This is the code of my working index.php:

<script type="text/javascript" src="https://raw.github.com/javve/list/master/list.min.js"></script>

<div id="hacker-list">

    <input class="search" />
    <span class="sort" data-sort="name">Sort by name</span>
    <span class="sort" data-sort="city">Sort by city</span>

    <ul class="list">
        <li>
            <h3 class="name">Jonny</h3>
            <p class="city">Stockholm</p>
        </li>
        <li>
            <h3 class="name">Jonas</h3>
            <p class="city">Berlin</p>
        </li>
    </ul>
</div>

<script type="text/javascript">
    var options = {
        valueNames: [ 'name', 'city' ]
    };

    var hackerList = new List('hacker-list', options);
</script>

If you click on "name" or "city" you will see the list getting ordered.

Edit - code of the widget:

    <?php
    /*
    Plugin Name: pageLoopWidget
    Plugin URI: ******
    Description: pageLoopWidget
    Author: ******
    Version: 1.0
    Author URI: ******
    */
    class pageLoopWidget extends WP_Widget {
      function pageLoopWidget() {
        $widget_ops = array('classname' => 'pageLoopWidget', 'description' => 'Displays the pageLoopWidget.' );
        $this->WP_Widget('pageLoopWidget', 'pageLoopWidget Widget', $widget_ops);
      }

    function form($instance) {
      $instance = wp_parse_args( (array) $instance, array(
          'title' => '',
          'listPages' => '',
          'pageLoopWords' => '',
          'pageLoopColor' => '',
          'CustomCSS' => ''
        ));
      $title = $instance['title'];
      $listPages = $instance['listPages'];
      $pageLoopWords = $instance['pageLoopWords'];
      $pageLoopColor = $instance['pageLoopColor'];
      $CustomCSS = $instance['CustomCSS'];
    ?>

    <p><?php include 'codeBackend.php'; ?></p> <?php /* this contains the exact code pasted upside */ ?>

    <?php
      }

    function update($new_instance, $old_instance) {
      $instance = $old_instance;
      $instance['title'] = $new_instance['title'];
      $instance['listPages'] = $new_instance['listPages'];
      $instance['pageLoopWords'] = $new_instance['pageLoopWords'];
      $instance['pageLoopColor'] = strip_tags($new_instance['pageLoopColor']);
      $instance['CustomCSS'] = $new_instance['CustomCSS'];
      return $instance;
    }

    function widget($args, $instance) {
      extract($args, EXTR_SKIP);

      echo $before_widget;
      $title = empty($instance['title']) ? ' ' : apply_filters('widget_title', $instance['title']);

      if (!empty($title))
        echo $before_title . $title . $after_title;

    ?>

    <?php include 'codeFrontend.php'; ?>

    <?php
      echo $after_widget;
      } 
    }
    add_action( 'widgets_init', create_function('', 'return register_widget("pageLoopWidget");') );
share|improve this question
2  
And where is your widget code? –  Ralf912 Apr 20 '13 at 14:45
    
That aside, it is generally recommendable to add your code inline in the question rather than linking to a third-party code sharing site. This being your second question, I took the liberty to put it in there. –  Johannes Pille Apr 20 '13 at 15:45
    
thanks Johannes, funny thing is i thought one of this site rules was not to bloat the questions with code os i was even quite proud of making my homework but now the question is absolutely more readable so thanks you. Going to add the widget code now. –  Nicola Apr 20 '13 at 18:10

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.