EzDevInfo.com

Having trouble getting list.js to work

So I am new to using JS and I have looked over the list.js site and can't seem to figure this out. I can't even get the demo to run on my server. I can get my code to work on web based places like Encode and what not, but not my server.

http://brewingbard.biz/smm/test/main-list2.html

Can someone please tell me why this is failing? I copy stuff that works in one place and put it up here and then it stops.

List.js - By date sorting issue

In my application I am using the List.js for sorting purpose. All the "string" values are working fine. But I do have the "modified date" in the column.

When I click "modified by date" - to sort, this is just considering the date values what is there is the text, ex: 1/4/11.. and sorting accordingly. because of this approach I am getting wrong sort orders.

how can I make instead it should sort by the real value of the number's what the dates are?

Here is my code:

new List('mfi-col2', {
       valueNames: ['companyLegalName', 'phazeName', 'contactName', 'number', 'enrollId', 'accountType']
                        });

Instead of "number" is it possible to send $(".number").data-number? So let it use the time stamp that I am getting from server?

Or can anyone suggest an alternative for this plugin?

List.js - search from multiple locations

How to search from multiple locations with List.js plugin?

<div id="test_list">

<input type="text" class="fuzzy-search" />

<div class="clear"></div>

<ul class="list" style="width: 33.333%; float: left;">
<li><p class="city">Guybrush Threepwood</p></li>
<li><p class="city">Elaine Marley</p></li>
<li><p class="city">LeChuck</p></li>
<li><p class="city">Stan</p></li>
<li><p class="city">Voodoo Lady</p></li>
<li><p class="city">Herman Toothrot</p></li>
<li><p class="city">Meathook</p></li>
</ul>

<ul class="list" style="width: 33.333%; float: left;">
<li><p class="city">Carla</p></li>
<li><p class="city">Otis</p></li>
<li><p class="city">Rapp Scallion</p></li>
<li><p class="city">Rum Rogers Sr.</p></li>
<li><p class="city">Men of Low Moral Fiber</p></li>
<li><p class="city">Murray</p></li>
<li><p class="city">Cannibals</p></li>
</ul>

</div>

http://jsfiddle.net/9yyx3tp7/

Where are 2 .list lists, but working only on first. Any advice how to search from both lists? Thanks.

get values from {id:3,name:"John"} from list.js

I made a list with listjs (listjs.com)

Now i'm using the function get(), this wil give me this return:

itemsInList = [
    { id: 1, name: "Jonny" }
    , { id: 2, name "Gustaf" }
];
listObj.get("id", 2); -> return { id: 2, name: "Gustaf" }

Now i'm want to get the name id with pure javascript only.

function getUserName(uid) {
    var itemValues = hackerList.get("id", uid)[0];
    console.log("The name of the user is: " + itemValues.name);
    // or use alert..
    //alert("The name of the user is: " + itemValues.name);
}

Sorry not concrete... I want from the return value:

{ uid: 2, name: "Marc" ... }

to itemValues.name -> Marc

Udate

Forgot to use uid function ("id"). When I use values() it will work. Thank you for the answer.

Updated Fiddle Fiddle

Remove pagination in list.js when user clicks a link

I am using list.js to filter a list of elements along with pagination. To activate pagination the following has to be added. The object property page determines how many items are visible on each page. I want to deactivate pagination when a user clicks a link, i.e. remove it so all the items appear on one page and are not paginated. Is this possible?

 var options = {
            valueNames: ['packageid', 'categoryid',  'meta-package', 'meta-category', 'meta-brand', 'meta-company', 'meta-country'],
            page:24,
            plugins: [
                [ 'paging', {
                    name: "duja",
                    pagingClass: "bottomPaging",
                    innerWindow: 1,
                    outerWindow: 2
                } ]
            ]
        };

        var featureList = new List('products-list', options);

Trigger on keyboard event

I am trying to put together a proof of concept for a touchscreen idea. I'm not the most skilled with javascript/ jquery so stick with me here as I try to explain myself.

I am using listjs (listjs.com) which I have working fine. The next step was to build the keyboard. Now I found this tutorial and followed it and got this working on the same text field (changed from a text-area)

http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-keyboard-with-css-and-jquery/

If I use my keyboard (physical) to type in the text field the listjs works, but if I use the keyboard I created using tutsplus.com it fills the text box but the lisjs doesn't respond.

I suspect the key is in this line from listjs.js

h.addEvent(h.getByClass(options.searchClass, self.listContainer), 'keyup', self.search);

I am not really sure what is happening here, way beyond my js skills. I tried (probably naively) changing keyup to change and onchange but that did nothing.

