Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 518
  • Last Modified:

jquery plugin on dynamic data

I have a page which outputs an unordered list from the database.  A sample of the output is below.  When the data is placed statically on the page the jquery.treeview works perfectly, but when attempting to post the data dynamically (either in page_load or OnInit) it gives the error "Object doesn't support this property or method".  It doesnt' matter if the code is on the page statically, or if it's placed dynamically:          
$(document).ready(function() {
        $('ul:first').treeview(); });
}
or
 $(document).ready(function() {
        $('$tree').treeview(); });
}

both give the same error.  My question is: How can I make this work, so that the jQuery object is attached to the UL on the page?  I believe that the UL needs to be added to the DOM, but using the onInit it should already be there, shouldn't it?

Thanks,
Geoff
<ul id="tree" class="open treeview-black">
<li value="bbuckley">
<span style="font-weight:bold;">bbuckley</span>
<ul>
<li value="abarnes">
<span style="font-weight:bold;">abarnes</span>
<ul><li>
	<div>
		<table class="gvClass " cellspacing="0" align="Left" rules="all" border="1" style="width:100%;border-collapse:collapse;margin-left:0px;width:100%;">
			<thead>
				<tr>
					<th scope="col">&nbsp;</th><th scope="col">Collector</th><th scope="col">Acct #</th><th scope="col">Name</th><th scope="col">Due Date</th><th scope="col">Amount</th><th scope="col">Method</th><th scope="col">Comments</th>
				</tr>
			</thead><tbody>
				<tr>
					<td><a href="javascript:__doPostBack('gv_abarnes','Delete$0')">Delete</a></td><td>abarnes</td><td>102020554</td><td>name 1</td><td style="white-space:nowrap;">Aug 30, 2010</td><td>236</td><td>&nbsp;</td><td>&nbsp;</td>
				</tr><tr>
					<td><a href="javascript:__doPostBack('gv_abarnes','Delete$1')">Delete</a></td><td>abarnes</td><td>101731054</td><td>name 2</td><td style="white-space:nowrap;">Aug 21, 2010</td><td>150</td><td>&nbsp;/td><td>&nbsp;</td>
				</tr><tr>
					<td><a href="javascript:__doPostBack('gv_abarnes','Delete$2')">Delete</a></td><td>abarnes</td><td>101340084</td><td>name 3</td><td style="white-space:nowrap;">Aug 23, 2010</td><td>50</td><td>&nbsp;</td><td>&nbsp;</td>
				</tr><tr>
					<td><a href="javascript:__doPostBack('gv_abarnes','Delete$3')">Delete</a></td><td>abarnes</td><td>101341467</td><td>name 4</td><td style="white-space:nowrap;">Aug 23, 2010</td><td>200</td><td>&nbsp;</td><td>&nbsp;</td>
				</tr><tr>
					<td><a href="javascript:__doPostBack('gv_abarnes','Delete$4')">Delete</a></td><td>abarnes</td><td>101033494</td><td>name 5</td><td style="white-space:nowrap;">Sep 02, 2010</td><td>500</td><td>&nbsp;</td><td>2 of 2</td>
				</tr><tr>
					<td><a href="javascript:__doPostBack('gv_abarnes','Delete$5')">Delete</a></td><td>abarnes</td><td>102282108</td><td>name 6</td><td style="white-space:nowrap;">Aug 18, 2010</td><td>574</td><td>&nbsp;</td><td>&nbsp;</td>
				</tr><tr>
					<td><a href="javascript:__doPostBack('gv_abarnes','Delete$6')">Delete</a></td><td>abarnes</td><td>101260079</td><td>name 7</td><td style="white-space:nowrap;">Aug 24, 2010</td><td>1117.66</td><td>&nbsp;</td><td>&nbsp;</td>
				</tr><tr>
					<td><a href="javascript:__doPostBack('gv_abarnes','Delete$7')">Delete</a></td><td>abarnes</td><td>101100506</td><td>name 8</td><td style="white-space:nowrap;">Aug 23, 2010</td><td>400</td><td>&nbsp;</td><td>&nbsp;</td>
				</tr>
			</tbody><tfoot>

			</tfoot>
		</table>
	</div></li></ul>
	</li></ul>
	</li></ul>

Open in new window

0
GeoffSutton
Asked:
GeoffSutton
  • 2
  • 2
1 Solution
 
wuffCommented:
To select the <ul> id you should use the '#':

$('#tree')...

Maybe you mistyped in your question.

Are you sure the dynamically generated ul has the id assigned to it?
0
 
GeoffSuttonAuthor Commented:
I am.  I have tried using the straight ID and the ClientID.  Neither works.  And you're right:  I mistyped the question thanks.
0
 
wuffCommented:
I found a cool dynatree plugin. Maybe it's helpful?

http://wwwendt.de/tech/dynatree/
0
 
GeoffSuttonAuthor Commented:
the problem isn't generating the tree. I have tried 3 different plugins (Collapse, Treeview and JSTree) all the with same effect.  Somehow it's not recognizing the UL as being part of the DOM so the jquery isn't binding to it.
Geoff
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now