I am trying to build a website. There is options for users to post comments.
I am planning to show a few (say 5) comments in the intial fetch and an option to load more comments.
I am using jquery and was thinking to create the html divs dynamically for the same based on the number of comments.Is this the best idea ?
Also , is there a way to remove the dynamically created elements so that on re-entry to the page I have only the static elements and if needed attach the dynamic elements ?
jQuery offers some really handy tools on how to dynamically create DOM elements. You will want to use the .append() method to insert new elements.
For example, say you had a HTML structure with a container for all of your comments, and a few comments already:
<div id="comments_container">
<div class="comment">
This is a comment!
</div>
<div class="comment">
This is another comment!
</div>
<div class="comment">
Comment 3!
</div>
</div>
You could use the following code to dynamically add more comments:
$("#comments_container").append('<div class="container">'+comment_data+'</div>');
Every new dynamically added comment will appear at the bottom of the comments <div>. If you want to add the comments at the top of the comments container, then use prepend() instead of append().
Also , is there a way to remove the dynamically created elements so that on re-entry to the page I have only the static elements and if needed attach the dynamic elements ?
Yes. Any elements dynamically inserted using prepend() and append() will disappear when the user reloads or revisits the page.
Related
I want to check if a postgresql database contains a specific value. If it is true I want to hide a HTML . Is this possible?
Can I hide elements with CSS & JS, or what should I use to hide the div?
Also, How would we add it in the Div like a NgIF statement
Thanks!
What you can do, vs what's best and the Angular way:
I assume you expect to have an AJAX call similar to:
$http.databaseAPI.get().subscribe(s => { this.hasValue == s.IsActive; });
Then, you could do a few things:
<div *ngIf="hasValue"></div>
Removes element from the DOM. Potentially very performance detrimental if overused.
<div [hidden]="!hasValue"></div>
Hides the element in the DOM.
<div [ngClass]="{'hideme': hasValue === false}"></div>
Changes the CSS based on an expression, and would require supporting CSS to hide the element.
Welcome to stackoverflow. You can get all that information from angular docs
*ngIf removes/adds the html elements from the html tree.
<div *ngIf="condition">Content to render when condition is true.</div>
I would like to add an ID to the div with the class name="leaflet-control-layers-base". Because this HTML script is automatically generated through an API (Leaflet) when the page is loaded, I cannot add the id within the script.
The reason I am asking is because I have two of these scripts as shown below within my page. I would like to distinct them from each other so that I can refer to them individually. The only difference is that the other script is not located in the "TOCContent" div.
Any ideas how I can add an id using JavaScript or jQuery to the 'leaflet-control-layers-base' class?
Here is my script:
<div id="TOCContent">
<div class="leaflet-control-layers leaflet-control-layers-expanded" aria-haspopup="true">
<form class="leaflet-control-layers-list">
<div class="leaflet-control-layers-base">
</form>
</div>
Try this:
$(".leaflet-control-layers-base").attr("id","your id will go here");
Select the element using the combinator selector, to ensure it selects a descendant of #TOCContent, then set the id property.
$('#TOCContent .leaflet-control-layers-base').prop('id', 'someid');
Remember to run this after your API code has rendered the elements on the page, not before. You will probably need to hook up to some sort of complete event on your API, because the basic DOM Ready event will likely fire before the API has rendered the elements.
Side note: it may not be necessary to give the element an ID, since by doing so you need to obtain a reference to the element anyway, which you can store in a variable.
var base = $('#TOCContent .leaflet-control-layers-base');
I am new to JavaScript so forgive me if the question comes around as dumb.
I know that appendChild() allows me to add a child element to an existing element. However, the problem is that I want to add an element which has an image on the left and a series of text boxes on the right and I need to add it over and over again on button click.
Adding simple elements like p, a , etc can be done by a single call to appendChild(), however for the above scenario, it will be a little messy.
Is there some way that I can define the custom element that I want to append and then just add it with a single call to appendChild()
Are you using jQuery? If it is a really complicated template, you could use .load() to ajax in an template and populate it with whatever you have to. You wouldn't need to dynamically create all of the elements using javascript, only populate it. This would would also allow you to change your template if need be very easily.
It seems you need cloneNode:
target.appendChild(template.cloneNode(true)); // If you want to clone template
// with all its descendants
target.appendChild(template.cloneNode(false)); // If you want to clone template
// without its descendants
I do this quite a bit. My code generally looks like this:
<div class="template" style="display: none;">stuff</div>
then:
$('.template').clone(true).removeClass('template').show().appendTo(someElement);
Since you're not using jQuery, have a look at the clone function here:
http://code.jquery.com/jquery-1.11.0.js
(search for "clone: function" to find it)
You can steal the relevant bits if you can't actually use jQuery itself.
I have a two part question on how I can dynamically arrange html buttons. I want to arrange the buttons without reloading the page, so I have been experimenting with jquery.
First, I have a column of html buttons and I want to be able to click on one and have it go to a specific place in the column. For example, if I clicked on one and I wanted it to go to the very top of the column, then i click on another and button and the most recently clicked button goes to the very top of the column.
I'm thinking I could accomplish this with an array of html buttons, but I am new to javascript and I don't know if it's possible to dynamically arrange html buttons in this manner. Is it possible to dynamically arrange html buttons with a javascript array? Is there a better way to arrange html elements?
Second, I would like to dynamically insert new buttons to the top of the column. I have had some success adding new buttons with jquery's before method. But the before method requires me to provide the current button at the top of the column and this doesn't work if I am dynamically arranging and rearranging the buttons.
I have looked into other "DOM Insertion" methods in jquery's API documentation, but I have not found a method to dynamically insert the buttons at the top of the column without specifically providing the top-most button's id.
Again my array concept comes in handy here. I could insert a new button into the zero index of the array, but I have not seen html elements displayed via javascript arrays in code I have viewed.
Please help. Thank you!
Have you looked at prepend() / prependTo()? You would only need to hold a reference to the container of your column of buttons, then prepend to that.
Link to Fiddle
Is it possible to dynamically arrange html buttons with a javascript array? Is there a better way to arrange html elements?
Lists of elements in javascript are typed as NodeLists. The DOM contains all of the Nodes and NodeLists. As such, they are accessible through document. In jQuery you can target these Nodes. jQuery will wrap each Node in an object, and if multiple Nodes are present, it will create an array of these jQuery objects.
I could insert a new button into the zero index of the array, but I have not seen html elements displayed via javascript arrays in code I have viewed.
var newButton = $("<input type='button' class='btn' />");
var htmlElements = $(".btn");
newButton.insertBefore(htmlElements.first());
Concerning Part one:
On click of the button, append it to the container of buttons.
<div>
<button>1</button>
<button>2</button>
</div>
<script>
$(document).ready(function() {
$('button').click(function() {
$(this).appendTo('div');
});
});
</script>
Concerning Part 2:
when you're adding a button you can use prepend.
$('button').click(function(){ $('div').prepend('<button>button</button>'); });
Here is a fiddle for both parts
here is a jsbin: http://jsbin.com/ORoXIHo/1/edit
I have a bunch of divs on a page that have a custom data attribute of "data-type"
<div id="155544" data-type="form" data-form-id="155544">
<div data-type="question" data-question-id="119709" data-mandatory="True"></div>
<div data-type="question" data-question-id="119710" data-mandatory="True"></div>
</div>
<div id="155554" data-type="form" data-form-id="155554">
<div data-type="question" data-question-id="119711" data-mandatory="True"></div>
<div data-type="question" data-question-id="119712" data-mandatory="True"></div>
</div>
Thats basically the code, I've just taken out the actual content to avoid confusion.
I want to use Javascript to find out how many divs have the data-type of "form" in order for me to do something with them.
I have found this Hide or show all divs for a certain value of a data attribute Which is similiar to what I want to do, except I'm trying to not use jQuery.
Any solutions?
EDIT: I should also mention that I am trying to not directly use the divs "id" as those are created dynamically
Without using JQuery, you might use querySelectorAll
elementList = document.querySelectorAll('div[data-type="form"]');
Demonstration (prints their number)
You could use querySelectorAll MDN to get a Nodelist, which you can turn into an array (and loose goodies like .namedItem()) if you want:
var divs = document.querySelectorAll('div[data-type="form"]');
var arrayOfDivs = Array.prototype.slice.apply(divs,[0]);