asked on

CSS Question

Hi,

I have following HTML. I would like to select the span element that has a class = metadata but only from the tr element with an id = Management_x0020_Approvals_x0020~Show and replace / format the text inside this span element with my own content. Please help.

<tr id="Trade_x0020_Compliance_x0020_Req~Show" unselectable="off">
    <td class="ms-formlabel" nowrap="true" valign="top" style="width: 408px; white-space: nowrap;">
        <h3 class="ms-standardheader" id="Trade_x0020_Compliance_x0020_Req">
            <nobr>c. Trade Compliance Required?</nobr>
        </h3>
    </td>
    <td class="ms-formbody" valign="top">
        <!-- FieldName="c. Trade Compliance Required?"
             FieldInternalName="Trade_x0020_Compliance_x0020_Req"
             FieldType="SPFieldChoice"
          -->
        <span dir="none"><select title="c. Trade Compliance Required?" class="ms-RadioText" id="Trade_x0020_Compliance_x0020_Req_819baa9d-0cf4-4d77-bf9c-dd91fec60395_$DropDownChoice"><option selected="selected" value="Yes">Yes</option><option value="No">No</option><option value="N/A">N/A</option></select><br></span>

        <span class="ms-metadata">[Contoso is required to notify the U.S. Bureau of Industry and Security (BIS) that Contoso has made available to the public an encryption source code which can be found at a specific web link. Accordingly the Software Release Manager must provide the specific web link (where the encryption source code will be made available) to the Trade Compliance Team <a href="mailto:[ExportCompliance@Contoso.com]" target="_blank">[ExportCompliance@Contoso.com]</a>&nbsp;prior to the release. ]]</span>

    </td>
</tr>



<tr id="Management_x0020_Approvals_x0020~Show" unselectable="off">
    <td class="ms-formlabel" nowrap="true" valign="top" style="width: 408px; white-space: nowrap;">
        <h3 class="ms-standardheader" id="Management_x0020_Approvals_x0020">
            <nobr>Management Approvals Required?</nobr>
        </h3>
    </td>
    <td class="ms-formbody" valign="top">
        <!-- FieldName="Management Approvals Required?"
             FieldInternalName="Management_x0020_Approvals_x0020"
             FieldType="SPFieldChoice"
          -->
        <span dir="none">
        <select title="Management Approvals Required?" class="ms-RadioText" id="Management_x0020_Approvals_x0020_80e8f3e1-af38-4dd8-9bb0-c63a7d206521_$DropDownChoice"><option selected="selected" value="No">No</option><option value="Yes">Yes</option></select><br></span>

        <span class="ms-metadata">Management Approvals required in case of: <br> <br>1.Any release of a Contoso developed software under an open source license. <br> <br>2.Release of proprietary software (complementary to the open source software) through a public repository other than the extranet (such as github). <br>The approving functions are: Direct Manager, Engineering VP, BU VP, EVP, Legal and CTO. <br> <br>The following cases are exempted from management approvals:<br>-Release of Contoso developed software based on existing third party open source software (e.g., patches), and any amendments to such software which were performed in a manner that does not include any Contoso or third party trade secrets or other intellectual property. <br> <br>-Release based on prior versions of open source software previously approved by management. <br> <br>The above exemptions do not derogate from any other approval that may be required under other processes or policies. <br> <br>The approval form to be used for the approval process is [reference]</span>

    </td>
</tr>

Open in new window

Scott Fell

You have a small problem here. An ID has to be unique. That is the id Management_x0020_Approvals_x0020 is used in multiple places and things will break if you continue like this.

Otherwise,

tr#Management_x0020_Approvals_x0020~Show span.ms-metadata {
    /* stuff here */
}

Open in new window

But fix your id's first.

HainKurt

@scott

I see only one one ID, all ids are unique...

and we can easily do this using jquery

$("#Management_x0020_Approvals_x0020~Show .ms-metadata").html("my own html");

Open in new window

I just tried and "~" creates problem
so change the id of that element as "Management_x0020_Approvals_x0020-Show" and this will work

$("#Management_x0020_Approvals_x0020-Show .ms-metadata").html("my own html");

Open in new window

HainKurt

I found a way to use that id as is!

$("#Management_x0020_Approvals_x0020\\~Show .ms-metadata").html("my own html");

Open in new window

demo
https://jsfiddle.net/ye0e699v/

Scott Fell

Your right about the id. I only searched on "Management_x0020_Approvals_x0020"

Either way, you still should target the span with the class as the class could be used in other areas.

Techsavy

ASKER

Hi Hain kurt,

Thank you for the CSS selector however, I tried below html and it seems to ignore. If I use simple replacement text as you shown in the solution, it works. What is wrong with my below text? i need to emphasize the "exempted".

$("#Management_x0020_Approvals_x0020\\~Show .ms-metadata").html(" Management Approvals required in case of:

1.Any release of a Contoso developed software under an open source license.
 
2.Release of proprietary software (complementary to the open source software) through a public repository other than the extranet (such as github).
The approving functions are: Direct Manager, Engineering VP, BU VP, EVP, Legal and CTO.
 
The following cases are *exempted* from management approvals:
 
1. Release of contoso developed software based on existing third party open source software (e.g., patches), and any amendments to such software which were performed in a manner that does not include any Marvell or third party trade secrets or other intellectual property.
 
2. Release based on prior versions of open source software previously approved by management.
 
The above exemptions do not derogate from any other approval that may be required under other processes or policies.
 
The approval form to be used for the approval process is below.");

ASKER CERTIFIED SOLUTION

HainKurt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Techsavy

ASKER

Fantastic!! worked like a charm!!