Change href of a link jquery - javascript

currently I have a textbox in which someone can type in a link, and then a link on the page next to the textbox should change it's href attribute to the text the user just typed in.
My javascript:
var LinkText = $("[id$=TextBox]").val();
$("[id$=DocumentLink]").href = LinkText;
My HTML:
<a id ="DocumentLink" target = "_blank" href="http://www.currentlink.com/">Link to Document</a>
<input id="TextBox" type="text" /> `
Although LinkText is picked up as the string typed in the textbox, the second line of my javascript is not working as I want. The link stays as the currentlink.
I have jQuery 1.4.2 if that helps, I could be doing something that doesn't work with that maybe.

Since you have a jQuery object you have to set the attr
$("[id$=DocumentLink]").attr("href", LinkText);
Or you can get the actual HTMLElement at the 0 index and call .href that way:
$("[id$=DocumentLink]")[0].href = LinkText;
And since your matching an exact ID, just use $("#DocumentLink")

Try it:
$("#DocumentLink").attr('href', LinkText);
Regards.

jQuery object doesn't have href property. You are defining a property for the jQuery object which doesn't affect the href property of the HTMLElement object in the jQuery collection. You could use the attr or the prop method instead.

set the attr of the link.
$("[id$=DocumentLink]").attr("href", LinkText);
i think it would be much easier to use JS and innerHTML.

Related

Why I can not change the href value by jQuery?

Below is my code..
var content = $("XXXX");
content.find("a").each(function() {
var value = $(this).attr('href');
$(this).attr('href', encodeURI(value));
alert(value);
});​
However, it keep showing error.
How can I make this code work which I want to encode the url.
Instead of content.find('a') use content.filter('a'). Because right now you're content is an array of only one element (ie. <a>), so there is no more <a> within that <a> and .find('a') fails here.
So .filter() is safe to use.
Demo
No need to use JQuery.find here as content variable has only anchor tag and you want to apply encodeURI for your URL.
For that requirement below code is well enough.
$(content).each(function(){
var value = $(this).attr('href');
$(this).attr('href', encodeURI(value));
alert($(this).attr('href'));
}
);
Hope it helps you.
maybe you should add an ID (if you want to use this for more than one element then create a specific class for the elements and link via $(".classname")) to your link and then use a normal query like this
var yourLink = $("#yourID");
yourLink.attr('href', encodeURI(value));​
and make sure that your value has something in it. Also if .attr(...) has still no effect please try .prop("href", encodeURI(value))

Put an id to a parent element

I wanted to put an id in my element's parent element. Below is my code:
<div>
<div id="child"></div>
<div>
Im aware that jquery has a way to select a parent element , but I dont know how what method shall I use to put an id to it. Below is my jquery code:
div_resizable = $( "#child" ).parent();
div_resizable.id = "div_resizable";
Above code doesnt work with me. It doesnt throw an error, but no changes had taken effect. Any solution to my problem?
For achieve what you want, you can use the jquery attr:
$("#child" ).parent().attr('id', 'newID');
Or you can use the prop:
$("#child" ).parent().prop('id', 'newID');
And you can check the difference between the two here: difference between prop() and attr()
Of course div_resizable.id = "div_resizable" doesn't work. div_resizeable is an jQuery array and you are trying to assign id to it.
Try .attr instead:
$("#child").parent().attr({id: "div_resizable"});
To set a property on the first element inside a jQuery result object:
div_resizable = $( "#child" ).parent()[0];
// ^^^
div_resizable.id = "div_resizable";
This picks the first Element from the result so that you can directly access the property.
Or:
$('#child').parent().prop('id', 'div_resizable');
Use the .prop() helper method to accomplish the same thing.

Is it possible to grab a link by its href if it doesn't have a class or ID?

I'm using someone else's app and want to change the innerHTML in between any < a>< /a> tag that has a certain href. But these links don't have a class or ID associated with them and I can't edit the code to give them classes or ID's. Is there a way to grab a tag by its href in JavaScript? I wanted to do something similar to this:
var theLink = document.getElementByHref("example.com");
Otherwise, if that is not possible, can I loop through all the links in the page and choose the ones that have the certain href and innerHTML I'm looking for?
You can use a DOM3-attribute-selector (jQuery doc) to get all elements that contain a certain text in their href attribute. It would look like
$('a[href*="example.com"]')
However, that might not be what you actually want - not only urls to that domain might contain this string. You might do something like begins-with:
$('a[href^="http://example.com"]')
but to get an exact and possibly more complex match, you don't get around a custom filter:
$('a[href]').filter( function() {
return this.hostname == "example.com";
// or check other properties of the anchor element
})
Select all elements that have the example.com value in href attribute:
Live Demo: http://jsfiddle.net/NTGQz/
$('a[href*="example.com"]');
You can also try this, just to be more specific and following the OP "ideal" answer:
Live Demo: http://jsfiddle.net/ksZhZ/
jQuery.fn.getElementsByHref = function(str){ return $('a[href*="' + str + '"]'); };
$(document).ready(function(){
elems = $(this).getElementsByHref('example.com');
});
jQuery has a lot of selectors. The one you want here is the attribute selector.
$('a[href="example.com"')
You can use an attribute selector:
$('a[href="http://example.com"]')
With JQuery attribute selector, you can do this :
$('a[href="example.com"]')
Try this
$('a[href*="example.com"]');
This will select the link that has example.com in the href attribute..
$('a[href="http:google.com"]')
you can do it with jquery: http://api.jquery.com/attribute-equals-selector/
ex: linksToGoogle = $('a[href="http://google.com"]');
You can do this without jQuery.
var links = document.querySelectorAll('a[href*="example.com"]');
You can do this natively with querySelectorAll if your users are on IE8+ or any other browser. This method returns an NodeList of matching elements.
document.querySelectorAll('a[href="exact/value.html"]'); // exact match
document.querySelectorAll('a[href*="partial/value.html"]'); // partial match
document.querySelectorAll('a[href^="starts/with"]'); // href starts with
document.querySelectorAll('a[href$=".html"]'); // href ends with

jquery hasClass, can it be given the beginning of class name, to get the full class name

I'm trying to do something similar to this question, but it's a bit different, so the solution there isn't working for me.
<span class="a-class another-class test-top-left"></span>
I have an element (this code shows a span but it could be div span or anything). This element has a class beginning with test- (test-top-left, test-top-right etc.) I've triggered a click event on classes starting with test- and saved the clicked object as var object = this;. Simple stuff so far.
What I'm trying to do now is get the full name of that class (test-top-left). I know it starts with test- but what's the full name. The thing is that there are other classes a-class another-class and test-top-left. Can hasClass be used to get the full name of the class? I'd prefer not to use find() or filter() just because there may be additional elements within that also have class="test-"
Edit:
The code I have now is, but it gives me ALL the classes. What I need is the single class beginning with test-.
var object = this;
$(object).attr('class');
So now I for loop through all the classes and test each one separately, which seems like a lot of unnecessary code. I'm hoping jQuery has a clever way to get the exact class that was clicked right away.
Description
You can use jQuerys Attribute Contains Selector, .attr() and .click() method.
Attribute Contains Selector - Selects elements that have the specified attribute with a value containing the a given substring.
.attr() - Get the value of an attribute for the first element in the set of matched elements.
.click() - Bind an event handler to the "click" JavaScript event, or trigger that event on an element.
Sample
html
<span class="anyclass test-hello">Hello World</span>​
jQuery
$("[class*='test']").click(function() {
var object = $(this);
alert(object.attr("class").match(/(test-.*?)(?:\s+|$)/)[1])
;});
Check out the updated jsFiddle
Update
If you dont want to use regex you can do this.
$("[class*='test']").click(function() {
var object = $(this);
alert("test-" + object.attr("class").split("test-")[1].split("-"))
;});
​
More Information
jQuery - Attribute Contains Selector
jQuery - .attr()
jQuery - .click()
jsFiddle Demonstration
This should work for you:
var object = this;
var className = object.className.match(/(test-.*?)(?:\s+|$)/)[1];
Class name is the name of the class you are looking for.
If you don't want to use split or regex, you can try having the class in a separate attribute
<span class="someclass test-something" _rel="test-something">test<span>
or
<span class="someclass" _rel="test-something">test<span>
with the script
$("[_rel*='test-']").click(....
And to retrieve the attribute, use $(this).attr("_rel")

How can I alter the `href` attribute of an anchor using jQuery

I have a link:
MyLink
What I need to do with jQuery to edit the href attribute?
If you want to modify the displayed anchor text, use .text()
$('a').text(function(_, currentText) {
return 'Here ' + text
});
That would change the line into
Here MyLink
If you want to modify the linked href, use .attr()
$('a').attr('href', 'your new value');
You can use the .attr() the same way I demonstrated with .text() above (passing a function and access the current value also)
Ref.: .attr(), .text()
Easy
$('a').attr('href','yourTextHere');
Yes
$("a").attr('href', 'value');
Might be a good idea to set an ID on the element to specifically target it:
$("a#id").attr('href', 'value');
This should do it.
$("#id").attr("href", "Etc");
.attr()
First add a class name to that link, as shown below.
MyLink
Then,
$('.classname').attr('href','insert link here');
If you're wanting to change the text of the link then:
$('a').text('My link text');
If it's the href you want to change, then, as noted by others it's:
$('a').attr('href','newURL');
If you're okay using plain JavaScript:
var a = document.getElementById('aElementID');
a.innerHTML = 'My Link Text';
a.href = 'http://new.link.com/path/to/page.html';
Note that you'll need some way to uniquely identify the particular a element you want to target, either using an id (to give $('#aElementID')) or a class (to give $('a.className'), though this will return a node list/array of elements that you'll then have to iterate through).
you can attach it as by specifying the id to it and then uniquely accessing the anchor tag by the classname
;
$("a.mylink").attr('href', 'http://google.com');

Categories

Resources