Hi there I've been writing an app that is a list of RSS feeds. I've been connecting my buttons to their object counter part (button that shows specific feed E.G BBC button shows the BBC rss feed, Guardian shows Guarian news and hides BBC) however looking at the containers they become quite skewed due to a handlebars helper I'm incorporating to make the feeds look nice.
The helper allows me to shorten feed descriptions and end the shortened version with ellipses. The reason this has caused an issue is because one of the feeds has HTML within it's description meaning after the maxLength HTML markup from the descriptions is still being added to the page. This makes my containers have additional unwanted HTML elements.
I hope this is explanatory enough, the TL;DR is HTML returned in RSS descriptions is adding aditional unwanted HTML to my page. How to fix?
My helper method:
handlebars.registerHelper("rssDesc", function(results) {
var maxLength = 164;
//this checks for multiple descriptions and shows first
if(Array.isArray(results)) {
results = results[0];
}
//this checks to see if text contains html markup and converts it to text HOWEVER doesn't work yet. T_T
if(results.indexOf("<") > -1) {
results = $(results).text();
}
results = results.substring(0, maxLength);
return results.substring(0, Math.min(results.length, results.lastIndexOf(" "))) + " ...";
});
handlebars template
<div class="rssButtons">
<a class="1">news 1</a>
<a class="2">news 2</a>
<a class="3">news 3</a>
<a class="4">news 4</a>
</div>
<div class="rssContainer">
{{#each items}}
<div class="tab" id="{{this.name}}">
{{#each data}}
<div class="news-item">
<span class="news-title">{{title}}</span>
<span class="news-publishing">{{publishingDate}}</span>
<span class="news-description">{{{rssDesc description}}}</span>
</div>
{{/each}}
</div>
{{/each}}
</div>
According to this post the jquery way is the easiest
// retrieves all the text from a string of html.
jQuery(html).text();
According to the link provided here -> jQuery: $(element).text() doesn't work
I read that sometimes the .text(); doesn't always play nice if it's not first. As of two hours of implementation of the .text(); at the beginning of the helper (under the var) things have been great!
Related
This question already has an answer here:
How to duplicate a div in JavaScript
(1 answer)
Closed 3 years ago.
Maybe this is a common question in javascript world, but i can't find any usefull keyword for a profitable search. Long story short:
I have html code generated server side, suppose something like this
<div id="container">
<div class="element">
<!-- yadayada -->
</div>
<div class="element">
<!-- yadayada -->
</div>
</div>
and a client script to add new elements without reloading the page
<script>
// do asynchronous server stuff, then add new div from json server output
var string = "<div class=\"element\">\n" +
" <!-- yadayada -->\n" +
"</div>";
$("#container").prepend($(string));
</script>
Well, if the <!-- yadayada --> internal layout is changed in the server scripts, the javascript code must also be changed.
How can I avoid this ? how can I have only one maintainable source for the yadayada layout ?
Clone the first of the elements and prepend it to the container like so:
$('.element:first').clone().prependTo('#container');
As mentioned in the comments, you can 'clone' an item served up by the server.
elem.cloneNode(true)
On a page that I did, I named one element 'master' and then used that to create all new elements as needed (I hid the master with CSS display: none).
As mentioned in other posts you can use .clone() with jquery.
If you do not want to use jQuery, you can use regular javascript:
Excerpt from the W3 Schools site:
// Get the last <li> element ("Milk") of <ul> with id="myList2"
var itm = document.getElementById("myList2").lastChild;
// Copy the <li> element and its child nodes
var cln = itm.cloneNode(true);
// Append the cloned <li> element to <ul> with id="myList1"
document.getElementById("myList1").appendChild(cln);
The above is an example of cloning in regular javascript from W3 Schools site: https://www.w3schools.com/jsref/met_node_clonenode.asp
I am using Zendesk Help Center but customizing it with JS so apologies if that makes this more difficult.
I have many (~2000) articles which begin with "KCS - " (for instance, KCS - How to Issue a Bill). I now want to remove that "KCS - " from all of the article titles. I successfully used the following code to remove the "KCS - " from those titles:
$('h1').each(function() {
var text = $(this).text();
$(this).text(text.replace('KCS - ', ''));
This works for the articles themselves, but the "KCS - " still appears in search results. I tried the following code to deal with that:
$('li').addClass('search-result').each(function() {
var text = $(this).text();
$(this).text(text.replace('KCS - ',''));
This does remove the "KCS - " but it also removed and tags and results in plain text instead of links appearing in the search results.
I've attached screenshots of the search result code before and after trying to remove the "KCS - ". If anyone has an idea of how I can remove the "KCS - " from the search results without breaking the rest of the code, I would be very grateful. Thanks for your time and thoughts.
Edit: I've posted the browser output as opposed to using screenshots.
Pre-Removal:
`
KCS - Documents: Adding New Files and Folders
<span class="search-result-votes">-1</span>
<div class="search-result-meta">by <a target="_zendesk_lotus" href="/access/return_to?return_to=https://clio1440180657.zendesk.com/agent/users/1229273507/tickets">Name Changed</a> <time datetime="2015-08-26T15:51:48Z" title="2015-08-26 07:51" data-datetime="relative">2 years ago</time> in Working with Clovis Documents > Working with Clovis Documents</div>
<div class="search-result-description">Creating a <em>New</em> Folder You can add a standalone folder from the "All <em>Files</em>" list or from within any other <em>document</em>...</div>
</li> `
Post-Removal
`
Documents: Adding New Files and Folders
-1
by *name changed* 2 years ago in Working with Clovis Documents > Working with Clovis Documents
Creating a New Folder You can add a standalone folder from the "All Files" list or from within any other document...
</li>
`
You are using the text() function on the entire HTML element, which destroys your html tags and converts the entire <div> to a string value.
Instead, target the <a> element inside the <li> like so:
$('li').addClass('search-result').find('a:first-child').each(function() {
var text = $(this).text();
$(this).text(text.replace('KCS - ',''));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
KCS - This is a Search Result Item
<div>Result content...</div>
</li>
<li>
KCS - This is a Search Result Item
<div>Result content...</div>
</li>
<li>
KCS - This is a Search Result Item
<div>Result content...</div>
</li>
</ul>
Note: If you are confident that the <a>element (the link) is always the first child of the <li>, I suggest keeping this as-is, using the :first-child pseudo class.
So I'm currently using Handlebars to grab data from a JSON file to show its data on the screen. Right now it's looking similar to this:
<div class="content" id = "topic">
{{#each topics}}
<a href="{{topic}}" id = "ignore">
<h2>{{topic}}</h2>
</a>
{{/each}}
</div>
I want to replace specific characters within the word topic with another one, for example if the {{topic}} was "Hi%3F" I want to replace the "%3F" part with a '?' everywhere except the part with id="ignore". The replace function I'm using right now is:
$("#topic").html($("#topic").html().replace(/%3F/g,'?'));
this manages to replace everything so far, but I'm not sure how to get it to ignore the tags with the id="ignore". There's probably an easier way to make the link portion work like its supposed to but this is what I have gotten now and I don't want to mess around or change too much.
Thanks!
Is not legal html to duplicate Ids. Ids need to be unique. I'd suggest adding a class="unique" to your anchor tag and use
<div class="content" id = "topic">
<a href="Hi%3F" class = "topic">
<h2>Hi%3F</h2>
</a>
<a href="Hi%3F" class = "topic ignore">
<h2>Hi%3F</h2>
</a>
<a href="Hi%3F" class = "topic">
<h2>Hi%3F</h2>
</a>
<a href="Hi%3F" class = "topic ignore">
<h2>Hi%3F</h2>
</a>
</div>
<script>
$("a.topic").not(".ignore").each(function() {
$(this).html($(this).html().replace(/%3F/g,'?'));
});
</script>
http://jsbin.com/huquyufafe/edit?html,output
I have a series of products on a page with a class .small-product and inside each one I have an image and its tittle as links to a larger view..
What I want to do it to load the larger view ratings into the .small-product layout. here is the html of the .small-product:
<div class="small-product">
<div class="photo"><img src="image/path>"</div>
<div class="lato" id="rating-stars"></div>
<div class="title">Title</div>
<div class="price">£5</div>
</div>
Large view content to Ajax:
<div class="product-large-reviews" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue" itemscope itemtype="http://schema.org/ratingValue" class="rating">{module_ratingrank,/images/rating}</span>
<span itemprop="reviewCount" class="counter-ratings"></span>
</div>
My JS with some Jquery:
$('.small-product').each(function() {
var ratingContainer = $('#rating-stars');
var spacing = ('+');
var smallProductLink = $('.small-product a').attr('href'),
sourceRatings = smallProductLink + spacing +'.product-large-reviews';
ratingContainer.load(sourceRatings);
});
Now what I tried and worked but it only works for 1 individual element is if I use a .load('/href/path/to/large/view .product-large-reviews');
But I want every product to use their link to fetch their own information from their large view.
I get only a 404 response from the server saying that it could not be found, I guess it cannot be found because the web address looks like they are together with the class to load e.g www.site.com/path/to/large/view.product-large-reviews. i tried my ways to make a space between but it keeps returning 404.
Some help would be awesomely appreciated!
So this is actually a very tricky concept to portray so here is my attempt.
I am utilizing an HTML form template in LANDesk Service Desk - tool is irrelevant but important to note that there is back-end code that I cannot touch that is generating HTML.
So basically, the tool is pulling data from a back-end database containing a list of objects. It then inputs this data into an HTML form template that I have created using variables as placeholders for the objects. The HTML is then built on the fly with however many objects are in the database. Thus, I have no way of accessing the head - (which means native JS, and inline CSS).
My template looks like this...
<div class="my-template">
<a class="my-template my-link">My Link</a>
</div>
<script>
var myLinks = document.getElementsByClassName('my-link');
for (var i = 0 ; i < myLinks.length ; i++) {
myLinks[i].style.display = "none";
}
</script>
When I view the source on the loaded page it looks something like this...
<body>
<!--misc. page stuff-->
<!--First Item-->
<div class="auto-create">
<div class="my-template">
<a class="my-template my-link">My-Link</a>
</div>
</div>
<!--Second Item-->
<div class="auto-create">
<div class="my-template">
<a class="my-template my-link">My-Link</a>
</div>
</div>
</body>
All of the elements are formatted the way I want them to be...besides the last element on each page. I have determined that this is because each time the tool is running the object through the template, it is running the script. The issue is, there is a stupid default button that they place at the bottom of each object that is broken. (This is why I have the script changing the style to display: none..should have mentioned this earlier). Basically I want to delay the execution of the script until not only the object has been run through the template...but the entire page has loaded...but I can't seem to get the last button to go away.
I know that this is a lot of poorly written words trying to form an explanation, but I really think this is impossible...but I am convinced there has to be a way. (Also, the company isn't providing us with any help in finding a workaround, so I had to basically MacGyver this one