I am testing in Webkit browsers (Safari and Chrome) these are the only two that matter for my project while it's in proof of concept.

I am hoping a js/ jquery guru will come to my rescue and be able to help me out in return for digital flattery.. :)

Any ideas ?

wildcard/regular expressions in List.js?

I have a news page in which I would like to have buttons that filter by month, using the span class 'date'. Using list.js, I can only filter by using an exact matching string. Is there a wildcard I can use to display all items that contain the word November

HTML

<button class="btn" id="filter-oct">October</button>
<button class="btn" id="filter-nov">November</button>
<div class="newsitem">
    <h2>News title</h2>
    <p><span class="date">Thursday 31 November 2013</span> Some text, more text</p>
    <p>Should you have any concerns, require additional information or wish to discuss this matter further please contact me</p>
</div>

JS

<script type="text/javascript">
  var options = {
    valueNames: [ 'date' ]
  };
  var featureList = new List('election-list', options);
  $('#filter-nov').click(function() {
    featureList.filter(function(item) {
      if (item.values().date == "November 2013") {
        return true;
      } else {
        return false;
      }
    });
    return false;
    });
</script>

It's on this line where it does the matching - but only matches the exact word/s

if (item.values().date == "November 2013") {

I've tried using &= and ^= to try to get a match but neither work.

Thanks

How do I add this List Filter to Etherpad-Lite using the Small_List plugin?

Problem: I am trying to add this list filter (available here, http://listjs.com/examples) to the home page of the Etherpad-Lite with the plug-in "small_list" installed. The idea is that this filter will filter through all the pads listed on the homepage.

I wouldn't call myself a programmer at all, so bear with me! But these are the steps I've taken to try to figure it out by myself. I've spent the last two days trying to figure it out, so I am hoping someone out there will have some pity for me. I'm assuming anyone that will help me will already have node.js installed on their computer, you can then get etherpad-lite from here: https://github.com/ether/etherpad-lite and then in the settings.json file, uncomment this:

"users": {
"admin": {
  "password": "changeme1",
  "is_admin": true
},
"user": {
  "password": "changeme1",
  "is_admin": false
} 
},

At this point, you can type in cd etherpad-lite/bin/run.sh and it will run on localhost:9001. Go to localhost:9001/admin and type the credentials above and then quickly install the plug-in: "small_list".

The plug-in files themselves located at etherpad-lite/node_modules/ep_small_list/. From my poor understanding is that index.js is somehow importing a div into the actual index html page of the application located at etherpad-lite/src/templates/index.html.

I've done so many different things to try and make the list filter (list.js) work on the small_list plug-in.

Currently, I have this:

var padManager = require('ep_etherpad-lite/node/db/PadManager');
var async =  require('../../src/node_modules/async');
exports.eejsBlock_indexWrapper= function(hook_name, args, cb) {
args.content += '<div id="small_list"></div><script src="/static/js/jquery.js"></script>           
<script>$(function () { $("#small_list").load("/small_list"); });</script>';};

exports.registerRoute = function(hook_name, args, cb) {
args.app.get("/small_list", function(req, res) {


    async.waterfall([
        function(callback) {
            padManager.listAllPads(callback);
        },
        function(data, callback) {
            r = '<input class="search" placeholder="Search"><button class="sort" data-sort="name">Sort by name</button><ul class="list">';
            for (p in data.padIDs){
                r += '<li><h3 class="name"><a rel='nofollow' href="/p/' + data.padIDs[p] + '">' + data.padIDs[p] + '</li>';
            }
            r += '</ul>';
            res.send(r);
        },
    ]);
});
};

and I have on the index.html file:

<script src="http://listjs.com/no-cdn/list.js"></script>

<script>
var options = {valueNames: [ 'name' ]};
var userList = new List("small_list", options);
</script>

Any help would be greatly appreciated! Thanks in advance.

Javascript listjs multiple filter

I am trying to do the multiple search or filter with ListJS. Looks like my code doesn't work! Like: fist filter the product & then filter with color & then filter with size.

That works for only normal search.

I am trying to do the multiple search as I have two search field.

 <div id="users">   <div class="searchbox">
        <form action="" method="get">
          <input class="search" id="id" placeholder="ID" type="text" />
        </form>   </div>   <div class="searchbox">
        <form action="" method="get">
          <input class="search" id="d2" placeholder="D2" type="text" />
        </form>   </div>

        <script src="javascript/search/list.js"></script> 
<script type="text/javascript">

var options = {
<!--  valueNames: [ 'name', 'type', 'keywords-search', 'd2' ]-->
    valueNames: [ 'keywords-search', 'd2' ]
};
var userList = new List('users', options);    
</script>


<script src="javascript/search/list.js"></script>
<script type="text/javascript">

var options = {
<!--  valueNames: [ 'name', 'type', 'keywords-search', 'd2' ]-->
    valueNames: [ 'keywords-search', 'd2' ]
};
var userList = new List('users', options);    
</script>
<script type="text/javascript">
$('#filter-clothes').on('click', function() {
    var idFilter = $('#id').text();
    var itemFilter = $('#d2').text(); 

    console.log('idFilter: ' + idFilter);
    console.log('d2Filter : ' + d2Filter);
    console.log('Applying filter now...');

    featureList.filter(function(item) {
        console.log('Running filter() on item: ('+item+')');
        console.log('item.values().id: ' + item.values().id);
        console.log('item.values().d2: ' + item.values().d2);

        return 
            (idFilter==='All packages' || item.values().id === idFilter) 
            && (d2Filter==='All items' || item.values().d2 === d2Filter);
    });

    return false;
});

</script>

Any of you guys have any simple example?

list.js weird error with content in chrome

i have experienced a problem with the plugin "list.js". And i don't know how to solve it. I have been troubleshooting for a long time now, and i can't find any errors.

var options = {
  valueNames: [ 'name', 'description', 'category' ],
};

var featureList = new List('lovely-things-list', options);

$('#filter-jyls').click(function() {
  featureList.filter(function(item) {
    if (item.values().category == "Jyl") {
      return true;
    } else {
      return false;
    }
  });
  return false;
});

$('#filter-fyns').click(function() {
  featureList.filter(function(item) {
    if (item.values().category == "Fyn") {
      return true;
    } else {
      return false;
    }
  });
  return false;
});
$('#filter-none').click(function() {
  featureList.filter();
  return false;
});

$('#filter-sjas').click(function() {
  featureList.filter(function(item) {
    if (item.values().category == "Sja") {
      return true;
    } else {
      return false;
    }
  });
  return false;
});

$('#filter-stors').click(function() {
  featureList.filter(function(item) {
    if (item.values().category == "Stor") {
      return true;
    } else {
      return false;
    }
  });
  return false;
});

$('#filter-lols').click(function() {
  featureList.filter(function(item) {
    if (item.values().category == "Lol") {
      return true;
    } else {
      return false;
    }
  });
  return false;
});

Here is a fiddly to my problem:

Click on the button: "jyl (click me a lot, - i crash)" And you will se how the list jumps around. It should work like the button: "Lol (click me i am fine too)"

As you can see, it list the content very weird and it jumps around. This problem happens in chrome, but not in IE. Any ideas?

Thanks a lot.

can we add a value of attr src Instead of the value of attr class in the list of values in list.js?

this is my code html:

   <html>
        <head>
        </head>
        <body>
          <input class="search" placeholder="Search"  />

          <div id="users">

           <ul class="list">

          </div>
          <script  src="jquery-1.10.1.min.js" ></script>
          <script src="list.min.js"></script>
          <script src="code.js"></script>
   </body>
</html> 

and this is my code js:

var test = [{name:"Joo",born:1986,source:"impat.png"},
            {name:"Jonas",born:1888,source:"impat.png"}];

   var options = {
            item: "<li><img src='source'/><h3 class='name'></h3><p class='born'></p></li>"
        }

   var listObj = new List('users', options,test);

I know it doesn't work but I hope someone offers me a good solution

Javascript list.js to this php code

I love this script list.js from www.listjs.com. It seems to be the perfect fit for searching and filtering the output of a php file below, but I just can get it to work, I only need to add 7 or so lines of code but its not working. Can anyone tell me how come? Thanks

The code that I added is highlighted

<?php
defined('_JEXEC') or die();
?>
**<script type="text/javascript" src="list.js"></script>**
<form action="<?php echo CRoute::getURI(); ?>" method="post" id="jomsForm" name="jomsForm" class="community-form-validate">
<div class="jsProfileType" **id="jsProfileType"**>
    **<input class="search" placeholder="Search" />
        <button class="sort" data-sort="label">
            Sort
        </button>**
    <ul class="unstyled">
    <?php
        foreach($profileTypes as $profile)
        {
    ?>
        <li class="space-12">

            <label for="profile-<?php echo $profile->id;?>" class="radio">
                <input id="profile-<?php echo $profile->id;?>" type="radio" value="<?php echo $profile->id;?>" name="profileType" <?php echo $default == $profile->id ? ' disabled CHECKED' :'';?> />
              <strong class="bold"><?php echo $profile->name;?></strong>
            </label>
            <?php if( $profile->approvals ){?>
                <span class="help-block"><?php echo JText::_('COM_COMMUNITY_REQUIRE_APPROVAL');?></span>
            <?php } ?>

            <span class="help-block">
                <?php 
                    $profile->description = JHTML::_('content.prepare',$profile->description);
                    echo $profile->description;?>
            </span>

            <?php if( $default == $profile->id ){?>
                    <em><?php echo JText::_('COM_COMMUNITY_ALREADY_USING_THIS_PROFILE_TYPE');?></em>
            <?php } ?>



        </li>
    <?php
        }
    ?>
    </ul>
</div>
<?php if( (count($profileTypes) == 1 && $profileTypes[0]->id != $default) || count($profileTypes) > 1 ){?>
<div style="margin-top: 5px;">
    <?php if( $showNotice ){ ?>
    <span style="color: red;font-weight:700;"><?php echo JText::_('COM_COMMUNITY_NOTE');?>:</span>
    <span><?php echo $message;?></span>
    <?php } ?>
</div>
**<script>
var options = {
    list: "space-12"
};
var userList = new List('jsProfileType', options);
</script>**
<table class="ccontentTable paramlist" cellspacing="1" cellpadding="0">
  <tbody>
    <tr>
        <td class="paramlist_key" style="text-align:left">
            <div id="cwin-wait" style="display:none;"></div>
            <input class="btn btn-primary validateSubmit" type="submit" id="btnSubmit" value="<?php echo JText::_('COM_COMMUNITY_NEXT'); ?>" name="submit">
        </td>
        <td class="paramlist_value">

        </td>
    </tr>
</tbody>
</table>
<?php } ?>
<input type="hidden" name="id" value="0" />
<input type="hidden" name="gid" value="0" />
<input type="hidden" id="authenticate" name="authenticate" value="0" />
<input type="hidden" id="authkey" name="authkey" value="" />
</form>

dropdown for list.js

list.js is using search box as default. Anyone know, how to use dropdown selection box for list.js?

I have used:

Javascript:

<script type="text/javascript">
$('#tpi').change(function () {
    var selection = this.value; //grab the value selected
var options = { valueNames: [ 'name', 'type', 'tpi' ]
};
var userList = new List('users', options);  
   });
</script>

HTML

      <select name="tpi" id="tpi">
        <option selected="selected" value="tpi">TPI</option>
        <option value="11">11</option>
        <option value="14">14</option>
        <option value="16">16</option>
        <option value="18">18</option>
        <option value="19">19</option>
      </select>

But not working. :(

Source: (StackOverflow)

List.js is returning wrong results

I'm using List.js for the first time. I really liked it, and in the moment I am using it together with rails 4.2 to create a Pokémon team creator tool. I am also using jQuery 1.11.3 as the JavaScript library for rails.

I have this right now:

It's coded like this:

<script>
  var options = {
    valueNames: ['name']
  };
var userList = new List('pokemons', options);
</script>


<div id="pokemons">
  <input class="search form-control" placeholder="Search" />  
  <ul class="list" style="list-style: none; padding:0; margin:0;">
    <% PokemonDefault.where(forme: nil).each do |pokemon| %>
      <li>
        <div class="name">
          <%=image_tag 'miniaturePokemon/'+pokemon.code+'.png' %>
            <%=pokemon.name %>
        </div>
      </li>
      <% end %>
  </ul>
</div>

It gets all pokémon from PokemonDefaults table, and shows their image and name.

However, List.js is acting weird when I type stuff like 'baa':

As you can see, any of this pokémon has "baa" in their name. What is happening?

Source: (StackOverflow)

Problems with the wonderful list.js and sorting by price

I've built a site for a local bike store I visit frequently, I'm currently hosting a non-live version at http://mattgreenfield.co.uk/bikestore/store.html.

I've just installed the brilliant list.js (http://listjs.com) to enable the store page to sort and filter (the owner does not wish to sell products online but to get customers phoning up and visiting the brick and mortar store).

It seems to work pretty well but the sort by price button doesn't seem to be sorting by price, the values should be sorting high to low but are not. Would this be anything to do with it only sorting by the first digit of the number possibly? £4000 seems to be sorted as less that £479 for example - the first digit is the same but 7 is more than 0 (second digit).

I may have missed something simple as the original example from where I copied the code was sorted by year, years only ever have 4 digits so this problem would not occur.

Source: (StackOverflow)