This is my dynamically changing thymleaf id. How do I refer that Id using jQuery
<div th:id="${answerList.answer_id} +'answer_id' " class="some class"></div>
I tried using this Jquery code it does not work for me. Please help me out
$('#answerList.answer_id' + 'answer_id').text();
You can do like:
<script th:inline="javascript">
$('#' + [[${answerList.answer_id}]] + 'answer_id').text();
</script>
Below code is for navigating to the Google Webpage when the element <li> is clicked.
<li onclick="window.location='http://www.google.com';" style="cursor:pointer;">Google</li>
Now I have another <li> which goes to different websites depending on a parameter. I tried this
<script>
document.write('<li onclick="window.location='http://www.google.com/mmm/yyy/' + random_variable + 'ddd/eee';" style="cursor:pointer;">Google</li>');
</script>
This isn't working fine. What am I doing wrong?
You don't want to use document.write. Instead you can change the attributes of the tags themselves. onClick is just javascript inside your code so you can replace variables
<li onclick="location.href='http://www.google.com/mmm/yyy/' + random_variable + 'ddd/eee';">Google</li>
It's a little messy. I'd personally do it with jQuery and a regular <a> tag
Javascript/jQuery
$(document).ready(function() {
$('#someid').click(function(e) {
e.preventDefault()
location.href= 'http://google.com/' + random_variable;
});
});
Or if your random variable is available onload you could just replace the href attribute
$(document).ready(function() {
$('#someid').attr('href','http://google.com/' + random_variable);
});
HTML
<li>Google</li>
var targetElement = document.getElementById("id");
targetElement.appendChild('<li>...</li>';
The first line find the existing element, where you want to insert the <li>.
The second line insert it.
I am adding the link button and a image logo with that link dynamically from code behind. On the page it is showing linktext and then the image '[LinkText][Image]'. I want to show in the other manner like '[Image][LinkText]'. How we can implement it, please help.
Here is my code snippet:
HtmlGenericControl imgToAdd = new HtmlGenericControl("img");
imgToAdd.Attributes.Add("src", "../Images/Click.png");
imgToAdd.Attributes.Add("id", "img" + containerCountForLabels);
imgToAdd.Style.Add("height", "16px");
imgToAdd.Style.Add("vertical-align", "top");
HtmlGenericControl linkToAdd = new HtmlGenericControl("a");
linkToAdd.Attributes.Add("id", "linkbtn" + containerCountForLabels);
linkToAdd.Style.Add("margin-bottom", "5px");
linkToAdd.Style.Add("margin-top", "6px");
linkToAdd.Style.Add("margin-left", "10px");
linkToAdd.Style.Add("margin-right", "10px");
linkToAdd.Style.Add("font-size", "13px");
linkToAdd.Style.Add("float", "left");
linkToAdd.Style.Add("cursor", "pointer");
linkToAdd.Style.Add("color", "white");
linkToAdd.Style.Add("text-decoration", "underline");
linkToAdd.Style.Add("vertical-align", "top");
linkToAdd.Attributes.Add("onclick", "ShowHideDiv('img" + containerCountForLabels + "','divMain" + containerCountForLabels + "');");
linkToAdd.InnerText = dtReportLocal.Rows[0]["SubExpenseName"].ToString();
linkToAdd.Controls.Add(imgToAdd);
divForLink.Controls.Add(linkToAdd);
containerCountForLabels++;
I dont know why it shows before, but what you can do is to add the image and text as an innerHTML of the link instead using InnerText, something like the code below:
linkToAdd.InnerHTML = "<img src='../Images/Click.png' id='img"+ containerCountForLabels+"' style='height:16px;vertical-align:top;'>"+dtReportLocal.Rows[0]["SubExpenseName"].ToString();
I am trying to create a custom share link so on click it will share the current URL.
I understand this
<a href="http://twitter.com/share?text=An%20Awesome%20Link&url=http://www.google.com">
Share This on Twitter</a>
But is there any way to make it dynamic, so it will grab the URL of the page the user is on and share that, rather than a hard coded link.
Thanks
In Javascript you can use :
document.URL
It gives you the current url
https://developer.mozilla.org/en-US/docs/DOM/document.URL
and
document.title
for getting the title of this page
https://developer.mozilla.org/en-US/docs/DOM/document.title
with jQuery or javascript you can set the href attribute
http://docs.jquery.com/Attributes/attr
https://developer.mozilla.org/en-US/docs/DOM/stylesheet/href
Example:
$('a').on('click', function() {
$(this).attr('href',
'http://twitter.com/share?text='+document.title+'&url=' + document.URL);
});
Another way:
https://dev.twitter.com/docs/tweet-button
With jQuery:
$('a').on('click', function() {
document.location = 'http://twitter.com/share?text=' + document.title + '&url=' + window.location.href;
});
Use this
<a data-count='horizontal' expr:href='data:post.canonicalUrl' href='http://twitter.com/share' rel='nofollow' target='_blank'>Share on twitter</a>
Putting expr:href='data:post.canonicalUrl' does the trick.
nonetheless,twiiter gives you an option while generating buttons
(source: ctrlv.in)
When I use the HTML <base> tag to define a base URL for all relative links on a page, anchor links also refer directly to the base URL. Is there a way to set the base URL that would still allow anchor links to refer to the currently open page?
For example, if I have a page at http://example.com/foo/:
Current behaviour:
<base href="http://example.com/" />
bar <!-- Links to "http://example.com/bar/" -->
baz <!-- Links to "http://example.com/#baz" -->
Desired behaviour:
<base href="http://example.com/" />
bar <!-- Links to "http://example.com/bar/" -->
baz <!-- Links to "http://example.com/foo/#baz" -->
I found a solution on this site: using-base-href-with-anchors that doesn't require jQuery, and here is a working snippet:
<base href="https://example.com/">
/test
Anchor
Or without inline JavaScript, something like this:
document.addEventListener('DOMContentLoaded', function(){
var es = document.getElementsByTagName('a')
for(var i=0; i<es.length; i++){
es[i].addEventListener('click', function(e) {
e.preventDefault()
document.location.hash = e.target.getAttribute('href')
})
}
})
Building upon James Tomasino's answer, this one is slightly more efficient, solves a bug with double hashes in the URL and a syntax error.
$(document).ready(function() {
var pathname = window.location.href.split('#')[0];
$('a[href^="#"]').each(function() {
var $this = $(this),
link = $this.attr('href');
$this.attr('href', pathname + link);
});
});
A little bit of jQuery could probably help you with that. Although base href is working as desired, if you want your links beginning with an anchor (#) to be totally relative, you could hijack all links, check the href property for those starting with #, and rebuild them using the current URL.
$(document).ready(function () {
var pathname = window.location.href;
$('a').each(function () {
var link = $(this).attr('href');
if (link.substr(0,1) == "#") {
$(this).attr('href', pathname + link);
}
});
}
Here's an even shorter, jQuery based version I use in a production environment, and it works well for me.
$().ready(function() {
$("a[href^='\#']").each(function() {
this.href = location.href.split("#")[0] + '#' + this.href.substr(this.href.indexOf('#')+1);
});
});
You could also provide an absolute URL:
<base href="https://example.com/">
test
Rather than this
test
I'm afraid there is no way to solve this without any server-side or browser-side script. You can try the following plain JavaScript (without jQuery) implementation:
document.addEventListener("click", function(event) {
var element = event.target;
if (element.tagName.toLowerCase() == "a" &&
element.getAttribute("href").indexOf("#") === 0) {
element.href = location.href + element.getAttribute("href");
}
});
<base href="https://example.com/">
/test
#test
It also works (unlike the other answers) for dynamically generated (i.e. created with JavaScript) a elements.
If you use PHP, you can use following function to generate anchor links:
function generateAnchorLink($anchor) {
$currentURL = "//{$_SERVER['HTTP_HOST']}{$_SERVER['REQUEST_URI']}";
$escaped = htmlspecialchars($currentURL, ENT_QUOTES, 'UTF-8');
return $escaped . '#' . $anchor;
}
Use it in the code like that:
baz
To prevent multiple #s in a URL:
document.addEventListener("click", function(event) {
var element = event.target;
if (element.tagName.toLowerCase() == "a" &&
element.getAttribute("href").indexOf("#") === 0) {
my_href = location.href + element.getAttribute("href");
my_href = my_href.replace(/#+/g, '#');
element.href = my_href;
}
});
My approach is to search for all links to an anchor, and prefix them with the document URL.
This only requires JavaScript on the initial page load and preserves browser features like opening links in a new tab. It also and doesn't depend on jQuery, etc.
document.addEventListener('DOMContentLoaded', function() {
// Get the current URL, removing any fragment
var documentUrl = document.location.href.replace(/#.*$/, '')
// Iterate through all links
var linkEls = document.getElementsByTagName('A')
for (var linkIndex = 0; linkIndex < linkEls.length; linkIndex++) {
var linkEl = linkEls[linkIndex]
// Ignore links that don't begin with #
if (!linkEl.getAttribute('href').match(/^#/)) {
continue;
}
// Convert to an absolute URL
linkEl.setAttribute('href', documentUrl + linkEl.getAttribute('href'))
}
})
You can use some JavaScript code inside the tag that links.
<span onclick="javascript:var mytarget=((document.location.href.indexOf('#')==-1)? document.location.href + '#destination_anchor' : document.location.href);document.location.href=mytarget;return false;" style="display:inline-block;border:1px solid;border-radius:0.3rem"
>Text of link</span>
How does it work when the user clicks?
First it checks if the anchor (#) is already present in the URL. The condition is tested before the "?" sign. This is to avoid the anchor being added twice in the URL if the user clicks again the same link, since the redirection then wouldn't work.
If there is sharp sign (#) in the existing URL, the anchor is appended to it and the result is saved in the mytarget variable. Else, keep the page URL unchanged.
Lastly, go to the (modified or unchanged) URL stored by the mytarget variable.
Instead of <span>, you can also use <div> or even <a> tags.
I would suggest avoiding <a> in order to avoid any unwanted redirection if JavaScript is disabled or not working, and emulate the look of your <a> tag with some CSS styling.
If, despite this, you want to use the <a> tag, don't forget adding return false; at the end of the JavaScript code and set the href attribute like this <a onclick="here the JavaScript code;return false;" href="javascript:return false;">...</a>.
From the example given in the question. To achieve the desired behavior, I do not see the need of using a "base" tag at all.
The page is at http://example.com/foo/
The below code will give the desired behaviour:
bar <!-- Links to "http://example.com/bar/" -->
baz <!-- Links to "http://example.com/foo/#baz" -->
The trick is to use "/" at the beginning of string href="/bar/".
If you're using Angular 2 or later (and just targeting the web), you can do this:
File component.ts
document = document; // Make document available in template
File component.html
<a [href]="document.location.pathname + '#' + anchorName">Click Here</a>