Javascript list.js to this php code

Question

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>

What is wrong? Do you get an error? You must include details. In fact, it's common (and advised) to include a fiddle (jsfiddle.net) to demonstrate your problem. You probably won't get much help with your question the way it is now. — crempp
– crempp, Commented Dec 21, 2013 at 6:17
What errors, if any, appear in your browser debugging tools? — user2910265
– user2910265, Commented Dec 21, 2013 at 6:19
My apologies, as you can see, I am still very very new to this site, I get the following error Uncaught TypeError: Cannot read property 'childNodes' of undefined list.js:1183 tagged @crempp — user2658779
– user2658779, Commented Dec 21, 2013 at 6:55
Ok, that's a start, we're getting closer to the issue. The error you posted states that a property named childNodes is being requested from an undefined object. That, however is in list.js on line 1183. I really think you will have to post this on jsfiddle. There's just no other way to help with a 1k+ line javascript file. — crempp
– crempp, Commented Dec 21, 2013 at 7:11
I have never even known about jsfiddle before right now, I will definitelt try it out. The javascript file is very popular, list.js from listjs.com and has been used for years so I really really suspect that it is the way I am trying to use it and declare variables that is the problem. I will keep try, both on here and on jsfiddle, also on any other place I can get because I need this to work asap.Just as a by the way, do you think that the fact that my list is populated using php and not populated using normal text could be the problem? tagged @user2910265 — user2658779
– user2658779, Commented Dec 21, 2013 at 7:29

THelper · Accepted Answer · 2014-05-01 07:36:45Z

3

I don't know PHP, but I have seen this error before when I used list.js in my own project. It turned out I didn't define things properly.

You did set up a div with a proper id, but you seem to be missing a 'list' class. Try changing

<ul class="unstyled">

to

<ul class="list">

Second, I don't think that 'list' is a supported keyword in options (at least not in the most recent list.js version). Try changing your options definition to

var options = {
    valueNames: [ 'space-12' ]
};

Third, if you want search to work change

<button class="sort" data-sort="label">

to

<button class="sort" data-sort="space-12">

edited May 1, 2014 at 7:36

answered Jan 15, 2014 at 13:33

THelper

15.7k6 gold badges68 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2658779 Over a year ago

Thanks a lot for the advice, I will definitely try it out today and get back by evening (from 1800hrs +3 GMT). Thanks

Collectives™ on Stack Overflow

Javascript list.js to this php code

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related