Pulling and placing a link src with jQuery

**prodac** · Oct 29, 2010 00:21

Hi guys! ...and girls!

I'm having some trouble figuring out how to pull the href from a link and inserting the href inside another <a> tag.

This is my code:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Support Documents</title>
        <link href="/css/style.css" rel="stylesheet" type="text/css" media="screen" />

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
        <script type='text/javascript' src="/js/jquery.iframe.js"></script>
        
        
		<script type="text/javascript">
		   $(function() {
		       $('#linkSource a').each(function() {
		           $('#output').append($(this).attr('href'));
		           $('#output a').append($(this).attr('href'));
		       });
		   });
		</script>

    </head>
    <body>
    <div id="output"></div>
    <div id="linkSource"style="display: none;">{tag_upload a support document}</div>
    	<ul>
    		<li>{tag_name_nolink}&nbsp;<a id="output" href="">Download PDF</a></li>
		</ul>
	</body>
</html>

The string {tag_upload a support document} render as:

HTML Code:

<a href="/support/products/K200C%20instructions.pdf" target="_blank">K200C%20instructions.pdf</a>

**baileylo** · Oct 29, 2010 01:39

Code JavaScript:

$('#target_ahref').attr('href', $('#source_ahref').attr('href'));

The code above will take the href from source_ahref and apply it to target_ahref

**prodac** · Oct 29, 2010 20:11

I've probably stuck my hed up my own ass, but I can't get this to work either

HTML Code:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Support Documents</title>
        <link href="/css/style.css" rel="stylesheet" type="text/css" media="screen" />

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
		
		<script type="text/javascript">
			$('#target_ahref').attr('href', $('#source_ahref').attr('href'));
		</script>
		
    </head>
    <body>
    
    <div id="source_ahref"style="display: none;">{tag_upload a support document}</div>
    <div id="target_ahref"><a href="">Test</a></div>
    
    	<ul>
    		<li>{tag_name_nolink}&nbsp; <div id="target_ahref"><a href="">Download PDF</a></div></li>
		</ul>
		
	</body>
</html>

**baileylo** · Oct 29, 2010 21:30

YOu should put your javascript files before the body tag, they block loading of content and should be thus loaded last.

Change it to
$(document).ready(function(){
$('#target_ahref').attr('href', $('#source_ahref').attr('href'));
});

**prodac** · Oct 30, 2010 00:56

What du you mean by

put your javascript files before the body tag, they block loading of content and should be thus loaded last.

They are before the <body> tag, in the <header> tag. I have tried placing the Javascript both in the <header> and at the end of the document, but stil dosent work.

**baileylo** · Oct 30, 2010 11:46

Sorry, I ment closing body tag.

**prodac** · Oct 30, 2010 22:54

I've tried putting it together in all sort of ways, but still no luck :/

Dos this look right?

HTML Code:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Support Documents</title>

      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">    </script>
				
    </head>
    <body>
    
    <div id="source_ahref"style="display: none;"><a href="http://www.sitepoint.com/forums/showthread.php?t=709772">Link to SitePoint Forum Post</a></div>
    
    	<ul>
    		<li>Document Name
    			<div id="target_ahref"><a href="">Download PDF</a></div>
    		</li>
		</ul>
		
		
	<script type="text/javascript">
		$(document).ready(function(){
			$('#target_ahref').attr('href', $('#source_ahref').attr('href'));
		});
	</script>

	</body>
</html>

**oddz** · Oct 30, 2010 23:20

What should the end result look like? I get the impression the intention is to copy the same link after the existing one – is that correct?

**prodac** · Oct 30, 2010 23:54

The end result would look something like this:

1. The jQuery pulls the ahref from

HTML Code:

<div id="source_ahref"style="display: none;"><a href="http://www.sitepoint.com/forums/showthread.php?t=709772">Link to SitePoint Forum Post</a></div>

and insert it into

HTML Code:

<div id="target_ahref"><a href="">Download PDF</a>

The "source_ahref" is dynamically created link where I can't change the link tekst.

**prodac** · Nov 1, 2010 23:41

I have figured out how to pull the link source with jQuery, anyone have an example of placing?

**Pavel_Nedved** · Nov 2, 2010 02:14

Should be something like:

var theHref = $("#source_ahref a:first").attr("href");
$("#target_ahref a:first").attr("href", theHref);

