We Keep Coding

In angular 4how to use tel: in a *ngHref

I am using angular 4 and in template (.html), I coded as
<a *ngHref="tel:{{orders.billing_address.telephone}}"> <span> Call : </span>
It throws an error as
Can't bind to 'href' since it isn't a known native property a
I search it and get angular 4 use [routerLink]. But I don't know how to use [routerLink] to set tel: numbers. Could you please guide me.

Just href inside []. It will let you to remove {{}} part. And if you want to concatenate strings inside, you need to create a string like 'tel:' + otherParts
<a [href]="'tel:' + orders.billing_address.telephone"> <span> Call : </span>

use the [href] in angular 2
<a [href]="'tel:'+ orders.billing_address.telephone"> <span> Call : </span>

VueJS 2 conditional rendering in value binding

I simply try to let VueJS 2 render a inline condition while I add a value to an dom element. I know, that it is possible to use v-if to let elements appear or disappear based on conditions, but how can I use a inline-condition?
I will give an example. The following html describe my idea and I know that this lines generates an error. Both <span> elements are controlled by conditions which lets them appear or not and this works fine.
Now, I try to bind a value to the href attribute depending on a condition (which are in the parentheses for example).
<div id="vuemain">
<span v-if="diced < 6">Looser</span>
<span v-if="diced == 6">Winner</span>
<a :href="'https://link-to-whatever.com/'+{diced==6 : 'winner', diced<6 : 'looser'} ">LINK</a>
</div>
So after rendering by VueJS the <a> tag should be like:
<a href="https://link-to-whatever.com/winner"> <!-- If diced == 6 -->
OR
<a href="https://link-to-whatever.com/looser"> <!-- If diced < 6 -->
Do you understand what my problem is and is that somehow possible?
Many thanks in advance
Allan

This should work.
<a :href="'https://link-to-whatever.com/'+ (diced==6 ? 'winner' : 'looser')">LINK</a>
It looks like you were trying to use the object syntax, which won't really work in this case. Instead, just use the ternary above.

New Line character in title attribute does not work in tooltip

I have an html form where I need to add new line character in to the title attribute of the anchor tag. I found a few solutions online but none of them work in my code.
I tried adding
\n
<br>
not sure what is missing. Is it because of data-toggle that is blocking from breaking the title attribute?
$(document).ready(function () {
$('form').attr('novalidate', true);
$('[data-toggle="tooltip"]').tooltip();
<a class="helptext fa fa-question-circle" data-toggle="tooltip" title="Additional information -
 You can provide further information here to for your
 application to issue a new card.
 Ensure a maximum of 200 characters
 is entered – including spaces."></a>

Setting the title with JavaScript works for me.
document.getElementById('asdf').title = 'line1\nline2';

A popover would be a better solution, but it is possible to achieve this functionality in browser:
$(document).ready(function () {
$('form').attr('novalidate', true);
//$('[data-toggle="tooltip"]').tooltip();
$('.helptext')[0].title = "I like\nlines"
// you can also use $('.helptext').attr("title",decodeURI("I like%0A to%0Ause%0Alines"))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="helptext fa fa-question-circle" data-toggle="tooltip" href="#" title="Additional information -
 You can provide further information here to for your
 application to issue a new card.
 Ensure a maximum of 200 characters
 is entered – including spaces.">test</a>

Loop to change content of href for many anchors

The content of my posts in Wordpress is a big markup. It is coming from MS Word so it is text wrapped by HTML nested tags and inline styles.
I have a segment of code that is repeated many times in the content (It represents text footnotes). This segment, for the first footnote for example is:
<sup><a title="" href="file:///C:/Users/hp/Desktop/file.docx#_ftn1" name="_f
tnref1">
<span class="MsoFootnoteReference">
<span dir="LTR">
<span class="MsoFootnoteReference">
<span lang="EN-US" style="font-size: 16pt; line-height: 115%;">
[1]
</span>
</span>
</span>
</span>
</a></sup>
.....
<a title="" href="file:///C:/Users/hp/Desktop/file.docx#_ftnref1" name="_ftn1">
<span class="MsoFootnoteReference">
<span dir="LTR" lang="EN-US" style="font-size: 12.0pt; font-family: 'Simplified Arabic','serif';">
<span class="MsoFootnoteReference">
<span lang="EN-US" style="font-size: 12pt; line-height: 115%;">
[1]
</span>
</span>
</span>
</span>
</a>
My goal is to change the 2 hrefs from:
href="file:///C:/Users/hp/Desktop/file.docx#_ftn1"
href="file:///C:/Users/hp/Desktop/file.docx#_ftnref1"
to:
href="#_ftn1"
href="#_ftnref1"
so that the user can jump from one anchor to the other.
Questions:
1- Is is better to use server side language instead of jquery?
2- How to loop over the repetitive segments and change the href contents of each couple of anchors?
Thank you very much in advance for your invaluable assistance.
Solution:
With the use of Regular expression provided by Broxzier + PHP, the code below is working and can be applied to any data before persisting it on the database.
if(preg_match_all('/href\s*=\s*"[^"]+(#[^"]+)"/',get_the_content(),$match))
{
echo preg_replace('/href\s*=\s*"[^"]+(#[^"]+)"/','href="$1"', get_the_content());
}

1- Is is better to use server side language instead of jquery?
Neither. The best and fastest option would be to totally remove the website and page name from the link if they're the same as the current page.
One way would be using Regular Expressions, this could be done via JavaScript, but I strongly suggest doing this by using a text editor and replace the old data (Wordpress saves revisions anyway).
The following regex will grab the href attribute
href\s*=\s*"[^"]+(#[^"]+)"
Replace this with:
href="\1"
And you're done.
2- How to loop over the repetitive segments and change the href contents of each couple of anchors?
Use a global flag to do this. Since it's content I advice you to do it manually or change the regex so that it will only match the current url.
Please note that this will also replace occurrences in the content, if there is any text like href="website#flag" in there. I assumed this was not the case.
--

Using jQuery.attr() and hash property of <a>
$('a').has('.MsoFootnoteReference').attr('href',function( idx,oldHref){
return this.hash;
});
You might want to use some html cleaning on your WYSIWYG html submissions that will clean out unwanted classes and modify the href's for you.
For example SimpleHtmlDOM php library uses css type selectors to modify html and you could use it to modify any href with file:// in it for example

Changing text after a <br> with jquery

I have a span tag like this and stored in the variable "foo"
<span class="right margin">
سی ئی 1500
<br>
Nicole Kidman
</span>
Using jQuery OR javascript, how can I change the "Nicole Kidman" clause with something I want? innerHTML changes everything in the <span>
Edit: I edited the text with this code foo[0].lastChild.nodeValue="something else"; but is there another way doing that using only jQuery?

I recommend you add another span tag around Nicole Kidman.
<span class="right margin">
سی ئی 1500
<br>
<span>Nicole Kidman</span>
</span>
and change the text like this:
$(".right").find("span").text("something you want");

<span> is an inline element. We avoid using <br/> in them.
It is also advisable to use another tag to encapsulate your 'Nicole Kidman' text.(Like another <span>)
I'm not aware of your entire HTML structure so I'm going with what you have posted. Here is a fiddle example for how it can be done.

Here the foo is not a jQuery object:
foo.lastChild.textContent='something you want'
So the foo is a jQuery object, but you still need to access the dom element directly:
foo.contents().eq(-1).textContent='something you want'