How to set a custom href into a button when onClick? - javascript

I have a URL
http://localhost:8080/BIM/teacher/reports/section-exercise/assignment?x=1&y=2&z=3
I have 2 btns
I'm not sure how would I bind those 2 btn to the correct URL.
If the Remediation is clicked, I want to set the href to
http://localhost:8080/BIM/teacher/reports/section-exercise/remediation?x=1&y=2&z=3
The only different is the 4th segment, the rest stay the same.
Any helps / suggestions on them will be much appreciated !
I guess - I might have to :
grab the whole URL
re-construct the newURL, store it in a variable
bind that newURL to my btn.
I hope I'm in the right track for this.
Let me know if you guys, notice something.

Here you can change the URL to what ever you like.
I am using Replace fucntion to change the URL on the fly
var url='http://localhost:8080/BIM/teacher/reports/section-exercise/assignment?x=1&y=2&z=3'
$('button1').click(function() {
$(this).attr('href', url);
});
$('button2').click(function() {
$(this).attr('href', url.replace('assignment','remediation');
});

$(/*remediation button selector*/).click(function() {
$(/*assignment performance button selector*/).attr('href', 'http://localhost:8080/BIM/teacher/reports/section-exercise/remediation?x=1&y=2&z=3');
});
I'm not sure if you meant you want the Remediation button to change the href for the first button, or if you want them to just have different hrefs; if it's the latter, they can just have the different hrefs directly in the HTML, no JS needed.

Aminas answer is good, but in case the first URL isn't always the same I would recommend this function (using Regex) to change only the file name of an URL:
function changeFileName(strURL, strNewName) {
return strURL.replace(/[^\/?]*(?=\?|$)/, strNewName);
}
This (a) works no matter what the original file name was, and (b) won't cause problem if the path contains the file name.

Related

Remove "#comments" from dynamically loaded URLs?

I've got a problem where all the dynamic links on my homepage have "#comments" at the end, making it so when the user clicks their screen is annoyingly jolted down to the 'Comments' section each time rather than staying on top.
Example URL:
https://example.com/441447279/amazing-art/#comments
Is there a way to dynamically strip them of the 'comments' part via jQUery?
They're always the SECOND link in a unique class <p class="g1-meta entry-meta entry-byline entry-byline-s entry-byline-with-avatar">
so I was thinking something like
var linkURL = $(".g1-meta.entry-meta.entry-byline.entry-byline-s.entry-byline-with-avatar").find("a").prop('href');
but I don't know how to make it retrieve the SECOND link instead of the 1st.
And I don't know where to go from there... Help appreciated.
Use this
//The key here is to use nth-of-type selector
$(".g1-meta.entry-meta.entry-byline.entry-byline-s.entry-byline-with-avatar").find("a:nth-of-type(2)").each(function(){
let link = $(this).prop('href').replace('#comments','');
$(this).prop('href',link)
})
Or without jQuery
Array.from(document.querySelectorAll('.g1-meta.entry-meta.entry-byline.entry-byline-with-avatar')).forEach(function(node){
let anchorNode = node.querySelectorAll('a')[1];
anchorNode.href= anchorNode.href.replace('#comments','');
})

How to replace url instead add/push in this code

Sorry guys, noob jQuery question. I found this code to change the url depending on which checkbox is selected here:
Change href depending on checkboxes
But I need to replace the url instead add the checkbox value to the url.
Like I'm on www.katana.com/e-bikes/ and I want to redirect to www.katana.com/product/whatever not want to stay on e-bikes subpage and continue adding the value to the url.
Thank you so much!!!
$(document).ready(function() {
$('.checkbox').on("change", function() {
var aHrefVals = [];
$('.checkbox').filter(":checked").each(function() {
aHrefVals.push($(this).val());
});
$("a").attr("href", aHrefVals.join(","));
});
});
If you do window.location.origin you will get www.katana.com . Then you can append any kind of values after the origin on checkbox change method.

jQuery Make a Link in Active Status

I am working on a HTML template, but I cannot touch the HTML code, I can only work on CSS and JS files. So I cannot in any way edit the HTML code.
What I am trying to achieve is to put some links in active status when jQuery or Javascript recognizes that the current page URL is the same one of the link I want to put in active status, without editing the HTML code.
Is there a way to do it? I tried in many ways but with no luck.
Here is the HTML code ( Remember I cannot edit it ).
<span class="Tag_Nav_Aux">
Create Account
|
Login
|
My Cart
</span>
The jQuery or Javascript code should work on different links, other than the ones I reported above, since the HTML changes when the user is logged in or logged out.
So the jQuery should point the class Tag_Nav_Aux and add the Active class to any a tag it will find that has the link the same of the current URL.
You can do something like this. Your file name from the URL
var filename = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
After that get the anchor from the navigation and apply some class.
$("span.Tag_Nav_Aux a[href*="+filename+"]").addClass('active');
Here you have to write a CSS active class which will make that link to appear like an active link.
Try this script
jQuery(function($){
$('.Tag_Nav_Aux a').filter(function(){
return $(this).attr('href').toLowerCase() === window.location.pathname.toLowerCase();
}).addClass('active');
});
and create a CSS rule for
.Tag_Nav_Aux a.active{
// style you want the active link to have
}
$(document).ready(function() {
var url = window.location.href.toLowerCase();
$(".Tag_Nav_Aux a").each(function() {
var $this = $(this);
var href = $this.attr("href").toLowerCase();
if(url.indexOf(href) > -1) {
$this.addClass("active");
}
});
});​
I think you need to check the current page url and assign a class to the item like to active.
I usually do putting class="active" based on current URL match with help of server side code.
But if you dont want server code you can do with help of JavaScript
var currentPage=window.location.href;
if(currentPage=="")
{
//logic to find and add a Class for the proper anchor tag
}

Jquery .html and .load

I'm trying to teach myself jQuery and I'm a little stomped with the load() method. I'm working on eBay listings. Yes, I know includes are not allowed on ebay. However, there is a workaround that has been around for a few years and ebay doesn't seem to be cracking down on it.
var ebayItemID='xxxxxxxxxxxxxx'; // This is eBay code. I cannot edit it.
<h1 id="title"> TO BE REPLACED</h1>
$(document).ready(function(){
var link = "http://www.ebay.com/itm/" + ebayItemID + "?item=" + ebayItemID + &viewitem=&vxp=mtr";
var newTitle = $('#title').load(link + "#itemTitle");
$('#title').html(newTitle);
});
What's the point of this. I want to show the item title on the description, but I want to do so dynamically,
load will not work on different domains (ebay on your case)
load will set the content directly to your element. You can't assign it to a var.
If you would like to indicate you want to extract content from a specific element you need to add a space between your link and the element id:
You can find more info on the jQuery docs
$('#title').load(link + ' #itemTitle', function() {
alert('Load was performed.');
});
When you use load will place the returned html into the element(this case #title).
So you don't need to call html after it.

Remove anchor, but not arguments, via JavaScript

I want to change the following example URL
http://www.mydomain.net/site?argument1=test1&argument2=test2#anchor
to
http://www.mydomain.net/site?argument1=test1&argument2=test2
with JavaScript. How would I best do that?
EDIT: With 'anchor' and the other text elements, I meant generic elements. So the anchor could also be another text. Sorry.
If you're trying to change the current location's anchor, it's better to change window.location.hash:
window.location.hash = '';
In some browsers this will avoid a reload of the page as the URL changes.
Try this:
window.location = window.location.replace(/#anchor/,"");
OK, so I tried this, and it worked perfectly fine:
var url=window.location.toString();
url=url.replace(/#anchor/,'');
window.location=url;
This should replace #anchor but also #anchor_etc or #anchor-etc from your url
var url = "http://www.mydomain.net/site?argument1=test1&argument2=test2#anchor";
url = url.replace(/\#[a-z\-\_]+/i, '');
window.location = window.location.replace('#anchor','');

Categories