I am using a plugin List.js. Its working fine. But don't know how to add image src or href values in it. It works fine with and other tags.

Here is the URL for List.js. /

and here is the documentation.

here is my code.

<script src=".9.0.js"></script>
<script src=".0.0.js"></script>
<script src=".10.3/jquery-ui.js"></script>

<div id="Div1">
    <input class="search" id="Text1" />
    <span class="sort" data-sort="name">Sort by name</span>
    <span class="sort" data-sort="desc">Sort by desc</span>
    <ul class="list">
    </ul>
</div>

<div style="display: none;">

    <div id="hacker-item1">

        <div style="width: 20%; float: left">
            <table>
                <tr>
                    <td colspan="2" align="center" valign="top">

                        <a href="">

                            <img alt="" width="125" height="125" border="0" class="name">



                            </img>
                        </a>
                    </td>
                </tr>
                <tr>
                    <td align="center" valign="top" class="desc">

                        <br></br>

                    </td>
                    <td class="createdDate"></td>
                </tr>
            </table>
        </div>

        <h3 class="name"></h3>
        <p class="desc"></p>
        <p class="createdDate"></p>
    </div>
</div>
<script src="list.js"></script>

<script type="text/javascript">

    var options = {
        item: 'hacker-item1'
    };

    var values = [
{ name: 'Jonny', desc: 'Stockholm', createdDate: 'June 8, 2013' }
, { name: 'Jonny', desc: 'Stockholm', createdDate: 'May 8, 2013' }
, { name: 'sssssss', desc: 'eeeeeeeee', createdDate: 'June 20, 2013' }
    ];
    //    values.push({name : xml.getElementsByTagName("title")[0].childNodes[0].nodeValue, desc : xml.getElementsByTagName("title")[0].childNodes[0].nodeValue,createdDate : xml.getElementsByTagName("publishdate")[0].childNodes[0].nodeValue});
    var hackerList = new List('Div1', options, values);
    //alert(hackerList.items.length + '--');

</script>

I am using a plugin List.js. Its working fine. But don't know how to add image src or href values in it. It works fine with and other tags.

Here is the URL for List.js. http://listjs./

and here is the documentation. https://github./javve/list

here is my code.

<script src="http://code.jquery./jquery-1.9.0.js"></script>
<script src="http://code.jquery./jquery-migrate-1.0.0.js"></script>
<script src="http://code.jquery./ui/1.10.3/jquery-ui.js"></script>

<div id="Div1">
    <input class="search" id="Text1" />
    <span class="sort" data-sort="name">Sort by name</span>
    <span class="sort" data-sort="desc">Sort by desc</span>
    <ul class="list">
    </ul>
</div>

<div style="display: none;">

    <div id="hacker-item1">

        <div style="width: 20%; float: left">
            <table>
                <tr>
                    <td colspan="2" align="center" valign="top">

                        <a href="">

                            <img alt="" width="125" height="125" border="0" class="name">



                            </img>
                        </a>
                    </td>
                </tr>
                <tr>
                    <td align="center" valign="top" class="desc">

                        <br></br>

                    </td>
                    <td class="createdDate"></td>
                </tr>
            </table>
        </div>

        <h3 class="name"></h3>
        <p class="desc"></p>
        <p class="createdDate"></p>
    </div>
</div>
<script src="list.js"></script>

<script type="text/javascript">

    var options = {
        item: 'hacker-item1'
    };

    var values = [
{ name: 'Jonny', desc: 'Stockholm', createdDate: 'June 8, 2013' }
, { name: 'Jonny', desc: 'Stockholm', createdDate: 'May 8, 2013' }
, { name: 'sssssss', desc: 'eeeeeeeee', createdDate: 'June 20, 2013' }
    ];
    //    values.push({name : xml.getElementsByTagName("title")[0].childNodes[0].nodeValue, desc : xml.getElementsByTagName("title")[0].childNodes[0].nodeValue,createdDate : xml.getElementsByTagName("publishdate")[0].childNodes[0].nodeValue});
    var hackerList = new List('Div1', options, values);
    //alert(hackerList.items.length + '--');

