Populate label in datalist if empty

AWSHelpdesk
AWSHelpdesk used Ask the Experts™
on
I have a asp_label in a datalist ItemTemplate that is populated dynamically when the page loads

What i want to do is use JQuery to find if the label is empty (there will be more then one on the page because it is like a header for the list item and if it is empty add a value to it

This is what the datalist looks like, so if lblAddressCapation is empty I want the Text of the label to be "Additional Addresses"
<asp:datalist id="AddressList" runat="server" DataKeyField="id" RepeatColumns="1" RepeatDirection="Vertical"
					CellSpacing="0" class="AddressList">
					<ItemTemplate>
					    <h3><asp:Label runat="server" id="lblAddressCaption" class="lblAddressCaption"></asp:Label></h3>
						<asp:Label CssClass="BVSmallText" runat="server" ID="AddressDisplay" Text='<%# DataBinder.Eval(Container, "DataItem.FirstName") %>'>
						</asp:Label><br>
						<asp:ImageButton CommandName="Edit" ID="EditButton" ImageUrl="/shop/bvthemes/ws/buttons/edit.png" AlternateText="Edit"
							Runat="server" />&nbsp;
						<asp:ImageButton CommandName="Delete" ID="DeleteButton" ImageUrl="images/buttons/Delete.gif" AlternateText="Delete"
							Runat="server" />
						<asp:ImageButton CommandName="Select" ID="SelectButton" ImageUrl="images/buttons/Select.gif" AlternateText="Select"
							Runat="server" visible="false" />&nbsp;
						
					</ItemTemplate>
				</asp:datalist>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
David H.H.LeeDigital Marketing (Hospitality)

Commented:
Hi AWSHelpdesk,
>>lblAddressCapation is empty I want the Text of the label to be "Additional Addresses"
Try this:


<script type="text/javascript" src="jquery.js"></script>
 
<script type="text/javascript">
$(document).ready(function(){
 
$(".lblAddressCaption").html($(".lblAddressCaption").html()==''?"Additional Addresses":$(".lblAddressCaption").html())
 
});
</script>

Open in new window

Author

Commented:
Actually this isn't going to work because the label is being hidden in the code behind (which I can't edit) if it doesn't have the value Primary Address so it is being rendered as <h3/>

Is there anyway I can detect this <h3/> tag and when it is found render the text within it to "Additional Addreses"

Here is the code of how the one's with Primary Address are rendered (which are fine and I don't need to change) and the ones that I want to add the text Additional Addresses to;
<h3><span class="lblAddressCaption" id="AddressList_ctl00_lblAddressCaption"><strong>Primary address</strong></span></h3>
 
vs
 
<h3/>

Open in new window

Author

Commented:
Can I use Jquery to find every instance of <h3/> on the page and replace it with:

<h3>Additional Address</h3>
HTML5 and CSS3 Fundamentals

Build a website from the ground up by first learning the fundamentals of HTML5 and CSS3, the two popular programming languages used to present content online. HTML deals with fonts, colors, graphics, and hyperlinks, while CSS describes how HTML elements are to be displayed.

David H.H.LeeDigital Marketing (Hospitality)

Commented:
>>...Can I use Jquery to find every instance of <h3/> on the page and replace it with:....

You just need to replace it by control type.
eg:
$(document).ready(function(){
 $("h3").html("Additional Address");
});
</script>

Author

Commented:
No i can't as per my comments above - there are other h3's that render and I only want to change the text for those that end up like this "<h3/"

See my post above for details
David H.H.LeeDigital Marketing (Hospitality)

Commented:
Do you just need to replace those all instances of <h3> that resides inside rendered gridview's block? Please clarify before i post my reply.

Author

Commented:
No, there are multiple h3's being rendered on the page from code behind (which I don't have access to change) some are being rendered correctly as <h3><span class="lblAddressCaption" id="AddressList_ctl00_lblAddressCaption"><strong>Primary address</strong></span></h3>

but when there is no value for the label the h3 is being rendered as <h3/> and as I don't have access to the code behind to change what is rendered here i need to do this client side - so whenever the h3 renders as <h3/> I want to change it to <h3>Additional Address</h3>
David H.H.LeeDigital Marketing (Hospitality)

Commented:
Ok, got your clear clarification. But, you may try to check in query level before render the output. This may reduce the duplicate work as need.

Try this fix as requested:
$(document).ready(function(){

 $("h3").each(function(i){
                              $(this).replaceWith(jQuery.trim($(this).html())==''?"<h3>Additional Addresses</h3>":jQuery.trim($(this).html()));
                        });

});
</script>

Author

Commented:
Works great accept one small problem, it is now stripping the H3 tag from around this one

<h3><span class="lblAddressCaption" id="AddressList_ctl00_lblAddressCaption"><strong>Primary address</strong></span></h3>

is becoming

<span class="lblAddressCaption" id="AddressList_ctl00_lblAddressCaption"><strong>Primary address</strong></span>
David H.H.LeeDigital Marketing (Hospitality)

Commented:
Tweak this line:
       $(this).replaceWith(jQuery.trim($(this).html())==''?"<h3>Additional Addresses</h3>":"<h3>" & jQuery.trim($(this).html()) & "</h3>");
                       
Digital Marketing (Hospitality)
Commented:
Ignore previous post, use "+" instead of "&" for the string joining in script.
Tweak this line:
       $(this).replaceWith(jQuery.trim($(this).html())==''?"<h3>Additional Addresses</h3>":"<h3>" + jQuery.trim($(this).html()) +"</h3>");

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial