JavaScript - Using Templates instead of Append - javascript

I went back and fourth on if this is CodeReview or not, and I don't think it is.
I was messing around with CodeSchool's newest AJAX Project and it got me thinking about templating. I'm a huge abuser of
$(function() {
$.ajax({
url: 'someLink',
dataType: 'jsonp',
success: function(response) {
$.each(response.courses.completed, function(k,v){
console.log(k,v)
$('#badges').append('<div class="course"><h3>'+v.title+'</h3><img src="'+v.badge+'"><a href="'+v.url+'" class="btn btn-primary" target=_blank>See Course</a></div>')
})
}
});
});
However, I see on some pages that I inspect, they instead will assign a blank set of <div>'s etc all named 'template'
Example
<div class="templates">
<div class="deck-template">
<div class="deck-item col-xs-12 col-md-4 filter">
<div class="w3-card-4 totalDiv">
<header class="w3-container w3-blue gameTitle">
<h1 data-field="name"></h1>
</header>
<div class="w3-container imgContainer">
<p>
<img data-field="img" src="" class="gameImage" />
<p class="bodyText" data-field="game-id"></p>
</p>
<p class="imageDiv">
<div class="buttonContainer">
<span class="viewerEntry">
Want to watch someone?
<button class="w3-btn w3-dark-grey viewerWatch">Some button text</button>
</span>
</div>
</p>
</div>
<footer class="w3-container w3-blue gameFooter">
<button class="detailButton w3-blue">
<h5>Some Static Text</h5>
</button>
</footer>
</div>
</div>
</div>
</div>
This relies on heavy use of the .clone function. Is this a better method then using JS/jQ to append a ton of HTML Elements? I feel like it has to do with items being pre-loaded in the DOM rather than appended/bandwidth but I'm wondering about the logistics of 'why'.

Related

click event is not working. For few elements it is for few its not

