Link to home
Start Free TrialLog in
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
ASKER CERTIFIED SOLUTION
Avatar of HainKurt
HainKurt
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Dispute the points split.

Two equally valid answers given - points to be split evenly.
@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.