This assumes that you want the first link inside the respective div's. Why not give the ID's to the link tags themselves? Would make it a little simpler.

Also, no need for the document.ready() function if you're putting your JS just before the </body> tag. The DOM will have already loaded by that point.

**Pavel_Nedved** · Nov 2, 2010 02:19

You could also do:

$("#target_ahref a:first").attr("href", $("#source_ahref a:first").attr("href") );

I prefer the first suggestion though, as it's easier to follow when you re-use or edit this code.

**Pavel_Nedved** · Nov 2, 2010 02:23

By the way, it looks like the errors from before are in the selection of the links... you guys were selecting the containing <div> tag, which has no "href" attribute.

I probably didn't have to point that out, but just in case you were wondering - that's where you went wrong.

Hope that helps,

Pavel

**prodac** · Nov 2, 2010 04:03

Hi Pavel_Nedved,

Thanks for the feedback

All though you solution make perfectly scenes, I can't get it functioning. :/

I have posted my complete code at http://jsfiddle.net/prodac/Azr7K/

Any feedback wil be appreciated

**Pavel_Nedved** · Nov 2, 2010 12:46

You've erased the <div> tag that originally had the class "target_ahref" and applied it directly to the link... that's good, but you have to change your selectors to reflect that, because you'd now be looking for a link inside a link... not what you want. Here's the change:

var theHref = $("#source_ahref a:first").attr("href");
$("#target_ahref:first").attr("href", theHref);

I also didn't realize there was more than one link to change. As such, you need to stop using id's and change them to classes, since id's are meant to be unique. Once you've changed each source_ahref & target_ahref into classes, here's how you'd code it:

$(".source_ahref a").each(function(){
var theHref = $(this).attr("href");
$(this).parent().next().children('.target_ahref').attr("href", theHref);
});

Here's the full code:

Code:

<h2>Product Name</h2>
    <div id="cat_description">
        <div id="list">
        <ul id="{tag_position this document}" class="list_item">
            <li class="source_ahref"><a href="#Link1">This is the Source Link</a></li>
            <li class="text">Support Document 1&nbsp;
                <a class="target_ahref" href="#">Read Document</a>
            </li>
            <li class="count">Alpha</li>
            <li class="timestamp">105322</li>
        </ul>
        
        <ul id="{tag_position this document}" class="list_item">
            <li class="source_ahref"><a href="#Link2">This is the Source Link</a></li>
            <li class="text">Support Document 4&nbsp;
                <a class="target_ahref" href="#">Read Document</a>
            </li>
            <li class="count">Charlie</li>
            <li class="timestamp">105324</li>
        </ul>
        
        <ul id="{tag_position this document}" class="list_item">
            <li class="source_ahref"><a href="#Link3">This is the Source Link</a></li>
            <li class="text">Support Document 2&nbsp;
                <a class="target_ahref" href="#">Read Document</a>
            </li>
            <li class="count">Alpha</li>
            <li class="timestamp">105325</li>
        </ul>
        
        <ul id="{tag_position this document}" class="list_item">
            <li class="source_ahref"><a href="#Link4">This is the Source Link</a></li>
            <li class="text">Support Document 3&nbsp;
                <a class="target_ahref" href="#">Read Document</a>
            </li>
            <li class="count">Beta</li>
            <li class="timestamp">105323</li>
        </ul>
        
        </div>
    </div>

    <!-- Javascript -->
//jQuerySort
jQuery.fn.sortBy = function() {  
    var selectors = arguments;

    this.sort(function(a, b) {
        // run through each selector, and return first non-zero match
        for(var i = 0; i < selectors.length; i++) {
            var selector = selectors[i];

            var first = $(selector, a).text();
            var second = $(selector, b).text();

            var isNumeric = Number(first) && Number(second);
            if(isNumeric) {
                var diff = first - second;
                if(diff != 0) {
                    return diff;
                }
            }
            else if(first != second) {
                return first < second ? -1 : 1;
            }
        }

        return 0;
    });

    this.appendTo(this.parent());

    return this;
};

//Pulling and Placing ahref
$(".source_ahref a").each(function(){
    var theHref = $(this).attr("href");
    $(this).parent().next().children('.target_ahref').attr("href", theHref);
});

//Sorts Documents by Position and Rating
$('#list .list_item').sortBy('.count', '.timestmap');

Hope that helps.

Pavel