Change part of a link on page with javascript

Discussion in 'JavaScript' started by eckul, Jan 8, 2014.

  1. #1
    Hi I need to edit some links on a page. the first below code works but causes other problems on the page as an id is not targeted. The second part of good works part only for text, not links. I need the code to affect all elements with a certain input id. I also can't just replace the links as a query will be dynamically added to the end of each link. So in summary i just need to replace parts of all links with an input id "btnViewDetails". Any help would be great. Cheers



    
    <script language="javascript">
    
    document.body.innerHTML = document.body.innerHTML.replace(/JobSeekers/g,'mobile');
    
    </script>
    
    
    
    
    <script type="text/javascript">
           
    $('#btnViewDetails').each( function() {
            $(this).html($(this).html().replace(/JobSeekers/g,'mobile'));
        });
    
    </script>
    Code (markup):
     
    eckul, Jan 8, 2014 IP
  2. HuggyStudios

    HuggyStudios Well-Known Member

    Messages:
    724
    Likes Received:
    20
    Best Answers:
    26
    Trophy Points:
    165
    #2
    You forgot to wrap your jQuery with a document ready wrapper. Please see the code below to see how to accomplish this.
    
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(function() {
        $.each($('a#btnViewDetails'), function() {
            $(this).text($(this).text().replace(/JobSeekers/g,'mobile'));
        });   
    });
    </script>
    </head>
    <body>
    <a href="#" id="btnViewDetails">JobSeekers</a><br />
    <a href="#" id="btnViewDetails">Text</a><br />
    <a href="#" id="btnViewDetails">JobSeekers</a><br />
    <a href="#" id="btnViewDetails">Text</a><br />
    <a href="#" id="btnViewDetails">JobSeekers</a><br />
    <a href="#" id="btnViewDetails">Text</a><br />
    <a href="#" id="btnViewDetails">JobSeekers</a><br />
    </body>
    </html>
    
    Code (markup):
    I've tested this code and it works fine. In the future please post all of the code from your page.
     
    HuggyStudios, Jan 9, 2014 IP
  3. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #3
    Except that you have multiple IDs with the same name on the same page - which is VERY wrong, in all matters. Either make different IDs, or make the ID a class instead.
     
    PoPSiCLe, Jan 10, 2014 IP
  4. eckul

    eckul Greenhorn

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #4
    thanks for your help. Unfortunately I am working with an old sharepoint webpart and at this point I am unable to change the way it creates the html. After a lot of messing around and a lot of assistance I ended up getting it working with the below code. Cheers

    <script type="text/javascript">
    
    $("input[type=button]").each(function(){
      var oldLocation = $(this).attr("onclick"),
         newLocation;
    
      newLocation = oldLocation.replace("JobSeekers", "mobile").replace("JobPositionDetail", "JobPositionDetail_Mobile");
      $(this).attr("onclick", newLocation);
    });
    
    </script>
    Code (markup):
     
    eckul, Jan 11, 2014 IP