Avatar of Rohit Bajaj
Rohit BajajFlag for India

asked on 

Correct way of using template in html with jquery

HI,
I have the following html templates :
<template id="commitdate">
  <div class="commit-group-heading">
  </div>
  <ul class="list-unstyled commits-list">
    <li>
      <div class="commit-main-info">
        <a href="#" target="_blank"></a>
      </div>
      <span class="text-muted">by</span> <span class="author"></span>
    </li>
  </ul>
  </li>
</template>
<template id="commit">
  <li>
    <div class="commit-main-info">
      <a href="#" target="_blank"></a>
    </div>
    <span class="text-muted">by</span> <span class="author"></span>
  </li>
</template>

Open in new window

And i am using it like this in my javascript code :
if (lastDate == commitDate) {
                var commitTemplate = $("#commit");
                var commitNode = commitTemplate.prop("content");
                $(commitNode).find(".commit-main-info").append(commit.message);
                $(commitNode).find(".author").text(commit.login);
                $(commitNode).find("a").attr("href", commit.html_url);
                $(commitNode).find("a").text("# "+commit.sha.substring(0,6));
                var clonedCommitNode = document.importNode(commitNode, true);
                $("ul").last().append(clonedCommitNode);
            } else {
                var commitDateTemplate = $("#commitdate");
                var commitDateNode = commitDateTemplate.prop("content");
                $(commitDateNode).find(".commit-group-heading").text("Commits on " + commit.date);
                $(commitDateNode).find("a").attr("href", commit.html_url);
                $(commitDateNode).find("a").text("# "+commit.sha.substring(0,6));
                $(commitDateNode).find(".commit-main-info").append(commit.message);
                $(commitDateNode).find(".author").text(commit.login);
                var clonedCommitDateNode = document.importNode(commitDateNode, true);
                $("body").append(clonedCommitDateNode);
            }

Open in new window


what this is doing is fetching each element from the json array and appending it to the DOM depending on a certain condition it chooses which template to use.
But what is happening is that i am seeing that the commit.message is getting acumulated that is the next node contains the previous commit message plus the current one.
The aim here is to add some text after the anchor tag inside the div commit-main-info
What could be wrong with this approach .
Please suggest correction
I just tried changing the append line to text :                 $(commitDateNode).find(".commit-main-info").text(commit.message);
This solves the problem But the anchor tag also gets removed.
So there is something which the append is doing which is causing earlier commit.message to be added again.
Thanks
HTMLJavaScriptjQuery

Avatar of undefined
Last Comment
Julian Hansen
ASKER CERTIFIED SOLUTION
Avatar of HainKurt
HainKurt
Flag of Canada image

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
Dispute the points split.

Two equally valid answers given - points to be split evenly.
Avatar of HainKurt
HainKurt
Flag of Canada image

@Julian Hansen

first solution always get the biggest share, if not all :)

you should know this...

also, empty + append is not good as just replace!

element.empty().append(msg);

150 pt is more than enough :)

cheers...
first solution always get the biggest share, if not all :)
That is simply not true. There is a certain etiquette here on EE that you seem to be unaware of.

also, empty + append is not good as just replace!
Again not true - if you put forward the that way to add new content is through html() and the solution requires that more than one item is to be added then .html() will not work.

If you disagree with the above then feel free to request attention on it.
JavaScript
JavaScript

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.

127K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts
Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo