How to change content in a text block
I have HTML that looks like this:
<td class="targetTD">
<a href="http://foo.com">
<span>content</span>
</a>
**Text I want to modify**
<span>more content</span>
</td>
targetTD
iterates dynamically based on the content being displayed. For each iteration, I need to remove the ":" substring from the beginning of the code in the text block. Unfortunately, this is not in its own element, and I have no way of wrapping it in a neat and tidy id / class. I did some searches and found some js I thought might do the trick:
<script>
var myString = $('.targetTD').html();
myString = myString.replace(': ','');
$('.targetTD').html(myString);
</script>
But this results in a console error:
Cannot get property "replace" from undefined or null reference.
Final update (solution)
Thanks to @Vaibhav for solving the problem! This script did the trick:
<script type="text/javascript">
$(function() {
$('.targetTD').each(function () {
$(this).html($(this).html().replace(/\:\s/g, ''));
});
});
</script>
Update 1
Thanks to @BenM, I was able to stop the build error using the following code:
<script>
$(function() {
$('.targetTD').html(function() { $(this).html().replace(': ', ''); });
});
</script>
Although I don't get the error now, it still doesn't remove the ":" from the text block. Any ideas on why this might be?
Update 2
To provide some of the specifics of SharePoint in general, in response to a comment from @ElvisLikeBear:
-
The specific task I'm trying to accomplish is to hide the column name from a grouped list. In SP2010 it was easy to do this by hiding the ms-gb class. In 2013 Microsoft focused on expand / collapse button with this class, so hiding it with wholesale is not an option. I successfully hid the span with the column name (in my code above, the span wrapped in a), but the ":" is uselessly still in the textbox and now it just floats there at the start of each category name.
-
The code is deployed to the page level as a snippet using the Script Editor web part.
source to share
Brendan, the problem with your code is that you are replacing ':' with '' but you are not assigning it to the same td again.
Function Replace(':','')
replaces only the first occurrence of ':'. Follow my code. it will replace all ":" with "".
With a link with "targetTD will iterate dynamically depending on the displayed content"
I assume you need a foreach loop to iterate over all Tds.
Html: -
<table>
<tr>
<td class="targetTD">
<a href="http://foo.com">
<span>content</span>
</a>
Test:Test1
<span>more content</span>
</td>
</tr>
<tr>
<td class="targetTD">
<a href="http://foo.com">
<span>content</span>
</a>
Test:Test1:test2
<span>more content</span>
</td>
</tr>
<tr>
<td class="targetTD">
<a href="http://foo.com">
<span>content</span>
</a>
Test:Test1:test3:test4
<span>more content</span>
</td>
</tr>
</table>
JQuery: -
<script type="text/javascript">
$(function() {
$('.targetTD').each(function () {
$(this).html($(this).html().replace(/\:/g, ''));
});
});
</script>
The script is checked and works fine.
source to share
Your tag indicates that this is being done on the SharePoint site, so your code won't run. You need to deploy it correctly for SharePoint.
You can do this in a solution or function, or if it is a single page script, you must use a script web part (called the Content Editor web part in SharePoint 2010 and 2007), you can also add the page snippet code in SharePoint 2013.
You can also add the script to the tag via the SharePoint Designer , however I don't think that would be the best practice except for a few (it would be the simplest approach for a non-SharePoint Devleoper, however).
source to share