Knockout "html" not rendering target="_blank" - javascript

I have a questing about knockout not rendering html attributes properly.
I have a span tag that gets populated with data using knockout JS.
<span id="s34" data-bind="html: $parent.Branch.TextComments"></span>
TextComments is dynamic and sometimes contain text only. Other times text and < a> tags. For example:
This is text example of TextComment. Access google at Goole link. Thank you!
When the page reders, the link reders correctly as a url but when I click it, it doesn't open a new tab, it redirects the page to google instead of opening a new tab which target="_blank" should accomplish.
Any ideas?
Thanks in advance!

I was curious if it really doesnt work.
I set up this minimal code snippet and everything works as expected in my local environment
var system = {
viewModel:function (data) {
var self = this;
self.texts = ko.observableArray([
"text 21321",
'text with target blank ',
'text <a href="https://google.com" > without target blank </a> ',
'text 789'
]);
}
}
var vm = new system.viewModel();
ko.applyBindings(vm);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div data-bind="foreach:texts">
<span data-bind="html:$data"></span> <br>
</div>
Test stack-snippet target-blank
So in this snippet the links do also not open correct for me, but maybe this is a snippet restriction. See the normal link i added with target="_blank" it also doesnt open in snippet. in my local environmet all the links with target="_blank" opens in a new tab while the other one does not

Related

Get a link from a page and print it

this should be pretty easy but I'm having problems with making it work right.
This is for a small warehouse that delivers objects. when someone orders something it appears on a page wich is generated automatically. It is an index.php this is the code that contains the print link :
<tr class="">
<td width="244" align="left">
<p style="padding-left:5px; ">
<strong>1.</strong>
<strong style=" font-weight:bold; font-size:12">Client Name</strong>
<br/>
<a href="http://site/orders/order.php?id_comanda=15284656"
target="_blank" onClick="this.blur()">15284656 - auto</a>
<br />
<a href="marfa-pregatita.php?nr_aviz=401599413&nr_disp=18129704&act=2"
target="_blank" onClick="this.blur()">printing link</a><br>
<span style='color: #FF0000'>times printed :
<span style='font-weight:bold';font-size:10pt>1</span> x</span>
</p>
<a name="df_18129704"></a>
</td>
there are multiple codes like this on the page numbered from 1 to how many are there. The "printing link" needs to be opened and printed for everyone of this orders. I am quite new to java coding. How can this be done? the printing link changes only with the "nr_aviz=401599413&nr_disp=18129704" just the actual numbers change. Please help! I want this to run as an addon on chrome.
If you want to develop a chrome extension, see the Chrome Extenstions developper documentation to get started. You'll have to write Javascript code (not Java which is a very different language).
You can select every printing links by using Javascript CSS selectors API, like so :
// selects links (<a ...>) where attribute "href" starts with "marfa-pregatita.php"
var selector = 'a[href^="marfa-pregatita.php"]';
var links = document.querySelectorAll(selector);
// for each link, click on it
for (var i=0; i<links.length; i++) {
var link = links[i];
if (link.text == "printing link") {
link.click();
}
}
You can also run this in Chrome Dev Tools (open it by hitting Ctrl+Shift+I). Go in the Console tab and type your code directly or go in the Sources tab and add your script as a Snippet. It's good place to start in order to create an extension.
Hope this helps.

Twitter Share button dynamic URL share

