New Post: Reload GetListItems on Form Change

Tucker,
Absolutely - and thank you for asking.. it shows that you not only want to get the solution but want to also understand a little more about what is/was going on... and improve your skills.

In looking back at your initial example, I think the issue there was that you were not emptying out the <ul> before appending items... I'm not quite sure why you were only seeing 1 item - in looking at your initial code, I would have through you would continue to see growing list of items (you kept appending)... If you were using .html() - then yes, you would see only the last item because .html() replaces the entire content of the #Querycontent with whatever you give it...

The key in what you were trying to do is emptying the <ul> only once and before you start to append new values to the <ul>. I think this might have been where you went wrong - you had the .empty() inside the loop (.each()), so you were emptying out the <ul> on every z:row iteration and thus erasing whatever was appended to it last.

So in my sample code I gave you a more efficient way to do that - basically:

1. First we initiate a variable with blank string: var liHtml = "";
   We do this prior and outside to the .each() loop so that the variable is scoped correctly... Defining it outside of the .each() loop ensusre we can use it after the .each() loop when we are ready to insert it into the page.
2. Then we loop through all of the z:row records and append the <li> html markup to the variable that was initiated outside the loop. That is what that liHtml += does.... it append the text to the existing value in liHtml
3. After looping through all of the z:row's, we empty out the container (#Querycontent) and append the new values to it in 1 shot.
   (Tip: It's best to do your DOM inserts in 1 shot rather than one at a time - better performance).
   

Hope this helps... good luck with the project

/Paul