In my code for cmd and normal its working, but for #aboutme its not. Don't know why such event is getting ignored while its working for the above snippet.
var normal = $(".normal");
var cmd = $(".cmd");
normal.on("click", function(){
$(".UI").show();
$(".console").hide();
});
cmd.on("click", function(){
$(".console").show();
$(".UI").hide();
});
$("#aboutme").on("click",function(){
console.log("okay");
});
My Html Code: class dashboard acts as a wrapper.
<div class="dashboard ">
<div class="option">
<div class="normal">Normal</div>
<div class="cmd">Terminal</div>
</div>
<hr style="background-color: white;">
<div class="console">
</div>
<div class="UI ">
<div class="showcase">
<div id="aboutme">
<h2><span>»About</span></h2>
<p>Self-motivated fresher seeking a career in recognized organization to prove my skills and utilize my knowledge and intelligence in the growth of organization.</p>
</div>
<div id="Skills">
<h2><span>Skills</span></h2>
<p> <kbd>Programming Languages</kbd> : Python, Node.js, C++</p>
<p> <kbd>Platform & Development Tools</kbd> : VS Code , Spyder and Jupiter Notebook</p>
</div>
</div>
</div>
Seems to work, can you provide your full HTML
$("#aboutme").on("click",function(){
console.log("okay");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="aboutme">Test</button>

How to find first link and wrap entire div in its href?

I would like to use JavaScript to find the first link in a div (the learn more link) and wrap the entire div with that href dynamically.
How can I revise this code so it does this?
$('div.textPane .DNNModuleContent.ModDNNHTMLC').wrap("<a href=''></a>", function() {
a.href = $('a:first', this).attr('href');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dnn_pane02textLeft" class="flexPane LeftPane textPane">
<div class="DnnModule DnnModule-DNN_HTML DnnModule-499 DnnVersionableControl">
<a name="499"></a>
<div id="dnn_ctr499_ContentPane" style="background-color:#f2a42a;">
<div id="dnn_ctr499_ModuleContent" class="DNNModuleContent ModDNNHTMLC">
<div id="dnn_ctr499_HtmlModule_lblContent">
<h1>Analytic Solutions</h1>
<p>Wilshire serves the investment analytic needs of institutional investors by offering a platform that combines the depth of our capabilities within...
</p>
<h5>Learn More</h5>
</div>
</div>
</div>
</div>
</div>
Clone the element and remove the text content then wrap by it
$('div.textPane .DNNModuleContent.ModDNNHTMLC').wrap(function() {
return $('a:first', this).clone().text('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="dnn_pane02textLeft" class="flexPane LeftPane textPane">
<div class="DnnModule DnnModule-DNN_HTML DnnModule-499 DnnVersionableControl">
<a name="499"></a>
<div id="dnn_ctr499_ContentPane" style="background-color:#f2a42a;">
<div id="dnn_ctr499_ModuleContent" class="DNNModuleContent ModDNNHTMLC">
<div id="dnn_ctr499_HtmlModule_lblContent">
<h1>Analytic Solutions</h1>
<p>Wilshire serves the investment analytic needs of institutional investors by offering a platform that combines the depth of our capabilities within...
</p>
<h5>Learn More</h5>
</div>
</div>
</div>
</div>
</div>
Or by creating new a tag
$('div.textPane .DNNModuleContent.ModDNNHTMLC').wrap(function() {
return $("<a/>", {
href: $('a:first', this).attr('href')
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="dnn_pane02textLeft" class="flexPane LeftPane textPane">
<div class="DnnModule DnnModule-DNN_HTML DnnModule-499 DnnVersionableControl">
<a name="499"></a>
<div id="dnn_ctr499_ContentPane" style="background-color:#f2a42a;">
<div id="dnn_ctr499_ModuleContent" class="DNNModuleContent ModDNNHTMLC">
<div id="dnn_ctr499_HtmlModule_lblContent">
<h1>Analytic Solutions</h1>
<p>Wilshire serves the investment analytic needs of institutional investors by offering a platform that combines the depth of our capabilities within...
</p>
<h5>Learn More</h5>
</div>
</div>
</div>
</div>
</div>

Get data from element without id or class

I am building a Chrome extension (and therefore can only use JavaScript) and I need to get the link that resides in the h2 with the heading2 class.
However, there are multiple h2 items with that class (not shown here), and I will not know what the link will point to, as it changes monthly.
In this example, the content of the header is "Think before you tweet". It will always be under another header that contains the words "Featured Topic."
What I am looking to get is the /think_before_you_tweet from the href= of that h2 item. It shows that I have already completed the topic underneath the h2, but that will not always be the case.
Here is the code for the website:
<div class="chosen_for_you_section">
<div class="internal_container">
<h2 class="section_header"><img src="/public/s360/img/360-spinner.png" class="s360LogoHeader">Featured Topic <i class="fa fa-info-circle"></i> <span class="infoTxt">Read about what to do</span></h2>
<article class="article_block masonry_item " data-article_id="431">
<div class="article_image">
<img src="/thumb/public/media/nh/images/twitter_tweet_think_before_send.png?q=&h=278" />
<i class="fa fa-check-square-o article_complete article_type_icon" title="Article"></i>
<div class="action_icons">
<span class="like "><a title="Favorite"><i class="fa fa-heart"></i></a></span>
</div>
</div>
<header>
<h2 class="heading2">Think Before You Tweet!</h2>
<div class="article_required_complete">Congratulations, you've completed this required topic.</div>
<div class="category_blocks">
<p>
Social Media
</p>
</div>
</header>
</article>
<div class="focus_items">
<div class="home_side">
<p>
<img alt="" src="" style="width: 430px; height: 422px;" /><!-- I hid the img src here because it reveals some personal information and is not important -->
</p>
<p></p>
</div>
</div>
</div>
</div>
I can use jQuery in my extension, but I do not have any back-end capabilities.
Use jQuery :contains selector:
$('h2.section_header:contains("Featured Topic") + article a')[0].href
Looks like you've gotta loop through the h2.section_header headers, see if the text matches whatever you want, and then grabs the link from the header following itself.
$('h2.section_header').each(function(index, element) {
var $element = $(element);
if ($element.text().match(/Featured Topic/i)) {
$('#result').html($element.next('article').find('h2.heading2 a').attr('href'));
}
});
#result {
border: 3px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>
<div class="chosen_for_you_section">
<div class="internal_container">
<h2 class="section_header"><img src="/public/s360/img/360-spinner.png" class="s360LogoHeader">Featured Topic <i class="fa fa-info-circle"></i> <span class="infoTxt">Read about what to do</span></h2>
<article class="article_block masonry_item " data-article_id="431">
<div class="article_image">
<img src="/thumb/public/media/nh/images/twitter_tweet_think_before_send.png?q=&h=278" />
<i class="fa fa-check-square-o article_complete article_type_icon" title="Article"></i>
<div class="action_icons">
<span class="like "><a title="Favorite"><i class="fa fa-heart"></i></a></span>
</div>
</div>
<header>
<h2 class="heading2">Think Before You Tweet!</h2>
<div class="article_required_complete">Congratulations, you've completed this required topic.</div>
<div class="category_blocks">
<p>
Social Media
</p>
</div>
</header>
</article>
<div class="focus_items">
<div class="home_side">
<p>
<img alt="" src="" style="width: 430px; height: 422px;" /><!-- I hid the img src here because it reveals some personal information and is not important -->
</p>
<p></p>
</div>
</div>
</div>
</div>
with jQuery's :contains selector use this:
jQuery('h2:contains("Featured Topic") ~ article h2.heading2 a').attr('href')
try at http://jsfiddle.net/ug01a0d2/
without jQuery try to bind to class "section_header" or use a cycle with the textContent check to iterate all "h2.section_header"
If there are multiple H2 class heading2 :
$('h2[class*="heading2"] a').each(function(){
var href = $(this).attr('href');
// Do what you want with this href
});
Use XPath! The syntax is pretty, uh, unfortunate, but it's very powerful:
var result = document.evaluate('//h2[#class="section_header"]/following-sibling::article//h2[#class="heading2"]/a', document, null, XPathResult.ANY_TYPE, null );
That should select that anchor node. I'm not sure if it's available to extensions, but Chrome defines a handy helper method called $x that eliminates all that boilerplate around the query.
More information: https://developer.mozilla.org/en-US/docs/Introduction_to_using_XPath_in_JavaScript

My js pagination code is not working, completely lost as to what is causing it

I have a pagination set up that I have used many time before... works great for lists and simple paragraphs, but I am unable to get it to work with a more complex html code, which is listed below. For some reason, the js refuses to turn the below code into a set object in order to paginate.
<div class="properties-content">
<div id="paging_container8" class="container">
<div class="storybody">
<p>
<!---------- Property Start ---------->
<article class="hentry">
<div class="property-featured"> <a class="content-thumb" href="property-details.html"> <img src="images/property/property3.jpg" alt=""> </a> <span class="property-label last">Last one left</span> <span class="property-category">Single Family Home </span> </div>
<div class="property-wrap">
<h2 class="property-title"> Single Family Residential, NJ </h2>
<div class="property-excerpt">
<p>Classic 60's ranch living. House has hardwood floors and hard coat plaster walls and ceilings...</p>
<p class="property-fullwidth-excerpt">Classic 60's ranch living. House has hardwood floors and hard coat plaster walls and ceilings in good condition. Intimate backyard for private gatherings. Full basement...</p>
</div>
<div class="property-summary">
<div class="property-detail">
<div class="size"> <span>1118 sqft</span> </div>
<div class="bathrooms"> <span>2</span> </div>
<div class="bedrooms"> <span>3</span> </div>
</div>
<div class="property-info">
<div class="property-price"> <span> <span class="amount">$299,000</span> </span> </div>
<div class="property-action"> More Details </div>
</div>
<div class="property-info property-fullwidth-info">
<div class="property-price"> <span><span class="amount">$299,000</span> </span> </div>
<div class="size"><span>1118 sqft</span> </div>
<div class="bathrooms"><span>2</span> </div>
<div class="bedrooms"><span>3</span> </div>
</div>
</div>
</div>
<div class="property-action property-fullwidth-action"> More Details </div>
</article>
<!---------- Property End ---------->
<!---------- Property End ---------->
</p>
<div class="page_navigation"></div>
I need, due to how my css is, to show 2 of the above code snippet out of maybe 25. And here is my javascript that I am using:
<script>
var str= $(".storybody").html();
var substr=str.split( "<!--pagebreak-->" );
var txt="<ul class='storycontent'><li>";
var x=0;
for (x in substr)
{
if(x==0){
txt=txt+substr[x];
}
else{
txt=txt+"</li><li>"+substr[x];
}
}
var paginated=txt+"</li></ul>";
$('div.storybody').replaceWith(paginated);
$(document).ready(function(){
$('#paging_container8').pajinate({
num_page_links_to_display : 2,
items_per_page : 1 ,
item_container_id : '.storycontent'
});
});
​</script>
And here is the jsfiddle: http://jsfiddle.net/moLwmyyr/1/
I have figured it out!
The following js, along with the js in the fiddle, work with my html code in my question. Instead of the original js which only worked for simple lists, tables, and paragraphs, the js listed here will work on nested html code.
(function($){
$(document).ready(function(){
$(".pagination").customPaginate({
itemsToPaginate : ".post"
});
});
})(jQuery)
http://jsfiddle.net/moLwmyyr/2/
Works perfectly with my site and css. Hope this helps others.

Toggle a repeated class in jQuery

I have this HTML code:
<div id="content">
<div class="profile_photo">
<img style="float:left;margin-right:7px;" src="http://gravatar.com/avatar/53566ac91a169b353a78b329bdd35c95?s=50&d=identicon" class="profile_img" alt="{username}"/>
</div>
<div class="container" id="status-#">
<div class="message">
<span class="username">{username} Debugr Rocks!
</div>
<div class="info">24-oct-2010, 14:05 GMT · Comment (5) · Flag · Via Twitter
</div>
<div class="comment_container">
<div class="profile_photo">
<img style="float:left;margin-right:7px;" src="http://gravatar.com/avatar/53566ac91a169b353a78b329bdd35c95?s=32&d=identicon" class="profile_img" alt="{username}"/>
</div>
<div class="comment_message">
<span class="username">{username}</span> Debugr Rocks! XD
</div>
<div class="comment_info">24-oct-2010</div>
</div>
</div>
<div class="profile_photo">
<img style="float:left;margin-right:7px;" src="http://gravatar.com/avatar/53566ac91a169b353a78b329bdd35c95?s=50&d=identicon" class="profile_img" alt="{username}"/>
</div>
That is repeated two or more times. What I want to do, is to when I click the "Comments (5)" link, the class "comment_container" appears, but only the one in the same "container" class.
It's this possible?
You can use .closest() to go up to the .container then .find() to look inside it, like this:
$(".toggle_comment").click(function() {
$(this).closest(".container").find(".comment_container").show();
});
You can try it here, if you're curious about finding other things relative to this here's a full list of the Tree Traversal functions.
As an aside, there's an error in your HTML that needs correcting, this:
<span class="username">{username} Debugr Rocks! </div>
Should be:
<span class="username">{username} Debugr Rocks! </span>

Categories