I'm trying to make a custom Twitter button that will grab the page URL of the current page when clicked, which would obviously change dependent on which page it appears on, not unlike the default share button. However, I am unsure how to pass the page URL into the button.
This is what I have thus far jsfiddle
<style type="text/css" media="screen">
</style>
<div id="social-share-container">
<div id="custom-tweet-button">
<a id="tweetShare" href="https://twitter.com/share?url="+encodeURIComponent(document.URL); target="_blank">Tweet
</a>
</div>
</div>
It's a bit hacked together as I'm pretty unfamiliar with JS.
This passes the url and title to a simple pop-up box with the twitter share page:
<script language="javascript">
function tweetCurrentPage()
{ window.open("https://twitter.com/share?url="+ encodeURIComponent(window.location.href)+"&text="+document.title, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false; }
</script>
<a class="tweet" href="javascript:tweetCurrentPage()" target="_blank" alt="Tweet this page">Tweet this page</a>
If you don't want it to open in a popup box, you can use this instead of window.open:
window.location.href="https://twitter.com/share?url="+ encodeURIComponent(window.location.href)+"&text="+document.title;
Update:
escape() function is deprecated, Replaced with encodeURIComponent()
I would suggest window.location - That will give you the current page url.
Problem is you're using JS inline in HTML - you can't do that like you're wanting to.
I updated your fiddle with some vanilla js to show you a better way to do this.
http://jsfiddle.net/4jF5N/1/
var link = document.getElementById('tweetShare');
var url = window.location;
link.addEventListener('click',function(event){
event.preventDefault();
window.open("https://twitter.com/share?url="+encodeURIComponent(url));
alert(url)
},false);
Take a look on document.location:
location.hostname
location.pathname
http://www.w3schools.com/jsref/obj_location.asp

why window.open() opens in the same window?

I write following code`
Holiday
<script>
a.popup.click(function(event)
{
event.preventDefault();
window.open($(this).attr('href'));
});
</script>
It'll open b.html in a new window, but opens in the same, why?
I include JQuery like this`
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/>
Which is the latest version? Can it be a reason?
a.popup.click will throw an error because a is not defined.
You are trying to use the jQuery click method, so you need to create a jQuery object that references the element you are trying to select.
jQuery("a.popup").click(your_function)
You can achieve opening in a different tab functionality in your case by simply specifying target="_blank" for your anchor tag as
<a href="b.html" target="_blank" class="popup" >
Holiday
</a>
You please try using the following code, it works, and you can choose your title and set different parameters that are suitable for you:
$(document).ready(function(event) {
$('a.popup').on('click', function(event) {
var params = "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes";
event.preventDefault();
window.open($(this).attr('href'), "Title", params);
});
});
Just change this part
<a href="b.html" target="_blank" class="popup" >
jsFiddle

Open popup.html anchor in new tab

My problem atm is with manifest v2.
Since I've been developing this extension I've been facing a lot of problems because the new manifest V2 of google extensions, that removed the capacity of inline javascript in the html files.
So can someone tell me how to open a link in a new tab with the new manifest?
My html:
<li ng-repeat="pageInfo in pageInfos">
<img src="{{pageInfo.url}}" class="link"/>
<img src="http://www.end-timeillusion.com/images/site/sn_icons/facebook.fw.png" class="fbshare"/>
</li>
My external.js - don't work
$(document).ready(function(){
$('.fbshare').click(function(){
chrome.tabs.create({url: 'http://facebook.com/sharer/sharer.php?u=' + $(.link).attr('src')});
return false;
});
});
The problem is this code:
$(.link).attr('src')
You need quotation marks around .link, like this:
$('.link').attr('src')
I tested your code in a test extension and the link opened in a new window, once I added the quotation marks.

How do I add a hashtag to a custom tweet button?

I'm trying to create a custom tweet button with a popup, this part works. However, I am unable to get it to post hashtags in the text area.
Tweet content
url=http://www.mywebsite.com&text=mytweetcontent&via=mytwitterusername
In the &text= I've experimented with using mytweetcontent+#myhashtag as well as trying the URL encoding %23 (which corresponds with #); however, I am still unable to get a hashtag to appear. Any ideas on what I can do? I would prefer to have a custom image, which is why I am not using the proprietary twitter jscript button. Thanks very much for your help!
Full code for reference:
<img src="twitter-logo.png" border="0">
Edit* Response to comment
thanks for the suggestion! i didnt try with hashtag, just normal, but changing the & to ? removes the content area, code below. Top line is the result in the tweet box, below is corresponding url.
mycontent http://t.co/nKb4nWC via #myusername
http://twitter.com/intent/tweet?text=mycontent&url=http%3A%2F%2Fwww.mywebsite.com&via=myusername
http://t.co/YzrDfzX via #myusername
http://twitter.com/intent/tweet?url=http%3A%2F%2Fwww.mywebsite.com%3Ftext%3Dmycontent&via=myusername
What's wrong with using the following?
<a href="http://twitter.com/intent/tweet?text=Text%20%23hashtag&via=JohnDoe"
onclick="return !window.open(this.href, 'tweet', 'menubar=no')">
<img src="twitter-logo.png">
</a>
Twitter
<script type="text/javascript">
$('.socialLinkTwitter').click(function (e) {
e.preventDefault();
var sTwitterShare = $(this).attr('href');
window.open(sTwitterShare,'Share','width=550,height=450');
});
</script>

Categories

Resources