We Keep Coding

How to obtain URL from a rel=canonical tag using Javascript

I'm using Disqus comments system and I'm trying to use the feature of adding comment count links.
The code that I can use is below:
<span class="disqus-comment-count" data-disqus-url="http://example.com/article1.html">Comments</span>
And this is where I have some issue. The thing is I have several hundreds of pages so editing the data-disqus-url value for each and every html pages will take a very long time and not feasible. Is there maybe some Javascript code that will dynamically input the data-disqus-url value with my canonical url?
I can't use php code since I'm using html files but I have SSI enabled since I need to use includes for easy template management. Also, all my html pages already have a unique meta tag for rel="canonical". I just need perhaps some Javascript codes that will fill-up the data-disqus-url value with the value indicated in my canonical url tag. Is that possible?
UPDATE
So I have exactly this code:
const commentCount = document.querySelectorAll('.disqus-comment-count');
commentCount.forEach(item => {
item.setAttribute('data-disqus-url', (document.querySelector('[rel=canonical]').getAttribute('href'));
})
<p><span class="disqus-comment-count" data-disqus-url="">Comments</span></p>
But it doesn't work. Maybe I did it wrong. sorry, I don't understand much about Javascript codes. I'll appreciate it if you can provide complete code.

you can use setAttribute to update the value with your Url.
const commentCount = document.querySelectorAll('.disqus-comment-count');
commentCount.forEach(item => {
item.setAttribute('data-disqus-url', 'https://google.com');
})
<span class="disqus-comment-count" data-disqus-url="http://example.com/article1.html">Comments</span>

How to capture the displayed link in HTML (JavaScript) and pass to another HTML page as a variable?

I am building a website (and I am a novice) and the site has 2 frames. On the left side (frame 1), I have a list of links that when you click on a link it will load a page in frame 2 (right side). But the links are on the left side are actually the result of a query and will change.
Rather than hard coding a site for each link, I want to use one target page to display data. I want to use the link on the left side as a variable value to pass to the right side so I can use the link name in a query on the target page.
MyUniqueLink
Any help would be very appreciated.

In your first <iframe>, you can access the parent document like so:
// window.parent will be undefined if you are not in an iframe.
window.parent.document
Then, as spencer said, it would be easier for you to use document.getElementById("secondFrameId") to get to your second iframe.
Also, the onclick event might be a bit more suited to your needs.
So together the code would look like:
<a onclick="window.parent.document.getElementById('secondFrameId').src='http://example.com'">MyUniqueLink</a>

If you want to access the data in your <a>'s, you should start by giving them an id:
<a id = "myId" href="JavaScript:void(top.frames[2].location.href='Recap.html');" >MyUniqueLink</a>
Then you can grab their data using standard js:
document.getElementById("myId").innerHTML; // grabs MyUniqueLink
document.getElementById("myId").getAttribute("href"); // resolves to href value
Or accomplish the same using jQuery:
$("#myId").html();
$("#myId").attr("href");
If you are dynamically creating the <a>'s in the first place, you can also assign them an id at this point using newElement.setAttribute("id", "someNewId");.

create a new instance of group of elements

I am beginner in jQuery and asp.net. I created a simple chat application using SignalR, the design of which you can find here fiddle
How can I create a new instance of that chat design whenever a user has been call by other user while he/she were in chat from before with other user. Here I think I can convert it to User Control. but I dont want to have same Id's which I am using for other chat design and those generated instances should work differently, I mean if userA calls userB and at the same time userC calls userB then they must be created in such a way that they must be unique in handling there own calls (just like FB Chat).
The another issue may arise after successfully creating a new instance is that they might not be get attached to the jQuery functions and server side code automatically. If so, anyway to solve this too?
Before asking here I searched alot (maybe I dont know the exact keyword to search for).
EDIT: Many jQuery developers suggested me to go with Knockout.js or Backbone.js or simple jQuery. But I think there is some simple way to achieve this using ASP.NET functions like User Control or HTTP Handlers (or something else). About which I dont know anything. So, please suggest me which concept to opt for ? and please give detailed explanation(if possible with simple example).
jquery related answers are also welcome.
Single Instance
Multiple Instances

Use JQuery to populate or popup new instance of chat but change your ids using jquery. I would suggest have all your styling and ids done according to a parent container so you can easily grap the parent, duplicate it and change the IDs or content.
I would keep a non filled chat window with ID's like "updateme1" updateme2 etc and then once i get it as a template i will replace all ids one by one with relevant content.
You are doing it right and i dont think its signalR that you need to look into. SignalR would be able to help you pass on specific parameters like "requirechatwindow=true or false" based on if this person is in chat with current person but you can always do this on client as well by going through current open chat sessions. If current chat session does not contain a chat between A and B then open new window with new ID and put a data-from= A and data-to=B as a palceholder so you know this chat is between A and B etc
Hope this helps
UPDATED Fiddle and technique
Here is the fix on Your fiddle edited to show creation and multiple ids I had to adjust some of your css to view the boxes in different location
Updated the code with some comments
The technique is simple:
You create a html template on your page might be in a hidden region
You then use that to create new element in a container and have a handle to pickup this element for example in my code the currentid is my handle but i know the container name so i will only pickup template populated within the actual container to avoid conflict with template itself.
Assign a new id and then you can use any events or any speacial objects on there.
You can then pickup new elements from the new id or any other handle you might have inside them. For example i have just added a click even on it with confirm to hide it.
$('#doubleme').click(function(){
var currentid = $("#chattemplate .chat-outline").attr('data-tid');
var newid = parseInt(currentid,10) + 1;
$("#chatcontainers").append($("#chattemplate").html());
$("#chatcontainers .chat-outline").attr('id',"id"+newid);
$("#chattemplate .chat-outline").attr('data-tid',newid);
});
You only need these five lines of code actually and if you go to fiddle i have commented all of them but they are easy to understand. I am using selectors used in fiddle but these can be further optimised with attributes like data-handle-for or whatever name you can give.
If you are considering this for SignalR then within your hub response of new request you can call the intiate chat window which can setup everything on the client. Any subsequent messages using that data handle can be updated within this new chat window.
For example i assume you create a new group called "chatwindow7" and "chatwindow8" which makes its round trip in your send method and so on get broadcast to only user with this group. Then each user might have multiple windows open but you only need to pickup chatwindow7 for messages with that data handle and update it and so on.
If you are using one-to-one chat users only then you can use connection id as well which means all messages broadcasted will have both sender and reciever (by deafault) connection ID and you only need to pickup the window with connection id handle and update its list of messages or whatever.

The simplest way to do this is to replace the id attributes with class attributes.
<div id="chat-outline">
...
</div>
becomes
<div class="chat-outline">
...
</div>
And update your CSS appropriately.
.chat-outline
{
background-color: gray;
....
}
Then use a text/template tag to make it available to jQuery.
<script type="text/template" id="chat-template">
<div class="chat-outline">
...
</div>
</script>
Note that because browsers ignore script types they don't recognise, this will be ignored by the html rendering engine, but as it has an id, it will be visible to jQuery, and can be accessed thus:
<div id="container">
</div>
<script type="text/javascript">
$(function() {
var chatTemplate = $('#chat-template').html();
$('#container').append(chatTemplate); // First instance
$('#container').append(chatTemplate); // Second instance
$('#container').append(chatTemplate); // Third instance
});
</script>
Of course, if your code needs an id attribute as a handle for a chat instance, you can create a function that creates the chat-instance html given an id. In this case I'll use underscore to provide random-id, template, and iteration functions, but it is easy to use another library, or write your own.
<div id="container">
</div>
<script type="text/template" id="chat-template">
<div class="chat-outline" id="<%= id %>">
...
</div>
</script>
<script type="text/javascript">
var createChatInstance(idstring) {
return _.template($('#chat-template').html(), { id: idstring });
}
$(function() {
var chatTemplate = $('#chat-template').html();
// Create an array of 3 unique ids by which chat instances will be accessed.
var chatIds = [_.uniqueId('chat-outline'),
_.uniqueId('chat-outline'),
_.uniqueId('chat-outline')];
_.each(chatIds, function(chatId) {
$('#container').append(createChatInstance(chatId));
});
// You now have an array of 3 unique ids matching 3 divs.
// You can access individual sub-divs via descendent class matching from the id
// thus: $('#' + chatIds[n] + ' .chat-message').keyup(...code handling event...);
});
</script>
At this point, if you want to take the architecture further, you really do need to consider investigating something like backbone.js.
Hope this helps.

Jquery extension BeautyTips doesn't work with dynamic ajaxPath option

I'm using the BeautyTips jQuery extension, but I'm not having any luck passing dynamic URLs as the ajaxPath. In the documentation, they suggest:
$('#example18').bt({
ajaxPath: ["$(this).attr('href')", 'div#content']
});
I have
$( '.username' ).bt({
ajaxPath: ["$(this).attr('title')"]
});
However, when I hover over the username element, instead of bringing up the URL stored in the title attribute within the Beautytip, it attempts to send the whole browser to another page (or refresh; it's hard to tell because the browser address doesn't change, but the page goes blank, and a View Source shows an entirely different page.)
I have verified that the title in the element in question is correct and is being addressed correctly. If I statically pass the path, it works, but I'd rather not write a new version of this function for every item on the page that needs a Beautytip.
Is there a syntax issue here? Any help would be much appreciated.
My HTML is like:
<span class="username" title="http://degree3.com/popup/baloon/member-summary?id=53">Username</span>

Okay, I had to dig through the extension, but I figured this one out.
The plugin author (for reasons I did not spend the time to decipher) kills the "title" attribute of the element that BeautyTips operates on and moves its value to an attribute called "bt-xtitle" instead. I guess this is why his sample used the "href" attribute instead of the title attribute, and it was my dumb luck to attempt this maneuver on the wrong attribute.
Anyway, this works:
$( '.username' ).bt({
ajaxPath: ["$(this).attr('bt-xtitle')"]
});

post value from one iframe to another iframe

I have two iFrames in my page and I would like to the value of an input field form one iFrame to an input field of the other iFrame. How can I do this?

You will need to set a hidden field or something in the parent:
window.opener.document.getElementById(Client ID of Hidden Field).value = Selected IDs;
You will then need to set the src attribute of the second iFrame and append the value as part of the querystring
something like:
<iframe id='iFrame2' src='/myPage.html?val=myValue' ></iFrame>
You can probably do this in javascript, when I did I did it with asp.net as the scenario was different but probably something like:
$('#iFrame2').attr('src', '/myPage.html?val=' + $('#myHiddenField').val());

Not the easiest. Can we assume that both the IFRAMES, and the parent document are all part of the same domain, and all the same doctype? If not, security restrictions are likely to block you.
Also, what browser(s) do yo uneed it to work in?

OK, given your answer above about being in the same domain, etc.
The answer about setting the URL of the IFRAME will work if you want to send/receive from the other IFRAME. However, I read it as you want to set a value in an existing field.
If that is the case, you need to do something like:
1. Assume IFRAMEs have the ids I1 and I2
2. Put this code on the parent page (you can trigger / place it in a child, but it gets more complicated as you need to handle load/ready state and do additional lookups.
var if1 = document.getElementbyId('I1');
var if2 = document.getElementbyId('I2');
//Or use $get from AJAX framework, etc
var doc1 = if1.document;
var doc2 = if2.document;
//These may throw security or load exceptions if the IFRAMES are not loaded, cross domain, or do not contain HTML.
doc2.getElementById('targetElement').value = doc1.getElementById('sourceElement').value;
//You should do the usual checking for the element existing, etc