I have action button for editing that doesn't have option "Open in new tab" when i right click.
Here is my code:
function actionsTemplateConversion(data) {
if (data != null){
if (canEdit){
row += '<a id="edit" title="${editTr}" onclick="edit(event);"></a>';
}
return row;
}
}
function edit(event) {
table = $('#table').data();
var dataItem = table.dataItem($(event.currentTarget).closest("tr"));
window.location = "users/"+dataItem.id+"/editUser.html?id="+"${id}"+"&name="+"${name}";
}
I've tried use href instead onclick and put this link from edit() function in href and with that i get option Open in new tab for right click, but also there is problem with this because if there is single qoutes in name than everything meesses up because of that qoutes. So only way is with this function.
I also tried with this window.location.href but it doesnt work.
Is there any other option for opening link beside window.location?
you can target at anchor tag this cause browser open new tab <a target="_blank" href=""/>
OR
if(user)
window.open(encodeURI('url'), '_blank');
else
window.open(encodeURI('url'));
if the quote in name try to encode it
https://www.w3schools.com/TAGS/ref_urlencode.asp
<a id="edit" title="${editTr}" onclick="edit(event);"></a>
That isn't a link. A link must have an href attribute. Without one, there is no URL to open when you click it or open in new tab. There is just a JavaScript program that runs.
I've tried use href instead onclick
That's the solution
link from edit() function in href and with that i get option Open in new tab for right click, but also there is problem with this because if there is single qoutes in name than everything meesses up because of that qoutes
This is the problem with generating HTML by mashing strings together instead of using DOM.
You have to very carefully escape everything.
Use DOM instead.
Since you are using jQuery already. Something along these lines should get you started:
var url = "users/" + encodeURIComponent(dataItem.id) + "/editUser.html?id=" + encodeURIComponent("${id}") + "&name=" + encodeURIComponent("${name}");
var $link = jQuery("<a/>")
.attr("href", url)
.attr("title", "${editTr}")
.attr("id", "edit") // Are you sure this is a UNIQUE id? Should this be a class instead?
.on("click", edit);
Related
I’m using Elementor Pro for website development. I created a standard popup that is triggered if the user clicks on a link on the page like this
<a href="#elementor-action-foo” data-extlinkurl="https://www.mylink1.com”>test link</a>
<a href="#elementor-action-foo” data-extlinkurl="https://www.mylink2.com”>test link</a>
<a href="#elementor-action-foo” data-extlinkurl="https://www.mylink3.com”>test link</a>
<a href="#elementor-action-foo” data-extlinkurl="https://www.mylink4.com”>test link</a>
The popup (on the same page) has a button that will forward the user to the external link previously clicked:
Take me to the link
Elementor offers no option to dynamically set the href value of the button based on the custom attribute (in this case “ext-link”), but I found no other option to dynamically set the href attribute of this button. Is there an easy JavaScript /jQuery escape here (no plugin!) that can be used to pass on the custom attribute value to the button link attribute?
EDIT -
I did some tryouts to fund a solution for this problem and I came up with the following:
<script>
// Append an onclick event to each link
let extLinkItems = document.querySelectorAll('[data-extlinkurl]');
extLinkItems.forEach((extLinkItem) => {
extLinkItem.setAttribute("onclick", "getUrl()");
});
The onclick event is added properly to each link here.
Because the function setLink (see below) did not work, I added some checks here:
console.log("Button count=" + document.querySelectorAll('#extlinkbtn').length); // Button count=1
console.log("Button href=" + document.getElementById("extlinkbtn").href); // Button href=http://www.test.com/
console.log("Button href=" + document.getElementById("extlinkbtn").getAttribute("href")); // Button href=http://www.test.com
These provided the expected results. The button is found and the href attribute is available.
function getUrl() {
var newUrl = event.currentTarget.getAttribute('data-extlinkurl');
console.log("newUrl=" + newUrl); // newUrl=https://www.mylink1.com
setUrl(newUrl);
}
Also works properly. When the link is clicked, the data attribute of the link is available.
function setUrl(newLink) {
let linkButtons = document.querySelectorAll('#extlinkbtn');
console.log("count=" + linkButtons.length) // count=0
linkButtons.forEach((linkButton) => {
linkButton.setAttribute("href", "'" + newLinkUrl + "'");
});
}
</script>
Here it becomes problematic. Once the link is clicked, the button cannot be found. The button is there, because the popup with the button is displayed on screen and the element visible. I'm testing several days now and either solution I tried did not work. Why is the button element found if searched on a global scope, but after the link is clicked the button is not available in the function scope?
Eventually and not thanks to the Elementor second line support, I found a solution. It seems that the content of the popup was initially loaded but deleted by a function after the DOM was loaded.
The solution was here: https://developers.elementor.com/elementor-pro-2-7-popup-events/
What I did was adding a custom data attribute to the link button that is clicked in the popup screen after this is loaded which holds the target URL. After this, I added some JS/jQuery to the popup template:
<script>
let newLinkUrl = "";
let extLinkItems = document.querySelectorAll('[data-extlinkurl]');
extLinkItems.forEach((extLinkItem) => {
extLinkItem.setAttribute("onclick", "getUrl()");
});
function getUrl() {
newLinkUrl = event.currentTarget.getAttribute('data-extlinkurl');
jQuery( document ).on( 'elementor/popup/show', () => {
document.getElementById('extlinkbtn').href=newLinkUrl;
});
}
</script>
This works perfectly
is it possible to add the coordinates of a href-link into the target-query?
I mean something like this:
Link 123
This should add the coordinates of the link (id) on the page into the query via document.write() or something.
PS: Should work without JQuery and with IE11 :)
Thanks!
Instead of using a bare href attach an event using javascript, grab the X & Y you want (maybe screen or client as demonstrated below) and redirect the location.href to your chosen page building up the url as needed (commented out below so you can see output).
document.querySelector('#link').addEventListener("click",evt => {
console.log("screen",evt.screenX,evt.screenY);
console.log("client",evt.clientX,evt.clientY);
//location.href = "somepage.php?x=" + evt.screenX + "&y=" + evt.screenY
});
Link
By setting the value of location.href in the event handler the behaviour for the user will be the same as having clicked a link with an href attribute.
I want to use that code here to reload the current page a user is on
<a href="javascript:window.location.href=window.location.href">...
And additionally I want the user to jump to a given anchor-tag #berechnen - how would I do that in that case?
I tried with something like so
<a href="javascript:window.location.href=window.location.href+#berechnen">
But of course that doesn't work. Do I need to save the window-location to a variable first and then add the #berechnen -string to it and then href to that variable?
In head:
<script type="text/javascript">
function redirectToAnchor(anchor) {
// We remove previous anchors from the current URL
var redirectToURL = document.URL.replace(/#.*$/, "");
redirectToURL = redirectToURL + anchor
window.location.href = redirectToURL;
window.location.reload(true)
}
</script>
Then:
<a href="javascript:redirectToAnchor('#ANCHOR')">
Personally I really dislike abusing the anchor tag by replacing its default behavior with JavaScript. By doing this, you break things like being able to open the link in a new tab, copying the link or bookmarking it.
One way you can keep this behavior and still reload the page after a click, is by adding the fragment to the href as you would do normally and in addition, you bind a JavaScript event that reloads the page when it is clicked. In that case you can simply use the href attribute to get the URL, and after you set the url, you reload the page. In the example below if the anchor has a force-reload class, it will also reload the page if you click on the anchor.
document.addEventListener('click', function(e) {
if (e.target && e.target.classList.contains('force-reload') && e.target.nodeName === "A") {
e.preventDefault();
window.location = e.target.href;
window.location.reload();
}
});
Click here
I have added an editor and user can enter anything they want, then I show that entered text under message card, so if user has entered a link like Click here & its HTML part is Click here so when show this under message card and click on click here then its not redirecting to google.com it goes to http://my-website.com/google.com, its because href value don't have any protocol, so how I can add protocol to its value and there could be multiple links in single message, some could have protocol and some not.
You just need to loop over the <a> links after you have added the HTML from editor to your message card and check the protocol of each anchor link. If there is no protocol then add one to them.
$('#messageCard').find('a').each(function() {
//get the href value of each anchor element
var hrefValue = $(this).attr('href');
//use regular expression to check if the href contain http:// or
//https://. If not then add http://
if (!hrefValue.match(/^[a-zA-Z]+:\/\//))
{
$(this).attr('href','http://' + hrefValue);
}
});
It may not be a nice idea to let user to enter HTML code in the editor. But if you insist to do so, you may try
$(function() {
$('a').each(function() {
if (!$(this).attr("href").startsWith("http")) {
$(this).attr("href", "http://" + $(this).attr("href"));
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click here
I have a link:
<a id="lnk" href="${pageContext.request.contextPath}/path/path2.pdf?var0=sometext&var1=moretext" onclick="update();"target="_blank">click to export</a>
and a JavaScript function in a separate file:
function update()
{
var link = document.getElementById("lnk");
link.href += "&var2=" + document.getElementById("textareaIdName").value;
return;
}
This is supposed to grab the text from a textarea box in a jsp form to pass into controller for output. It works the first time I click the link, but then if I change the text in the box and click link again it holds the same value from the first click on every other link click until I reload the page regardless of what I change in the text box. The link returns a file download.
How can I keep getting new text from textarea without reloading the page?
This occurs because you are using += each time the link is pressed which will keep concatinating the var2 onto the end of the hyperlink, to make this work you should use:
var linkName = "${pageContext.request.contextPath}/path/path2.pdf?var0=sometext&var1=moretext";
function update(obj) {
obj.href = linkName + "&var2=" + document.getElementById("textareaIdName").value;
return;
}
<a id="lnk" href="" onclick="update(this);" target="_blank">click to export</a>
In your html:
<a ... onclick="return update(this);">click me</a>
Passing this in the handler means that this in the function references the DOM element, so you don't have to use getElementById, so the function is:
function update(link) {
link.href = /* whatever */;
}
Now you can put the handler on multiple elements without knowing or using the id.