What is a simple way to make "null" not to render? - javascript

I have created a simple polymer element with no js that has attributes in it. When the attribute is not called it shows "null".
http://jsbin.com/wakal/1/
How do I tell the element not to show null?. If the attribute is left blank I do not want anything to show up?

Normally to use default values you need to use the script and initialize the properties there.
See http://www.polymer-project.org/docs/polymer/polymer.html#default-property-values
Alternatives are to use
{{propname?propname:'default value'}} or
{{propname||'default'}}

Related

Styling a div based on the flex wrap property using javaScript

A created a function that renders buttons depending on how many data gotten from database.
I want to use js to set the style the button container differently,
especially setting property of of the button container to flex direction to column when it starts wrapping,
Since the website can have many buttons.
Is there a way to use javascript to check for the flexwrap property of the button container.
I tried this code but it is returning an empty string
Console.log (btnContainer.style.flexWrap)
try running btnContainer.style in the console directly, rather than console.log(). hope it will help you find a solution
This commend check only inline style like <div style="flex-wrap:wrap;"></div>. Now if you console.log(document.querySelector('div').style.flexWrap) you will get string with value "wrap".
The solution your problem is add style this element in html inline as I wrote above or in js like document.querySelector('div').style.flexWrap = wrap

get .html() of {{#each}}

I have a $('.textarea').val() that gets the value of said textarea upon submission, inserts it into a Mongo.Collection and then displays it through {{#each}}{{/each}} in the body.
Before the text is inserted into the collection and then returned & published again, I have a regex set up to replace all image links with <img src='said link'>
My issue is that .val() does not work with tags, only .html and .text does, which I cannot use to get the value of a textarea. Is there any clever way of going about this (replacing .val() with .html()? Perhaps a listener on the body to replace all links with the tag after the text has already been submitted, in which case, how would I go about setting it up to listen for all text change?
EDIT:
To be more precise, is there a way to perform
$('.messages').html($('.messages).html().replace(this, 'that'))
on values that are constantly changing and output by {{#each}}
after returned from a collection? Is there a way to refer to each of the messages rather than whole?
If I understand correctly you are trying to replace all the sources in a text with images. This should help you:
http://forum.jquery.com/topic/replacing-text-links-with-images
Also, read this part of the jquery documentation:
http://api.jquery.com/attr/
I think that you are on the right track: changing the .html() should work.

innerHTML not working javascript

I have already found some question of this genre but the answer didn't help.
Javascript - div content without innerHTML
Javascript: Does not change the div innerHTML
I have a div called adx-title by id and i have to change the content. So i made my ajax call and i stored (i use jQuery) in a call the title i want this div to contain:
$('#adx-title').inneHTML = title;
Firebug report this ($('#adx-title').inneHTML) as undefined, and it does report so in every attempt i make to change the content of the div, which is read as an object but it doesn't have the innerHTML property. The script is loaded after i click a button so it should recognize the div as already loaded by the page. And indeed it gets the div with $('#adx-title'). it just doesn't apply the change and reports innerHTML as undefined.
Anyone has had a similar issue? Anyone can help? Thanks Agnese
You're using jQuery.
$('#adx-title').html( title );
The .innerHTML property is part of the DOM API. When you make a call to jQuery (as you're doing with the $) the result is a jQuery object, not a DOM element.
You can get the DOM element from the jQuery object like this:
var elem = $('#adx-title').get(0);
However, the jQuery .html() API wraps access to the .innerHTML property and also provides some other useful bookkeeping features. If you're using jQuery in general to manipulate the DOM, it's a good idea to use .html() and not the raw DOM API for that reason.
Try $('#adx-title').html(title);

How do I access the value of a textarea with javascript?

In one javascript function I am creating a textarea based on some JSON data I am grabbing from another site. I create the textarea here:
if(type == 'fill-in'){
var textField = $('<center><div id="response-text"><textarea id="test" name="test" rows="10" cols="80">Answer here</textarea></div></center>').appendTo(panel.root);
}
In another function, I need to grab the value of this textfield and send it off to another site. I have tried this in various ways using
document.getElementById("test").value
But that gives me an error, and if I use
document.getElementByName("test").value
It tells me that the value is undefined. Do text areas not automatically set their values to whatever you type into them? Is there a better way to grab what is being typed into the textarea?
EDIT:
getElementById is working now... not sure what I was doing before but I must have tried it 3-4 times. I apologize for the pointless question.
Here's my best guess as to what's actually going on in your code and why you may be getting screwed over by variable hoisting.
I imagine you're trying to dynamically add your text area and then grab a reference right after by using var test = document.getElementById("test");. Because of variable hoisting, declared variables are hoisted to the top of the current scope. This would result in the declaration happening before the text area gets added.
As it is unclear where the problem lies with the OP, I did notice that you're using getElementsByName incorrectly.
getElementByName should be getElementsByName. A subtle but significant difference. Since names do not need to be unique, the function gathers a node list of all DOM elements with a given name attribute.
getElementById on the other hand returns a reference to the element itself.
getElementsByName:
Returns a list of elements with a given name in the HTML document.
getElementById:
Returns a reference to the element by its ID.
Using getElementById works just fine. You must have something wrong with your HTML markup - perhaps another element with the id of test.
Working fiddle:
I am assuming that Teaxarea element is loaded successfully and present in the DOM. In that case, your javascript is loading & executing even before Textarea element is loaded & ready in the DOM.
Regards,

Get html5 data attribute from event inline

I'm trying to get the data attribute in this way (my doctype is html5):
link
but I'm getting error and if use onclick="alert(this.zoom) it gets undefined.
I think you want to use the dataset property? Then that'll do it:
alert(this.dataset.zoom);

Categories