CSS + jQuery - Unable to perform .toggle() and repeated jQueryTemplate Item [I must warn you this is a bit overwhelming]
- by user1027620
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:
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;
}
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:
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! :)