</script>

• javascript
• jquery

• You know your code is invalid, right? An image tag is self-closing, and needs a src. Your link needs an href value, otherwise it won't be clickable in some browsers (and won't go anywhere)... – MassivePenguin Commented Aug 13, 2013 at 9:58
• As you can see there is a img an <a> tag. its values es from the XML. Now I want it src and Href value that I got by xml.getElementsByTagName("imgsrc")[0].childNodes[0].nodeValue , I can assign it to image and <a> tag. – user952072 Commented Aug 13, 2013 at 10:03

6 Answers 6

Here's the solution I found.

var options = {
    valueNames: [
        'name',
        { attr: 'href', name: 'link'},
        { attr: 'src', name: 'image'}
    ],
    // This describes how items must look like in HTML
    item: '<li><a class="link"><img class="image"><h4 class="name"></h4></a></li>'
}
var values = [
    {
        name: 'John Cena',
        image: 'http://someimage./a.png',
        link: 'http://johncena.'
    },
    {
        name: 'Matt Damon',
        image: 'http://someimage./b.png',
        link: 'http://thebournidentity.'
    }
]
var usersList = new List('your-list', options, values);

The associated HTML code would be:

<div id="your-list">
    <input class="search" placeholder="Search">
    <ul id="list"></ul>
</div>

Note that this does not work if the item you specify isn't wrapped in an <li>.

Note update: it does work without being wrapped inside <li>. it worked within <div> as well.

It is possible to append list items to an existing list by looping through all objects. See this example:

http://codepen.io/hugoborjesson/pen/zLluo

As shown in the example you can add image src and href with js.

var ul = jQuery('ul.list');
jQuery.each( values, function( i, item ) {
    ul.append( 
        "<li class='list-item'>" +
        "<h3 class='name'>" + item.name + "</h3>" +
        "<p class='desc'>" + item.desc + "</p>" +
        "<p class='createdDate'>" + item.createdDate + "</p>" +
        "<a class ='img-link' href='" + item.link + "'<img src='" + item.img_src + "' class='img'>bild</a>" +
        "</li>" );
});

Hope this helps.

The ability to use images and links (by filling out href/src) was introduced in version 1.2.0. You supply objects in the valueNamesarray where you specify the attr that should be filled.

Below is an example showing usage for a link.

JavaScript:

var options = {
    valueNames: [
        { name: 'mylink', attr: 'href' },
        'mytext'
    ]
};

var mylist = new List('mylist', options);

mylist.add({
  mylink: 'http://example./subfolder',
  mytext: 'Example. Subfolder'
});

HTML:

<script src="//cdnjs.cloudflare./ajax/libs/list.js/1.2.0/list.min.js"></script>


<div id="mylist">
    <ul class="list">
        <li>
            <a href="http://example." class="mylink mytext">Example.</a>
        </li>
    </ul>
</div>

Here's a minimal JSFiddle example.

Here's a similar example in their docs.

I'm afraid it looks like the plugin can't be used in this way.

The plugin wraps the value you provide it (in values) with a tag with a class that matches the array element's key (e.g. passing name : Jonny inserts 'Jonny' inside any tag with a class of 'name'). You can't do this with tag attributes (like href or src), as they're in a different scope to where the plugin is operating.

You could wrap the values in an a tag, but that's not what you're trying to do here.

I think you'll need to either extend the plugin to support this, or write your own code to execute after the plugin to rewrite the generated markup.

When I tried it for the img tag "src" was used automatically for the value.. so the img was displayd as listitem when i used the url as value.

It would be nice if the same would work with inputs (that "value" would be used)

In your JS:

var options = {valueNames: [
'name',
{ attr: 'href', name: 'link' }]};

Next, you can use in your HTML:

<a class="name link"></a>

http://listjs./examples/data-attributes-custom-attributes/ Look here, you can use own attributes and href attribute.