SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Pulling and placing a link src with jQuery

    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>

  2. #2
    SitePoint Addict
    Join Date
    Jul 2007
    Location
    San Jose, California
    Posts
    355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    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>

  4. #4
    SitePoint Addict
    Join Date
    Jul 2007
    Location
    San Jose, California
    Posts
    355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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'));
    });

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    SitePoint Addict
    Join Date
    Jul 2007
    Location
    San Jose, California
    Posts
    355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I ment closing body tag.

  7. #7
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  8. #8
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,044
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    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?

  9. #9
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  10. #10
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have figured out how to pull the link source with jQuery, anyone have an example of placing?

  11. #11
    SitePoint Addict Pavel_Nedved's Avatar
    Join Date
    Aug 2004
    Location
    Victoria, BC
    Posts
    229
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  12. #12
    SitePoint Addict Pavel_Nedved's Avatar
    Join Date
    Aug 2004
    Location
    Victoria, BC
    Posts
    229
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  13. #13
    SitePoint Addict Pavel_Nedved's Avatar
    Join Date
    Aug 2004
    Location
    Victoria, BC
    Posts
    229
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  14. #14
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  15. #15
    SitePoint Addict Pavel_Nedved's Avatar
    Join Date
    Aug 2004
    Location
    Victoria, BC
    Posts
    229
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  16. #16
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Pavel! Thank you! You are a genius!

    It works like a charm I have credited you in the code

    Now to step into new and uncharted territories...

    Have a great day!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •