CSS + jQuery - Unable to perform .toggle() and repeated jQueryTemplate Item [I must warn you this is a bit overwhelming]

Question

Okay here we go:

Stream.html (Template file)

<div class="streamItem clearfix">
    <input type="button" />

    <div class="clientStrip">
        <img src="" alt="${Sender}" />
    </div>
    <div class="clientView">
        <a href="#" class="clientName">${Sender}</a>
        <p>${Value}</p> 
        <p>${DateTime}</p>  

        <div class="itemGadgets">
            <ul>
                <li class="toggleInput">Value</li>
                <li></li>
            </ul>
        </div>
        <div class="inputContainer">
            <input type="text" value="" />
        </div>
    </div>
</div>

<div class="spacer" />

Default.aspx (jQuery)

$('.toggleInput').live('click', function () {
    $(this).parent().parent()
        .find('.inputContainer').toggle();

    $(this).parent().parent().find('.inputContainer')
        .find('input[type=text]').focus();
});

Update: The above has been changed to:

        $('.toggleInput').live('click', function () {
            $(this).closest(".clientView").find(".inputContainer").toggle()
            $(this).closest(".clientView").find(".inputContainer")
            .find('input[type=text]').focus();
        });

Issues with jQuery:

1. I have comments that belong to each .streamItem. My previous solution was to use ListView control as follows:

   <ItemTemplate>
       <asp:Panel ID="StreamItem" CssClass="StreamItem" runat="server">
       ...
       <!--  Insert another nested ListView control here to load the comments for the parent stream. -->
   

   So as you can see, this is not a solution since I started using jQuery Templates and I am fetching the data using the following jQuery $.ajax method:

   $.ajax({
       type: 'POST',
       url: 'Services.asmx/GetStream',
       data: "{}",
       contentType: 'application/json',
       success: function (Stream) {
           $.get('Templates/Stream.html', function (template) {
               $.tmpl(template, Stream.d).appendTo("#Stream");
           });
       }
   });
   

   How can I resolve this without using the old ListView solution but by using jQuery Templates to load the comments whenever I am getting data for a specific stream? I am using a simple WebMethod to return my data as follows:

   [WebMethod]
   public List<Stream> GetStream()
   {
       List<Stream> Streams = Stream.GetRange(X, X, HttpContext.Current.User.Identity.Name);
       return Streams;
   }
   

2. I am looking for a way to handle the .toggleInput click event. I need check if .Comments (a main container for the (to be comments container <div>)) has children (or more than one .commentItem). If so, then I need to show that .inputContainer and hide all the other .inputContainer divs with .Comments size() == 0 if they're visible.

Please see the image below:

Update: CSS Issue below is resolved. (I had a conflict)

#globalContainer div 
{
    float               : right;
    position            : relative;
    display             : inline-block; /* <-- Thank you Firebug. */
}

Default.aspx (Partial CSS)

div.streamItem div.clientView
{
    float               : left;
    width               : 542px;
}
div.streamItem div.clientView p
{
    margin              : 5px 0 0 0;
    font-size           : 10pt; 
}
div.streamItem div.clientView
div.inputContainer 
{
    display             : none; /* Doesn't hide .inputContainer */
    padding             : 2px;
    background-color    : #f1f1f1;
}

Issues with CSS:

On page load, display: none; has no effect.

That's it! If you're reading this I'd like to thank you for your time and thoughts! :)

Answer 1

yuo are trying to access elements in wrong place

in js:

 $('.toggleInput').live('click', function () {
        $(this).parent().parent()
....

is it has no .inputContainer child element - there is nothing to toggle

(.closest wouldn't work also, because .inputContainer is not a parent of the .toggleInput, but its parents sibling )

---

jQuery selector would be $(this).closest('.itemGadgets').next();

---

for 2.

inside your click handler

var $currentInputContainer =  $(this).closest(".clientView").find(".inputContainer");
....
$('.inputContainer').each(function(){
  var $this = $(this);

   $this.toggle( $('.commentItem', $this).length > 0 );

});

//but it is better always to show the inputContainer which link was clicked
$('.inputContainer').not($currentInputContainer).each(function(){./*toggle empty|not empty containers */..});
$currentInputContainer.show();