I have the div section which is used to show the form in reply comment
<div class="box-body showmycomments"></div>
<div class="box-footer showmycomments"></div>
I have reply comment anchor tag in another div
<a ng-click="add(data)" style="cursor:pointer;" > Reply Comments</a>
Now I want to load 'showmycomments' div for each and every reply comment on ng-click.
My module has multiple comments with reply comment option which is in ng-repeat I need to load the div 'showmycomment' for each and every replay comment.
comment is displayed as shown in image.If i click Show comments as it show the form as shown in 2nd image.I want to load the form bellow reply comment if I click the anchor tag.
image 2
In my opinion your approach is wrong.
Instead of creating a div and duplicating it (possible though messy), you should use ng-include to inject a whole html wherever you need.
This would look like this:
index.html (or the html you have the ng-repeat on
<div ng-repeat="comment in comments">
<div ng-include="'comment.html'"></div>
</div>
comment.html - here you can use the comment from above.
<div class="comment-container">
{{ comment.text }}
</div>
So for every item, you duplicate the comment.html and fill it with whatever you want.
Related
I would like to be able to add (append) another set of div's to the section tag below when a user clicks on a button. For example adding the following div's:
<div class="from-me">
<p>this looks great. </p>
</div>
<section>
<div class="from-me">
<p>Hey there! What's up?</p>
</div>
<div class="clear"></div>
<div class="from-them">
<p>Checking out iOS7 you know..</p>
</div>
</section>
What I am trying to create is something similar to a text conversation for an e-learning project. I've had success creating a new div with a javascript function that is run by clicking a button, but I couldn't get it to append inside the section tag. Is this possible or do I need to approach this differently?
Thanks.
-Shawn
I have this "comment" template:
<template name="comment">
<li class="comment" id="{{_id}}" >
<div class="comment-wrapper level-{{level}}-comment">
<span id="reply-btn" class="reply-btn reply-btn-{{_id}}">reply</span>
<div class="content">
<p>{{body}}</p>
</div>
</div>
<div class="reply-to-comment reply-to-comment-{{_id}}" style="display:none;">
<form name="reply" class="reply-form">
<label for="reply_body">Reply to this comment</label>
<textarea name="reply_body"></textarea>
<button type="submit" class="btn">Post reply</button>
</form>
</div>
{{#if showChildComments}}
<ul class="comment-children comment-list">
{{#each childComments}}
{{> comment this}}
{{/each}}
</ul>
{{/if}}
</li>
</template>
With this comment.js file associated (only showing the events part here):
Template.comment.events({
"click #reply-btn": function(e, template){
console.log("Got in.")
$(".reply-to-comment-"+template.data._id).toggle();
}
});
Now, everytime I click reply it should open the reply form for that specific comment, as placed by the template above.
This works, but only on the "root" comments, meaning: if I click reply on a reply that is a reply to a "root" comment, the console.log("Got in.") will trigger 3 times. If it's a 5 level deep reply it will trigger 5 times, etc.
I suspect the reason for this is the fact that I'm rendering the template "comment" inside the template "comment". As such there's many "events" for which meteor is listening...
But I don't see how I could do it any other way. So, anyone knows a fix for this issue, or a better way to achieve what I'm looking for?
Your reasoning is correct - the nested template is registering the event multiple times on those elements causing the issue. I think you can use event.stopPropagation() to stop the event from bubbling up.
It might be something different, but all your comments have span#reply-btn.
The id attribute specifies a unique id for an HTML element (the id attribute value must be unique within the HTML document).
The id attribute can be used to point to a style in a style sheet.
The id attribute can also be used by a JavaScript (via the HTML DOM) to make changes to the HTML element with the specific id.
Behaviour of elements with same id is not well-defined and may lead to problems like this.
I'm implementing a simple jQuery script on a website that loads content from one section of a webpage into the 'display container' on the same webpage.
The content i'm loading is multiple div's which are all wrapped in an outer <div> which has been hidden from view.
I have the display container div and several links the use can click on. Each time they click a link, the appropriate matched content is loaded in to the display container.
My jQuery.
$(".Prod-Link-2").click(function(e){
e.preventDefault();
$("#ITARGET").empty();
$("#ITARGET").prepend('<img id="theImg" src="http://sensing-precision.com/wp-content/uploads/2015/12/page-loader.gif" />');
$("#ITARGET").load($(this).attr('href'));
});
Menu HTML
<div class="MPD">
<div class="Option">
<a class="Prod-Link-2" id ="DEF" href ="/electricalelectronic-products/alf150 #specTable" ><p>SPECIFICATIONS</p></a>
</div>
<div class="Option">
<a class="Prod-Link-2" href ="/electricalelectronic-products/alf150 #COMPARE" ><p>ALF150 v ALF150+</p></a>
</div>
<div class="Option">
<a class="Prod-Link-2" href ="/electricalelectronic-products/alf150 #FEAT" ><p>APPLICATIONS</p></a>
</div>
<div class="Option">
<a class="Prod-Link-2" href ="/electricalelectronic-products/alf150 #ACCESSORY" ><p>ACCESSORIES</p></a>
</div>
</div>
The Target div
<div class="Info-Target" id="ITARGET">
</div>
So my problem is this all works except one of the links.
My hidden div has 4 content divs and 2 tables inside which all have their own IDs. SPECIFICATIONS grabs the #specTable, APPLICATIONS grabs the #FEAT div etc etc.. ACCESSORIES will not load the #ACCESSORY div at all and I don't know why. The script initializes and the page loader gif is displayed, but then instead of displaying the content I'm trying to load.. it displays nothing.
The hidden area format
<div style="display: none;">
<div id ="COMPARE"> some content </div>
<table id="specTable"> some content </div>
<div id ="ACCESSORY"> some content </div>
etc ....
</div>
For test purposes
<div id="ACCESSORY">
<p> This is the accessory div </p>
</div>
No matter what I change the name to in the ID tag and the links href attr, it will not load (I even tried making a new div with a different name and moving the div up to top of the hidden content area thinking it was maybe a loading issue), but if I change the links href attr to one of the tables or a different div such as #FEAT or #specTable.. it loads that fine.
My gut feeling is that there is some qwirk with jQuery and .load() that i'm unaware of.
This problem may be CSS related. I've just taken a look at a couple of products, and wherever the content includes lists, the display appears blank because of extremely excessive white-space.
This CSS rule seems to be the culprit:
.Features li:before { content: url(#)!important; }
I'm trying to create a simple tool to ease the addition of tags in blog posts (not sure if I can mention the website, therefore i won't do it now).
I've inspected the code and I've noticed that when a tag is added, a new span is created between the divs post-form--tag-editor and tag-input-wrapper
<div class="post-form--tag-editor" data-subview="tagEditor">
-> TAG CODE here !! <span class=""> ::before This is a tag </span> <- TAG CODE here!!!
<span class=""> ::before This is another tag </span>
<div class="tag-input-wrapper" data-js-taginputfieldwrapper="">
<div data-name="tagInput" data-subview="tagInputField">
<div data-js="editor-wrapper" class="editor-wrapper" style="position: relative;">
Right now, my tool is injecting the necessary HTML to create dynamic spans and add new tags. I can see my "injected" tags in the webpage but when I submit the post the "injected" tags do not appear in the live post.
Since I'm able to see the "injected tags" shouldn't I be able to see them too when my post is submitted and live ? Am I using the wrong approach to achieve what I want?
Thank you in advance !
As a preface, I am using PhoneGap. When I click on a Category Title, I have taken that title and set it in sessionStorage. Now, I want to set the "back" button of a new PhoneGap page (which displays some information contained in that category) to that Category Title. The HTML code is shown below. To be specific, I want to change the text of the "a" element within the "header" element.
I guess a part of my question is, does the fact that I am using PhoneGap change how I can access the anchor tag? I've been trying to set the back button text right after the Category has been selected/clicked on. I have tried multiple things like:
$("adviceBodyNavbarHeader a").text(sessionStorage.getItem("catTitle"));
but I can't quite get it working, and it is getting quite frustrating =/
<div data-role="view" id="adviceBody" data-title="Advice Body" data-show="GetAdviceBody" data-transition="slide">
<header data-role="header" id="adviceBodyNavbarHeader">
<div class="navHeader">
<a class="nav-button" data-view="adviceTitles" data-align="left">Back</a>
<span id="adviceTitle" class="navTitle"></span>
</div>
</header>
<ul id="advice-body" data-role="listview">
</ul>
</div>
Your selector is wrong. You try to select a html element called adviceBodyNavbarHeader.
What you want to do is this: $('#adviceBodyNavbarHeader').text(sessionStorage.getItem("catTitle"));
Hope it helps.
Edited my post due to late brain inactivity.