user952072 user952072 - 2 months ago 26
Javascript Question

add image src and <a> href in List.js

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.com/

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

here is my code.

<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.0.0.js"></script>
<script src="http://code.jquery.com/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>



Answer

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.

Comments