Change variable inside js string - javascript

I would like to change the following line:
$("<ul><li>"+displayName + ""+"<br>"+description+"</br></li></ul>".appendTo(".results")
into the next string:
$("<ul><li><a href={0}> {1}" + "</a>"+"<br>"+description+"</br></li></ul>",{0:url, 1:displayName}.appendTo(".results").
however, instead of displayName i get 1.
please help to fix this
As you can see i've tried to write it like in c#

Using ES6 string interpolation, it would look like this:
$(`
<ul>
<li>
<a href=${url}> ${displayName}</a>
<br>${description}</br>
</li>
</ul>
`).appendTo(".results");
Notice the back-ticks instead of double-quotes.

Related

Turning string with line jumps into li in AngularJS

I have an object property (string) coming from the database with line jumps, looking like this:
Right now, when I display it in the frontend it just shows like this:
1223123 2121 3223 54545 1221 1221
What I need is this:
<ul>
<li>1223123</li>
<li>2121</li>
...
</ul>
Is there any way to turn such string into a li using a filter? I thought about string replace, but I assume it wouldn't work.
Something along these lines should work:
<ul>
<li ng-repeat="artist in artsts.split('\r')"> {{artist}} </li>
</ul>

JavaScript Function Parameter - Syntax Error

This code is working fine. But, I just want to remove variable url in third line and write direct www.google.com. Need corrected syntax of below code please. Quotes are so messy! I know there is just a little mistake. But didn't figure out.
website: function() {
var url = 'www.google.com';
this.echo('<a onclick="openHTTP(\''+url+'\')" href=""> My Website </a>', {raw:true});
You'll want to only replace the delimiting quotations (those ending and starting string literals) as well as +url+.
this.echo('<a onclick="openHTTP(\'www.google.com\')" href=""> My Website </a>', {raw:true});
Noting that your current snippet concatenates 2 literals with the variable:
'<a onclick="openHTTP(\''
'\')" href=""> My Website </a>'
The escaped quotations should be kept for the client-side code. They'll allow the browser to understand www.google.com as a string literal. The \ will be removed by the parser, so the output includes:
<a onclick="openHTTP('www.google.com')" href="">
website: function() {
this.echo('<a onclick="openHTTP(\'http://www.google.com\')" href=""> My Website </a>', {raw:true})
}
please try this one
just replace "url" variable with "www.google.com"
this.echo('<a onclick="openHTTP('www.google.com')" href=""> My Website </a>', {raw:true});

can't use angular value within quotes

Why does this not work:
<ul class="dropdown-menu">
<li ng-repeat="choice in dropDownItems">
<a class="btn" ng-click="mnuClick('{{choice}}')">{{choice}}</a>
</li>
</ul>
But this does work:
<ul class="dropdown-menu">
<li ng-repeat="choice in dropDownItems">
<a class="btn" ng-click="mnuClick('xxx')">{{choice}}</a>
</li>
</ul>
In the top example, the mnuClick() routine never gets called, but in the bottom example, it does. When I do an 'inspect element' everything looks fine.
It does not work, because the way you did it you are saying that you want to provide the string {{choice}} to the mnuClick function.
When providing xxx, this is actually correct, hence you need the quotes here.
But when using {{choice}}, you don't want THAT string, but you want that expression to be evaluated and its result (which is probably a string) as a parameter - hence you don't need the quotes (and not even the curly braces) here.
So just write
<a class="btn" ng-click="mnuClick(choice)">{{choice}}</a>
and you're fine :-).
To cut it short: In one case you deal with an expression which resolves to a string, in the other case you deal with a string directly. Hence one time you don't need quotes, the other time you do.
If you want more detailed information on when to use curly braces and when not, check out this answer to this question: Difference between double and single curly brace in angular JS?
Hope this helps.
PS: Inside the text of your a tag, you need the double curly-braces, as you're not in a AngularJS controlled code-block here - hence you have to mark it as binding, otherwise it'd just be text inside of HTML.
The value of ng-click is interpreted as an angular expression so you don't have to use the curly brackets around "choice". Just write it like this:
<a class="btn" ng-click="mnuClick(choice)">{{choice}}</a>
Doesn't this work?
ng-click="mnuClick(choice)"
I've definitely done something along those lines plenty of times, but don't have code to hand to verify...

Javascript get node innertext based on hierarchy

My HTML looks like
<li value="0">
<a href="#">
<span>DATA TO GET</span><![if gt IE 6]>
</a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li value="0">
<a onclick="return showPane('SomePane',this)" href="#">ACTIVE NODE</a>
</li>
</ul>
This html is produced using xsl. Now i want to get the data inside span tag using javascript. I tried the following:
var nameParent = activeTab.parentNode.parentNode.previousSibling;
window.alert(activeTab.innerHTML);
window.alert(activeTab.parentNode.parentNode.previousSibling.childNode);
Here the variable activeTab is passed the anchor that contians the text ACTIVE NODE.The first alert gives proper data i.e ACTIVE NODE but the second alert says undefined.
I think i am travsring the correct path and proper elements. Can some body point out what is wrong here and what else i can do to get the required data.
Thanks in advance.
Try this
var nameParent = activeTab.parentNode.parentNode;
window.alert(activeTab.innerHTML);
window.alert(nameParent.parentNode.children[0].children[0].innerHTML);
I stronly suggests use jQuery in your Project, it provides methods for easy navigation among dom elements like
.find() and .children(), .parent for more readable code.
Thanks
Try using firstChild instead of childNode:
var nameParent = activeTab.parentNode.parentNode.previousSibling;
window.alert(nameParent.firstChild.innerHTML);

Using .text() to select a class but having issues with spaces within the html

$('li.' + $(this).text()).toggle(true);
This code is used to take from a subnav below.
<div class="subNav">
<ul>
<li class="button">sun protective clothing</li>
</ul>
</div>
These are products that will be visible.
<div class="sun-protective-clothing"></div>
You must use JavaScript's replace() function to replace all spaces with dashes. Note using replace(" ", "-") like this will only replace the first instance of a space in the string. you must use a RegEx with the global search to replace all instances; such as / /g
$('li.' + $(this).text().replace(/ /g, "-")).toggle(true);
you need to replace the spaces with dashes. Try
$('li.' + $(this).text().replace(/ /g, "-")).toggle(true);
I would recommend no using the text inside the li and do something like this:
<div class="subNav">
<ul>
<li class="button" target="sun-protective-clothing">sun protective clothing</li>
</ul>
</div>
and:
$('.' + $(this).attr("target")).toggle(true);
This way you can put whatever you want inside the li, and not have it affect your logic.

Categories

Resources